/* --------------------------------------------------------------

   CSS Framework
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159

   * Screen & Projection Styles *

   This is the main CSS-file for the framework.
   Include this in the <head> of every page.

-------------------------------------------------------------- */

@import "reset.css";
@import "content.css";
@import "forms.css";
@import "typography.css";


/* =CONTAINERS
-------------------------------------------------------------- */

body {
/*
  background: #ccd6de url(../img/body-bg.jpg) repeat-y  50% 0;
*/
  /* background: #ccd6de; */
  /* background: #FEEBEB; */
  /* background: #FBFACA; */
  background: white;
}

body.popup {
  background: none;
  margin: 10px;
}

div#container {
  position:relative;
  background: #fff;
  width: 960px;
  height:100%;
  margin: 0 auto;
}

#content {
  /* outline:solid red 1px; */
}

div#content-primary {
  position:relative;
  margin:5px 20px 20px 20px;
  padding:0px 0px 0 0;
  /* outline: red solid 1px; */
  /* width: 467px; */
  /* float: left; */
  font-size: 0.75em;
}

body.single-col div#content-primary {
  width: 670px;
}

body.full-width div#content-primary {
  width: 733px;
}

body.landing-page div#content-primary {
  position:relative;
  margin:5px 20px 20px 35px;
  padding:0px 270px 0 0;
  /* outline: red solid 1px; */
}

body.basic div#content-primary, body.error div#content-primary {
  margin-left:245px;
  width: 550px;
  /* outline:solid red 1px; */
}

body.home div#content-primary, body.prog-index div#content-primary {
  position:relative;
  margin:5px 20px 20px 20px;
  padding:0;
  /* outline: red solid 1px; */
}


body.a-z div#content-primary {
  position:relative;
  margin:5px 20px 20px 20px;
  padding:0px 20px 0 0;
  width: 690px;
  /* outline: red solid 1px; */
}

div#content-primary p {
  margin-top: 10px;
}

div#content-primary h2 {
  margin-top: 20px;
}


/* lists are a too general purpose structure, need to write a
general one that depends on a ul class for displaying list information.
Put this into content.css */

/*
div#content-primary ul {
  margin: 5px 0 0 30px; padding: 0;
}
*/
/*
div#content-primary li {
  padding: 2px 0 0 0;  list-style-image:url(bullet.gif);
}
*/

div#content-primary img.tvc_album
  { vertical-align: top; margin: 6px; padding: 6px; border: 1px dashed #AAA; }

div#content-secondary {
  background:#fff;
  width:245px;
/*  position:absolute;
  top:370px;
  right:20px; */
  float: left;
  margin-top: 10px;
}

div#content-tertiary {

}

#branding {
  position:relative;
  height:92px;
  margin:-10px 20px 0 20px;
  border-bottom:solid 1px #ccc;
}


/* =FIRST-TIME-USER */

div#first-time-user {
  position:absolute;
  top:10px;
  right:10px;
  background:#eee;
  outline:solid 1px;
  display:none;
}
div#first-time-user a {
  display:block;
  text-align: left;
  font-size: .7em;
}


/* =MY OWN STUFF
-------------------------------------------------------------- */


.left_box_header {background: #ECEDE8; padding: 0 0 0px 10px;
                  margin: 10px 0 0 0; border: solid #A8A8FF 1px; border-width: 1px 1px 0 1px;}
.left_box_header h1 {color: #333333; font-size: 70%; font-weight: bold; text-transform: uppercase; padding: 2px 0;}

.left_box_content {background: /* #ECEDE8 */ white; padding: 0 0 10px 10px; margin: 0;
                   border: solid #A8A8FF 1px; border-width: 1px 1px 1px 1px}
/* .left_box_content p {padding: 5px 0 0 0; font-size: 75%} */
.left_box_content p {padding: 5px 0 0 0;}
.left_box_content p.act_date {text-align: right; padding-right: 10px; padding-top: 0;}
/* .left_box_content h2 {padding: 7px 0 5px 0; font-weight: normal; font-size: 80%;} */
.left_box_content h2 {padding: 7px 0 5px 0; font-weight: normal;}
.left_box_content a:visited {color: blue;}


table.table_container { width: 100%; padding-top: 5px; padding-left: 10px; font-size: 100% }
table.table_container td { padding: 0 } /* overrides th,td in typograhpy.css */


/* =SITE-TOOLS
-------------------------------------------------------------- */

ul#site-tools {
  list-style-type: none;
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */


ul#nav-primary {
  position:absolute; /* position this absolutely to keep Opera from jumping about with the dropdowns */
  top:93px;

  left:3px;
  list-style-type: none;
  background: #fff;
  margin:0 20px 0 20px;
  height:35px;
  width:auto; /* also important for Opera */
  text-transform: uppercase;
  /* outline:solid 1px green; */
}

ul#nav-primary li {
  float:left;
  padding:0 5px;
  margin:0;
  color:#333;
  background:#fff url(../files/images/page_structure/nav-divider.gif) no-repeat 0  12px;
  /* outline:solid red 1px; */
}

ul#nav-primary li.first {
  background-image: none;
}

