/* CSS Document */

body {
font: 0.8em/2em "trebuchet MS", Verdana, Arial, sans-serif;
margin:30px;
padding:0;
background: #000 url(../assets/generic/sts-background.jpg) no-repeat top center fixed;
color:#fff;
}

body#security {background: #000 url(../assets/generic/sts-background-training.jpg) no-repeat top center fixed;}

#container {
margin:0;
padding:0;
min-width: 820px;
}

#containermain {
margin:0;
padding:0;
min-width: 820px;
}

#content {
margin:0 0 0 210px;
padding:0 0 1em 0;
min-height: 730px;
border: 1px solid #F60;
background: url(../assets/generic/home-transbg.png) repeat;
}

#side {
position:absolute;
left:30px;
top:45px;
width: 230px;
}

#sidemain {
padding:0;
float:left;
margin:0;
width: 230px;
border:1px solid #f60;
background: #000;
}

#sidebg {
float:right;
margin:0 19px 0 0;
padding:0;
width:208px;
height:38px;
background: url(../assets/generic/navbg.png) no-repeat top left;
}

#header {
background: url(../assets/generic/sts-icon.png) no-repeat center right;
height: 40px;
padding:0;
margin:0.5em 20px 0.5em 35px;
}

#footer {
margin-top:10px;
min-width: 820px;
float:left;
clear:both;
margin-left:210px;
border: 1px solid #F60;
height:55px;
background:#000;
}

#googleblurb p {font-size:0.8em;}

/* side styles */

#side h3{
width: 169px;
height: 105px;
background: url(../assets/generic/sts-logo.gif) no-repeat;
text-indent: -9999px;
margin:10px 0 0 35px;
padding:0;
}

#side h4#training {
text-indent: -9999px;
width:146px;
height:22px;
background:url(../assets/navigation/training-services.gif) no-repeat;
margin:15px 0 0 35px;
}

#side h4#other {
text-indent: -9999px;
width:146px;
height:22px;
background:url(../assets/navigation/other-services.gif) no-repeat;
margin:15px 0 0 35px;
}

#side h4#links {
text-indent: -9999px;
width:101px;
height:22px;
background:url(../assets/navigation/quick-links.gif) no-repeat;
margin:15px 0 0 35px;
}

#side p {
font-size:0.9em;
line-height:1.6em;
margin:1.5em 0 1em 35px;
}

#side p b {
color:#f60;
}

ul.navlist  {
margin-left: 0;
padding-left: 0;
list-style: none;
}

ul.navlist li {
background:url(../assets/navigation/bullet.gif) no-repeat 20px;
padding:0.2em 0 0.2em 38px;
font-weight:bold;
}

.navlist li a:link, .navlist li a:visited {
color: #fff;
text-decoration:none;
}

.navlist li a:hover, .navlist li a:active {
color: #f60;
text-decoration:none;
}

.navlist li.last a:hover, .navlist li.last a:active {
color: #0082d1;
text-decoration:none;
}

#side a.email:link, #side a.email:visited {
color:#f60;
}

#side a.email:hover, #side a.email:active {
color:#fff;
text-decoration:none;
}

ul.nav2  {
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
}

ul.nav2 li {
background:url(../assets/navigation/bullet.gif) no-repeat 55px;
padding:0 0 0 70px;
font-weight:bold;
}

.nav2 li a:link, .nav2 li a:visited {
color: #fff;
text-decoration:none;
}

.nav2 li a:hover, .nav2 li a:active {
color: #f60;
text-decoration:none;
}

.nav2 li a.active {color:#f60}

/* header styles */

#header ul, #header li {
display: inline;
list-style: none;
color:#FFF;
margin:0;
padding:0;
}

#header li {
font-weight:bold;
border-right: 1px solid;
padding: 0 0.5em;
font-size: 0.9em;
}

#header li.last {
border-right: 0;
}

#header li a:link, #header li a:visited {
text-decoration:none;
color:#fff;
}

#header li a:hover, #header li a:active {
text-decoration:none;
color:#f60;
}

/* content styles */

#stretch {
max-width: 1300px;
min-width: 410px;
overflow: hidden;
margin:0 20px 0 0;
padding:0 0 0 35px;
}

#stretch img {
border: 1px dotted #f60;
}

#stretch img.blue {
border: 1px dotted #0089dc;
}


#content p, #content h3{
padding: 0 0 0 40px;
}

#content p {
font-size:0.9em;
padding-right: 2em;
text-align:justify;
}

.left {
float:left;
}

#content h3 {font-size: 1.5em;}

#content h3.blue {color:#0089dc;}


#content p b, #content h3 {
color:#f60;
}

#content p b.white {
color:#fff;
text-decoration:underline;
}

#content p em {color:#f60; font-weight:bold;}

#content h3.course {
border-right:0;
border-top: 1px dotted #f60;
border-bottom: 1px dotted #f60;
border-left:0;
background: #666;
color:#fff;
text-transform:uppercase;
}

