/*
THEME NAME: Step Online
THEME URI: http://www.simnplystep.co.uk/
DESCRIPTION: 960 Grid System based CSS for Step Online
VERSION: 1.0
AUTHOR: <a href="http://www.simplystep.co.uk/">Step Online</a>
*/

/* Tools */
.discreet, hr, .screenReader, legend, #searchform label { position: absolute !important; top: -9999em !important; left: -9999em  !important; height: 1px !important; visibility: hidden !important; display: none !important; overflow: hidden !important }
/* End Tools */

/* Site Structure */
body { background: #FFF; color: #262626; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif }
#main_content { background: url(img/main_content_bg.jpg) top left repeat-x; border: 1px solid #E8E8E8; margin-bottom: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px }
#content { border-left: 1px solid #E8E8E8; margin-left: 9px; padding: 15px 20px; width: 660px }
.container_12 { position: relative }
.box { border: 1px #DDD solid; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 20px 20px 0; margin-bottom: 20px }
/* End Site Structure */

/* Header */
.header { position: relative }
#logo {	background: url(img/step-online-logo.jpg) center center no-repeat; float: left; height: 115px; margin: 10px; width: 255px }
#logo a { display: block; height: 100%; width: 100%; text-indent: -9999em }
#searchform { float: right; position: relative; display: inline; margin: 10px 5px 0px 0px; }
#searchform input { width: 176px; font-size: 95%; color: #484848; border: 1px #CCC solid; padding: 2px; margin-right: 31px; vertical-align: middle }
#searchform a { position: absolute; top: 0; right: 0; display: block; width: 22px; height: 22px; background: url(img/searchicon.jpg) no-repeat; text-indent: -9999em; vertical-align: middle }
/* End Header */

/* Nav */
#nav { background: #F7F7F7 url(img/navigation_bg.jpg) top left repeat-x; border: 1px solid #EAEAEA; font-family: "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif; font-size: 14px; height: 40px; margin-bottom: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px }
#nav li { border-right: 1px solid #EAEAEA; float: left; list-style: none; margin: 0; padding: 0 }
#nav li.client_login { background: #5B5B5B url(img/client_login_bg.jpg) top left repeat-x; border: none; float: right; font-size: 12px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px }
#nav li a { color: #262626; display: block; line-height: 40px; padding: 0 20px }
#nav li.client_login a { color: #FFF; font-weight: normal }
.home_link { text-indent: -9999em; background: url(img/home_icon.png) no-repeat 50% 50%; width: 20px }
#nav .current_page_item, #nav .current_page_ancestor { font-weight: bold }
/* End Nav */

/* Links */
a { color: #09C; text-decoration: none }
a:focus, a:hover { text-decoration: underline }
/* End Links */

/* Typography */
p { line-height: 175% }
h2 { font-weight: bold; color: #262626; font-size: 14px; margin: 0 0 10px 0; padding: 0; text-transform: uppercase }
#content h2, #content h3 { font-size: 20px; font-weight: normal }
#content h3 { font-size: 16px; font-weight: bold }
#content ul { list-style-image: url(img/star_bullet.jpg); list-style-type: circle; padding-left: 14px }
#content ul li { line-height: 175%; margin: 0 0 6px }
.client, .org { font-size: 85% }
.important { font-size: 17px }
/* End Typography */

/* Slider */
#slider { height: 250px; margin-bottom: 20px; width: 940px; -moz-border-radius: 15px; -webkit-border-radius: 15px; overflow: hidden; position: relative }
#slider ul { list-style: none; margin: 0; padding: 0; overflow: hidden; width: 940px }
#slider li { display: inline; float: left; position: relative; height: 250px; margin: 0; padding: 0; width: 940px; overflow: hidden }
.frameBR, .frameBL, .frameTR, .frameTL { position: absolute; z-index: 500; background-repeat: no-repeat; height: 17px; width: 17px }
.frameBR { right: 0; bottom: 0; background: url(img/frameBR.png) }
.frameBL { left: 0; bottom: 0; background: url(img/frameBL.png) }
.frameTL { left: 0; top: 0; background: url(img/frameTL.png) }
.frameTR { right: 0; top: 0; background: url(img/frameTR.png) }
/* End Slider */

/* Panels */
#panels { background: #F6F6F6 url(img/panels_bg.jpg) top left repeat-x; border: 1px solid #E8E8E8; height: 200px; margin-bottom: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px }
#panels p, #panels blockquote {	margin-bottom: 10px }
#panels blockquote { font-style: italic }
#panels .alpha { border-right: 1px solid #E8E8E8; height: 200px; margin-right: 9px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px }
#panels h2 { padding: 5px 0 5px 0 }
#panels .alpha h2, #panels .omega h2 { padding: 5px 20px 5px 20px }
#panels .alpha p, #panels .omega p, #panels .alpha blockquote, #panels .omega blockquote { padding: 0 20px }
#panels .alpha blockquote p { padding: 0 }
#panels .omega { border-left: 1px solid #E8E8E8; height: 200px; margin-left: 9px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px }
.blue { background: #006292 url(img/feature_bg.jpg) top left repeat-x; color: #FFF; height: 200px }
.blue h2 { color: #FFF }
/* End Panels */

/* Forms */
div.fieldset { border: 1px #DDD solid; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: 408px }
#contactForm ol.forms { margin: 20px 20px 0 20px !important; padding: 0 !important }
input.submit { width: auto !important; padding: 0 !important; margin: 0 !important }
#contactForm li { clear: left; position: relative }
.error { color: red }
span.error { position: absolute; left: 408px; top: 50%; font-size: 90%; display: block; width: 220px }
#contactForm label, #contactForm input, #contactForm textarea { margin: 0 0 10px; float: left; position: relative; display: inline; width: 140px }
#contactForm input, #contactForm textarea { width: 180px; border: 1px #CCC solid; padding: 2px }
#contactForm li.inline input, #contactForm li.inline label { width: auto }
#contactForm textarea { height: 160px; width: 220px }
#contactForm #sendCopy { padding: 0; margin-right: 6px }
#contactForm li.buttons input { float: none; margin: 0; padding: 0 }
.thanks { margin: 20px }
.thanks h3 { font-weight: bold }
/* End Forms */

/* Footer */
#footer { border-top: 1px solid #E8E8E8; color: #666; font-size: 11px; padding-top: 20px }
#footer a { color: #666 }
ul#footer_navigation { float: left; margin: 0 }
ul#footer_navigation li { float: left; font-size: 11px; font-weight: bold; list-style: none; margin: 0 10px 0 20px }
ul#footer_navigation li ul li {	float: none; font-weight: normal; margin: 5px 0 }
p.contact_details { line-height: 150%; padding-right: 20px; text-align: right }
ul.legal { clear: both; float: right; padding-right: 20px }
ul.legal li { float: left; list-style: none; margin: 0 0 0 20px }
/* End Footer */

/* Sidebar Nav */
#sub_navigation { width: 200px; padding: 15px 0; font-size: 90% }
#sub_navigation ul { list-style: none }
#sub_navigation a { padding-left: 20px }
#sub_navigation .page-item-19 a, #sub_navigation .page-item-21 a { font-weight: bold; color: #000 }
#sub_navigation .page_item ul li a { color: #09C; font-weight: normal } 
#sub_navigation li { margin-left: 0; font-weight: normal }
#sub_navigation li.current_page_item a { position: relative; left: -2px; padding-left: 22px; background: url(img/indent.jpg) no-repeat 0 50% }
#sub_navigation li.current_page_item li a { background: none }
/* End Sidebar Nav */

/* Breadcrumbs */
ol.breadcrumbs { border: 1px solid #E8E8E8; font-size: 11px; height: 25px; line-height: 25px }
ol.breadcrumbs li { color: #999; float: left; list-style: none; margin: 0 }
ol.breadcrumbs li a { display: block; padding: 0 15px 0 10px; background: url(img/breadcrumbs_divider.gif) center right no-repeat }
/* End Breadcrumbs */

/* Images */
.floatRight { float: right; margin: 0 0 20px 20px }
.floatLeft { float: left; margin: 0 20px 20px 0 }
/* End Images */

/* Elements */
.assessmentButton { display: block; width: 265px; height: 28px; background: url(img/assessmentButton.png) no-repeat; margin: 0 auto; text-indent: -9999em }
.assessmentButton:focus, .assessmentButton:hover { background-position: -265px 0 }
/* End Elements */