ul#nav-primary li a {
  float:left;
  display: block;
  padding:3px 5px 2px;
  text-decoration: none;
  color:#333;
  border-top:solid #fff 5px;
  /* outline:solid 1px; */
}

ul#nav-primary li.first a {
  border-left:none;
  margin-left:0px;
}

/* ul#nav-primary li a:hover, ul#nav-primary li a.here */
ul#nav-primary li a:hover, ul#nav-primary li a.current

/* jbs uses this peculiar way of highlighting current menu items */
/*
body.aboutus ul#nav-primary li a#aboutus,
body.programmes ul#nav-primary li a#programmes,
body.execed ul#nav-primary li a#execed,
body.research ul#nav-primary li a#research,
body.companies ul#nav-primary li a#companies,
body.news ul#nav-primary li a#news,
body.alumni ul#nav-primary li a#alumni
*/
{
  color:#5F89C2;
  border-bottom:solid #5F89C2 5px;
  /* border-top:solid #5F89C2 5px; */
}


/* NESTED LISTS - DROPDOWNS */

ul#nav-primary li ul {
  z-index:100;
  position: absolute;
  
  /* change here for the top position of the dropdown */
  top:25px;
  
  width:15em;
  font-size:100%;
  left: -999em;
  margin:-10;
  padding:0;
  color:#333;
  border-top:0;
  border-right:solid 1px #999;
  border-bottom:solid 1px #999;
  border-left:solid 1px #999;
  background-image: none;
  background:transparent;
  clear:both;
  list-style-type: none;
  /* opacity: 0.92;
  filter:alpha(opacity=92); */  /* note this opacity set for everything within the element */
}


ul#nav-primary li ul li {
  float:none;
  font-size:100%;
  padding:0;
  margin:0;
  color:#fff;
  background:transparent;
  background-image: none;
}


ul#nav-primary li ul li a {
  display:block;
  float:none;
  color:#333;
  text-transform: none;
  background:#fff;
  border-top:solid 1px #ccc;
  padding:4px 4px 4px 18px;
  margin:0;
}


/* main navigation */

ul#nav-primary li ul li a:hover {
  /* border-top:solid 1px #ccc; */
  border-bottom:solid 0px #ccc;

  background:#fff url(../files/images/icons/nav-arrow.gif) no-repeat 5px 48%;
}


#nav-primary li:hover ul, #nav-primary li.sfhover ul {
  left: auto;
}


/* =NAV-SECONDARY
-------------------------------------------------------------- */

ul#nav-secondary {
  /* float:left; */
  list-style-type: none;
  padding:0;
  margin:10px 0 50px 20px;
  display:block;
  width:166px;
  background: #fff;
  font-size: 0.75em;
/*   border-top:solid 1px red;
  outline:solid 1px; */
}

ul#nav-secondary li {
  padding:0;
  margin:0;
  border-bottom:solid 1px #ccc;
}

ul#nav-secondary li a {
  padding:5px 5px 5px 15px;
  display:block;
  text-decoration: none;
  color:#666;
}


ul#nav-secondary li a.parent, ul#nav-secondary li ul li a.parent {
  color:#5F89C2;
}

ul#nav-secondary li a.parent:hover, ul#nav-secondary li ul li a.parent:hover {
  background-image: none;
  color:#5F89C2;
}

ul#nav-secondary li a:hover, ul#nav-secondary li a.here, ul#nav-secondary li a.here:hover {
  /* background:#fff url(../img/nav-arrow.gif) no-repeat 0 48%; */
  color:#5F89C2;
}

ul#nav-secondary li.current a, ul#nav-secondary li.current a:hover  {
  background: #eee;
  color:#165788;
}


ul#nav-secondary li.first a  {
  /* text-align: center;
  font-weight: bold; */
}


/* nested secondary nav */

ul#nav-secondary li ul {
  list-style-type: none;
  font-size: 1em;
  padding:0;
  margin:0 0 5px 0;
  display:block;
  width:166px;
  background: #fff;
  border:none;
}
ul#nav-secondary li ul li {
  border:none;
  padding:0;
  margin:0;
  background:#fff;
  /* outline:solid 1px; */
}