#content h3.course.blue {border-top: 1px dotted #0089dc;
border-bottom: 1px dotted #0089dc;}

#content a:link, #content a:visited {
color:#f60;
text-decoration:none;
}

#content a:hover, #content a:active {
color:#fff;
text-decoration:underline;
}

#content a.top:link, #content a.top:visited {
color:#fff;
text-decoration:underline;
text-transform:uppercase;
font-weight:bold;
}

#content a.top:hover, #content a.top:active {
color:#f60;
text-decoration:none;
}

#content ul.qualifications, #content ol {
padding: 0 0 0 40px;
margin:0 0 0 20px;
}

#content ul.qualifications li, #content ol li {
font-size:0.9em;
padding-right: 2em;
}

#content img.content, #content img.event {
margin:10px 2em 0 40px;
}

#content img.event {
border: 1px dotted #f60;
}

#content div.line {
border-bottom:1px dotted #f60;
margin: 0 20px 0 40px;
padding:0;
}

a:link img.content , a:visited img.content  {border: 1px dotted #f60;}
a:hover img.content , a:active img.content  {border: 1px solid #fff;}

#content h3.movie {text-indent:-9999px;}

#content h3.movie a:link, #content h3.movie a:visited {
display:block;
width:283px;
height:50px;
background: url(../assets/buttons/movie2.gif) no-repeat;
}

#content h3.movie a:hover, #content h3.movie a:active {
background: url(../assets/buttons/movie.gif) no-repeat;
}

#content img.right {
padding:0 1em;
float:right;
clear:left;
}

a.buttonlink {padding:5px; border:dotted 1px #fff; font-size: 1.3em; font-weight: bold;}

a.buttonlink:link, a.buttonlink:visited {color:#fff;}
a.buttonlink:hover, a.buttonlink:active {background:#999; color:#000;}

#content #coursedate {
float:left;
width:90%;
padding: 10px;
margin-left:40px;
border: 1px dotted #f60;
}

#coursedate p span {
font-weight:bold;
font-size:1.2em;
margin:0;
}

#coursedate p span.orange {color:#f60;}
#coursedate p span.blue {color: #0CF;}
#coursedate p span.purple {color: #C0C}
#coursedate p span.green {color: #0C3;}
#coursedate p span.yellow {color: #FF0;}

#coursedate p {
padding:0;
margin:0;
}

.calendar {
	width: 141px;
	padding: 0;
	margin: 0 10px 0 0;
	border-left: 1px solid #A2ADBC;
	font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #616B76;
	text-align: center;
	background-color: #fff;
}

.nav, .nav a {
	font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #fff;	
	text-align: center;
	text-decoration: none;
}	


caption {
	margin: 10px 0 0 0;
	padding: 0;
	width: 141px;
	background: #f60;
	color: #fff;	 
	font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

#coursedate caption a:link, #coursedate caption a:visited {color:#fff}
#coursedate caption a:hover, #coursedate caption a:active {color:#000}

th {
	font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #616B76;
	background: #D9E2E1;
	border-right: 1px solid #A2ADBC;
	border-bottom: 1px solid #A2ADBC;
	border-top: 1px solid #A2ADBC;
}


td {
	border-right: 1px solid #A2ADBC;
	border-bottom: 1px solid #A2ADBC;
	width: 20px;
	height: 20px;
	text-align: center;
}

td a {
	text-decoration: none;
	font-weight: bold;
	display: block;
}


#coursedate td a.orange:link, #coursedate td a.orange:visited {color:#f60;}
#coursedate td a.orange:hover, #coursedate td a.orange:active {color: #000;}

#coursedate td a.purple:link, #coursedate td a.purple:visited {color:#C0C;}
#coursedate td a.purple:hover, #coursedate td a.purple:active {color: #000;}

#coursedate td a.green:link, #coursedate td a.green:visited {color:#0C3;}
#coursedate td a.green:hover, #coursedate td a.green:active {color: #000;}

#coursedate td a.blue:link, #coursedate td a.blue:visited {color:#0CF;}
#coursedate td a.blue:hover, #coursedate td a.blue:active {color: #000;}

#coursedate td a.yellow:link, #coursedate td a.yellow:visited {color: #FFCC00;}
#coursedate td a.yellow:hover, #coursedate td a.yellow:active {color: #000;}


/* SIA course dates */
#content div.siacourse {
float:left;
width:90%;
padding: 10px;
margin: 0 0 20px 40px;
border: 1px dotted #f60;
}

#content div.siacourse h2 {margin:0; padding:0;}

#content div.siacourse p {
float:left;
padding: 0;
margin: 0;
}

div.siacourse h2.blue, div.siacourse div.coursecolumn h2.blue {color:#09C;}

#content div.siacourse div.coursecolumn {
float:left;
width:220px;
min-height:100px;
margin: 10px 0 0 0;
	}
	
