/* 
Main CSS
Copyright (c) 2006-2007, Victoria Bailey
*/


/*STRUCTURE
---------------------*/
#wrapperContainer {
  margin: 0 auto;
  padding: 0 30px;
  text-align: center;
  width: 800px;
}

#headerContainer {
  float: left;
  height: 270px;
  margin: 10px 0 20px 0;
  width: 800px;
}

#contentContainer {
  float: left;
  margin-right: 10px;
  width: 550px;
}

#rightPanelContainer {
  float: left;
  width: 240px;
}

#footerContainer {
  float: left;
  margin-top: 10px;
  width: 800px;
}

.clear {clear: both;}


/*STYLE
-----------*/
body {
  background-color: #EAEAEA;
  font-size: 100.01%;
  line-height: 1.2em;
}

a {color: #602F7A;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

h1 {
  border-bottom: 1px solid #BFBFBF;
  color: #602F7A;
  font-size: 2.0em;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

h2 {
  color: #602F7A;
  font-size: 1.8em;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

img {border: 0;}

p {
  font-size: 1.2em;
}

p.dash {
  border-top: 1px dashed #BFBFBF;
  padding-top: 1em;
}

p.caption {
  font-size: 1.1em;
  line-height: 1.1em;
  margin-top: 0;
}

p.courses {
  text-align: center;
}

ul {
  margin: 0 0 0 1.5em;
  padding: 0 0 0 1.5em;
}

li {
  font-size: 1.2em;
  list-style-type: disc;
  text-align: justify;
}

ul ul li {
  list-style-type: square;
}

dl {
  font-size: 1.2em;
  margin: 0 0 0 1.5em;
  text-align: justify;
}

dd {
  margin-bottom: 1em;
}


#courseTable {
  padding: 0;
  margin: 0;
  width: 550px;
  font-size: 1.1em;
}

th {
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  border: 1px solid #BFBFBF;
}

td {
  text-align: left;
  border: 1px solid #BFBFBF;
}

td.description {
  text-align: justify;
  background-color: #dfc5ed;
}

#wrapperContainer {
  background-color: #FFF;
  color: #4C4C4C;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62.5%;
  text-align: justify;
}

/* Header */
#header {
  background-image: url(../images/pageTemplate/earlyYearsPic.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  display: inline;
  float: left;
  height: 239px;
  position: relative;
  width: 560px;
}

body#home #header {background-image: url(../images/pageTemplate/earlyYearsPic.jpg);}
  
body#services #header {background-image: url(../images/pageTemplate/managementPic.jpg);}
  
body#courseDetails #header {background-image: url(../images/pageTemplate/businessAdminPic.jpg);}

body#apprenticeships #header {background-image: url(../images/pageTemplate/earlyYearsPic.jpg);}

body#links #header {background-image: url(../images/pageTemplate/managementPic.jpg);}

#header #imageMap a {
  cursor: pointer;
  height: 60px;
  position: absolute;
  top: 172px;
  text-decoration: none;
}

#header #imageMap a i {visibility: hidden; }

#header #imageMap a#cityGuildsLogo {left: 14px; width: 84px;}

#header #imageMap a#iipLogo {left: 108px; width: 90px;}

/* Navgigation */
ul.nav {
  background-color: #8E61A6;
  background-image: url(../images/pageTemplate/navBK.gif);
  background-repeat: repeat-x;
  border-top: 1px solid #47235A;
  border-bottom: 1px solid #47235A;
  display: inline;
  height: 28px;
  float: left;
  margin: 240px 0 0 0;
  padding: 0;
  width: 559px;
}

ul.nav li {
  display: inline;
  float: left;
  margin: 0;
}

ul.nav li a {
  color: #47235A;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  padding: 4px 12px 5px 12px;
  text-decoration: none;
  text-transform: uppercase;
}

ul.nav li a:hover {
  background-color: #47235A;
  background-image: url(../images/pageTemplate/navBK2.gif);
  background-repeat: repeat-x;
  color: #FFF !important;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

body#home li.home a, body#home li.home a:hover,
body#services li.services a, body#services li.services a:hover,
body#courseDetails li.courseDetails a, body#courseDetails li.courseDetails a:hover,
body#apprenticeships li.apprenticeships a, body#apprenticeships li.apprenticeships a:hover,
body#links li.links a, body#links li.links a:hover,
body#success li.success a, body#success li.success a:hover
body#contacts li.contacts a, body#contacts li.contacts a:hover {
  background-color: #47235A;
  background-image: url(../images/pageTemplate/navBK2.gif);
  background-repeat: repeat-x;
  color: #FFF !important;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

/* Course Buttons */
ul.courseNav {
  margin: 0;
  padding: 0;
}

ul.courseNav li {
  display: inline;
  float: left;
  list-style-type: none;
  margin: 0;
}

ul.courseNav li a {
  background-image: url(../images/pageTemplate/buttonBK1.gif);
  background-repeat: no-repeat;
  color: #000;
  display: block;
  height: 58px;
  line-height: 1.3em;
  margin: 0;
  padding: 18px 14px 14px 14px;
  text-decoration: none;
  text-align: left;
  width: 212px;  
}

ul.courseNav li a:hover {background-image: url(../images/pageTemplate/buttonBK2.gif); text-decoration: none;}

ul.courseNav li a.earlyYears {background-image: url(../images/pageTemplate/buttonRoundBK1.gif);}

ul.courseNav li a.earlyYears:hover {background-image: url(../images/pageTemplate/buttonRoundBK2.gif); text-decoration: none;}

ul.courseNav li .header {
  color: #FFF;
  font-size: 1.4em;
  font-weight: bold;
}

#contentContainer {
  text-align: justify;}

#rightPanelContainer {
  background-color: #FFF;
  color: #4C4C4C;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
}

/* Footer */
#footerContainer {
  border-top: 1px solid #BFBFBF;
  text-align: center;
}

#footerContainer ul#footerNav {margin: 2px 0 2px 0;}

#footerContainer ul#footerNav li {
  color: #4C4C4C;
  display: inline;
  font-size: 1.2em;
  font-weight: bold;
  list-style-type: none;
  margin: 0;
}

#footerContainer ul#footerNav li a {
  color: #602F7A;
  padding: 0 2px 0 2px;
}

/* Copyright */
#footerContainer ul#copyright {margin: 2px 0 5px 0; }

#footerContainer ul#copyright li {
  color: #4C4C4C;
  display: inline;
  font-size: 1.1em;
  font-weight: bold;
  list-style-type: none;
  padding: 5px 2px 5px 2px;
  margin: 0;
}

.xhtmlBadge, .cssBadge {
  background-repeat: no-repeat;
  background-position: 0 .4em;
  padding-left: 0;
}

.badgePadding {padding-left: 16px;}

.xhtmlBadge {background-image: url(../images/pageTemplate/xhtmlBadge.gif);}

.cssBadge {background-image: url(../images/pageTemplate/cssBadge.gif);}


/*STYLE - FORM
----------------------*/
form { 
  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  margin: 0 0 0 50px;
  padding: 0;
  /*min-width: 500px;
  max-width: 600px;*/
  width: 440px; 
	font-size: 150%;
}

form fieldset {
  /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border: #FFF 1px solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form fieldset legend {
  font-size: 1.1em;  /* bump up legend font size, not too large or it'll overwrite border on left */
  font-weight: bold;
  color: #FFF;  /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width: auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}