ul#nav-secondary li ul li a {
  margin:0 0 0 15px;
  background: #fff;
  padding:2px 5px 2px 15px;
  display:block;
  text-decoration: none;
  color:#666;
}
ul#nav-secondary li ul li a:hover, ul#nav-secondary li ul li a.here {
  background:#fff url(../img/nav-arrow.gif) no-repeat 0 48%;
  color:#5F89C2;
}

/* one more level of nested secondary nav */

ul#nav-secondary li ul li ul {
  list-style-type: none;
  font-size: 1em;
  padding:0;
  margin:0 0 5px 15px;
  display:block;
  width:151px;
  background: #fff;
  border:none;
}

ul#nav-secondary li ul li ul li {
  border:none;
  padding:0;
  margin:0;
  background:#fff;
  /* outline:solid 1px; */
}

ul#nav-secondary li ul li ul li a {
  margin:0 0 0 15px;
  background: #fff;
  padding:2px 5px 2px 15px;
  display:block;
  text-decoration: none;
  color:#666;
}
ul#nav-secondary li ul li a:hover, ul#nav-secondary li ul li a.here {
  background:#fff url(../img/nav-arrow.gif) no-repeat 0 48%;
  color:#5F89C2;
}


/* =NAV-TERTIRARY
-------------------------------------------------------------- */

ul#nav-tertiary {
  list-style-type: none;
}

/* =BREADCRUMB
-------------------------------------------------------------- */

#nav-breadcrumb ul {
  list-style-type: none;
  display:block;
  height:25px;
  margin:0 20px 0 20px;
  padding:5px 0 0 13px;
  border-bottom:solid 1px #ccc;
  color:#666;
  font-size: .7em;
  /* outline:solid 1px; */
}

#nav-breadcrumb ul li {
  float:left;
  margin:0;
  padding:0 3px 0 3px;
}

#nav-breadcrumb ul li a {
  text-decoration: none;
}
#nav-breadcrumb ul li a:hover {
  text-decoration: underline;
}


/* =FIND-OUT-MORE
-------------------------------------------------------------- */
#find-out-more, .highlight-box {
  width:200px;
  background: #fff;
  border:solid 1px #608BC4;
  margin-top: 10px;
  padding-bottom: 5px;
  /* opacity: 0.50;
  filter:alpha(opacity=50); */  /* note this opacity set for everything within the element */
}


#find-out-more p, #find-out-more li {
  font-size: 80%;
}


/* =FOOTER
-------------------------------------------------------------- */
#site-info {
  clear: both;
  position:relative;
  border-top:solid 1px #ccc;
  margin:70px 20px 0 20px;
  padding:10px 0 20px 0;
  font-size: .9em;
  /* outline:solid purple 1px; */
}

#site-info p {
  text-align:right;
  margin:0;
}

#site-info ul {
  list-style-type: none;
  position:absolute;
  right:-5px;
}

#site-info li {
  float:left;
  margin:0;
  padding:0 5px 0 5px;
  background:#fff url(../files/images/page_structure/nav-divider.gif) no-repeat 0  5px;
}

#site-info li.first {
  background-image:none;
}

#site-info li a {
  color:#999;
}

#site-info li a:hover {
  color:#900;
}

/* =EXEC-ED landing page
-------------------------------------------------------------- */
.oDivColsExeced {
  float:left;
  width:199px;
/*  change the height of the exec ed columns here, so they match up */
  height:245px;
  padding:10px;
  margin:0px 10px 0px 0px;
  background:#fff url(/assets/img/course-promo-bg.jpg) no-repeat bottom right;
  border:solid 1px #eee;
}

.feature {
  position:relative;
  height:auto;
  margin:20px 0 0 0;
/*  outline:solid 1px; */
}

.feature img {
  margin:0 20px 40px 0;
}

.details {
  position:absolute;
  top:0;
  left:267px;
  width:auto;
}

.details p.right {
  text-align: right;
  margin-top:-10px;
}

/* ADDED BY RLN, 2008/10/23 */
.border {
  border: 1px solid black;
  padding: 8px 8px 0px 8px;
  margin-bottom: 12px;
}

/* ADDED BY RLN, 2008/10/29 */
.nobr {
  white-space: nowrap;
}

/* ADDED BY RLN, 2009/05/07 */
.columnWatch {
  float:left;
  width:199px;
  padding:10px;
  margin:15px 10px 0px 5px;
  background:#fff url(/assets/img/column-watch-bg.jpg) no-repeat bottom right;
  border:solid 1px #eee;
}