div.siacourse div.coursecolumn.long {clear:left;}	
	
div.siacourse img {float:left; padding: 10px 10px 10px 0}	

div.siacourse p.left {float:left; clear:left;}

/* Highlight Page Layout Styles - MAIN */

body#license a#licensenav,
body#sia a#sianav,
body#phy a#phynav,
body#svq a#svqnav,
body#instructor a#instructornav,
body#office a#officenav,
body#fa a#fanav,
body#course a#coursenav,
body#team a#teamnav,
body#videos a#videosnav,
body#learndirect a#learnnav,
body#contact a#contactnav,
body#about a#aboutnav,
body#events a#eventsnav,
body#news a#newsnav,
body#test a#testnav,
body#contact a#contact2nav,
body#siacourse a#coursesianav,
body#facourse a#coursefanav,
body#phycourse a#coursephynav
{
color:#f60;
text-decoration:none;
}



/* footer styles */

#footer ul, #footer ul li {
margin:3px 0 0 20px;
padding:0;
display:inline;
float:left;
}

#footer li {
display:block;
height:47px;
text-indent:-9999px;
}

#footer li#city {background: url(../assets/generic/city-and-guilds.gif) no-repeat; width: 52px;}
#footer li#learn {background: url(../assets/generic/learn-direct.gif) no-repeat; width: 70px;}
#footer li#sqa {background: url(../assets/generic/sqa-logo.gif) no-repeat; width: 48px;}
#footer li#ila {background: url(../assets/generic/ila.gif) no-repeat; width: 45px;}
#footer li#biiab {background: url(../assets/generic/biiab-logo.gif) no-repeat; width: 75px;}
#footer li#ecdl {background: url(../assets/generic/ecdl-logo.gif) no-repeat; width: 70px;}
#footer li#edexcel {background: url(../assets/generic/edexcel-logo.gif) no-repeat; width: 125px;}
#footer li#lsc {background: url(../assets/generic/lsc-logo.gif) no-repeat; width: 56px;}
#footer li#elcas {background: url(../assets/generic/elcas-logo.gif) no-repeat; width: 64px;}

#footer p {
margin:0.7em 5px 0 0;
float:right;
text-align:right;
font-size:0.8em;
line-height: 1.8em;
}

#footer a:link, #footer a:visited {
color: #fff;
text-decoration:none;
}

#footer a:hover, #footer a:active {
color: #f60;
text-decoration:underline;
}

/* form styles */

form#stsform {
padding:10px; 
border:1px dotted #f60; 
font-size:1em; 
margin:0 40px;
}

form#stsform p {
font-size:1em; 
color:#fff; 
text-align:left; 
padding:15px 5px 5px 0; 
margin:0;
}

form#stsform fieldset#feedback p {padding:4px; margin:0;}

form#stsform fieldset {
display:block; 
border:1px dotted #f60; 
padding:5px 5px 5px 10px; 
margin-bottom:0.5em; 
line-height:1.5em; 
font-size:1em; 
}

form#stsform fieldset:hover {
border:1px dotted #fff; 
}

form#stsform legend {
font-size:0.9em; 
font-weight:bold; 
border:1px dotted #f60; 
margin-bottom:15px; 
padding:6px; 
background:#000; 
color:#fff;
}

* html form#stsform legend { padding:0 0 30px 0; margin:5px 0 0 0; border:none;}

form#stsform label {
clear:left; 
display:block; 
float:left; 
width:170px; 
text-align:left; 
padding-right:10px; 
color:#fff; 
margin-bottom:0.5em;}

form#stsform input {
border:1px solid #f60; 
padding-left:0.5em; 
margin-bottom:0.6em; 
width:280px; 
background:#000;
color:#fff;
}

fieldset#interest input{
width: 400px; 
}

form#stsform input:hover { background: #000; border:1px solid #fff; color:#fff;}
form#stsform input:focus {background:#000; border:1px solid #f60; color:#fff;}

form#stsform select {margin:0 0 1em 0.5em;}

form#stsform textarea {
width:410px; 
height:10em; 
border:1px solid #f60; 
padding:0.5em; 
overflow:auto;
background:#000;
color:#fff;
}
form#stsform textarea:hover { background:#000; border:1px solid #fff; color:#fff;}
form#stsform textarea:focus {background:#000; border:1px solid #f60; color:#fff;}


form#stsform #button1, form#stsform #button2 {
color:#fff; 
padding-right:0.5em; 
cursor:pointer; 
width:205px; 
margin-left:8px; 
background:#F60; 
border:1px solid; 
border-color:#fff #000 #000 #fff;
}

form#stsform #button1:hover, form#stsform #button2:hover {
color:#fff; 
background:#666; 
border:1px solid; 
border-color:#f60 #000 #000 #f60; 
}

form#stsform fieldset#hidden {display:none;}