/* - GLOBAL
=========================================================================*/
html { font-size:101% }
body { font:.75em/1.417em Arial, Helvetica, sans-serif /* 12 px */; color:#58595b; background:#e5e5e5; padding:0; margin:0 auto; /* make anything a hover with this code >> */ behavior:url("/css/csshover.htc") }
table, td { border:0; border-spacing:0; border-collapse:collapse; vertical-align:top }
img { border:0 }
html, ul, li, form, input, select, h1, h2, h3, h4, table, tr, td, p { list-style-type:none; padding:0; margin:0 }
a { color:#018ba4; text-decoration:none; -moz-outline-width:0; outline:none }
a:hover { color:#0f3f55; text-decoration:underline }

.clear_all { clear:both }

h1, h2, h3 { font-size:2.083em; font-weight:normal; color:#0f3f55 }
h1 { line-height:normal; margin:10px 0 15px }
h2 { font-size:1.5em; line-height:normal; color:#000; margin:10px 0 5px }
span.h2 {font-size:1.5em; line-height:normal; color:#000; margin:10px 0 5px}
/* Call to Action link // dark blue bar with light blue text
 * USE -- <a href="" class="cta_bluebar"><span>LINK TEXT</span>>></a> */
.cta_bluebar { display:inline; float:left; clear:both; width:192px; font-size:.833em; color:#25bed9; background:#0f3f55; text-align:right; padding:4px 8px; margin:0 0 8px }
.cta_bluebar span { cursor:pointer; float:left; font-size:1.2em }
.cta_bluebar:hover { color:#38bfef; background:#1d5a76; text-decoration:none }

.cta_greybar { display:inline; float:left; clear:both; width:192px; color:#fff; background:#ddd; padding:6px 0 6px 13px; margin: 0 0 16px 0; }
.cta_greybar .bluetext { cursor:pointer; position:relative; display:block; font-size:.733em; color:#0f3f55; margin:0 0 0 -1px }
.cta_greybar .bluetext b { float:left; font-size:1.6em; font-weight:normal; padding:0 10px 0 0 }
.cta_greybar:hover { background:#ccc; color:#fff; text-decoration:none }
.cta_greybar:hover .bluetext { color:#fff }

/* Call to Action link // light blue box bar with dark blue and white text
 * USE -- <a href="" class="cta_lightbluebar"><span class="bluetext"><b>LINK TEXT</b>>></span>LINK TEXT</a> */
.cta_lightbluebar { display:inline; float:left; clear:both; width:192px; color:#fff; background:#25bed9; padding:17px 1px 12px 15px; margin:8px 0 8px }
.cta_lightbluebar .bluetext { cursor:pointer; position:relative; display:block; font-size:.833em; color:#0f3f55; margin:0 0 0 -1px }
.cta_lightbluebar .bluetext b { float:left; font-size:1.6em; font-weight:normal; padding:0 10px 0 0 }
.cta_lightbluebar:hover { background:#1e9bb1; color:#fff; text-decoration:none }
.cta_lightbluebar:hover .bluetext { color:#fff }

/* - WRAPPERS
=========================================================================*/
#SiteWrap { width:960px; background:#fff; border-top:5px solid #000; margin:0 auto }

/* - HEADER
=========================================================================*/
#Header { height:135px; padding:11px 0 0 }
#Header img { float:left; margin:2px 58px 0 58px }
#Header .block { float:left; width:239px; height:115px; border-left:1px solid #e5e5e5; padding:8px 0 0 0 }
#Header .block span { display:block; color:#000; padding:0 0 3px 13px }
#Header .block ul { float:left; width:106px; padding:0 0 0 13px }
#Header .block ul li { padding:0 0 3px }
#Header .block ul.extend { width:226px }
#Header .block .login_text { color:#9b9b9d; padding:0 0 0 13px }
#Header .block .login_link { float:left; display:inline; margin:6px 0 0 13px }
#Header .block .login_link:hover { text-decoration:none }

/* - NAVIGATION
=========================================================================*/
.NavLeft { padding:8px 0 0 }
.NavLeft li { border-bottom:1px solid #dbdbdb }
.NavLeft li#end { border:0 }
.NavLeft a { display:block; color:#018ba4; padding:2px 6px }
.NavLeft a.sub { padding:2px 6px 2px 18px;}
.NavLeft a:hover, .NavLeft li.current a { color:#0f3f55; background:#e8f7f9; text-decoration:none }

/* - FLASH / SPLASH
=========================================================================*/
#Flash { height:424px; background:#ccc }

#Splash { float:left; clear:both; width:960px; height:134px; background:#0f3f55 }
#Splash.ultraslim { height:8px; line-height:1px; background:url(/images/bkg-splash_ultraslim.gif) }
/*#Splash.banner01 { height:200px; background:url(/classes/header_image/index.php) }
#Splash.banner01 { height:200px; background:url(/classes/imageRotator.php) }
*/
#Splash p { display:inline; float:left; width:100%; min-height:68px; height:auto !important; height:68px; background:url(/images/overlay-splash_lines.png); margin:33px 0 0 }
#Splash .blue { position:relative; float:left; clear:both; font-family:DIN-Medium; font-weight:normal; font-size:28px; color:#25bed9; padding:9px 0 2px 20px }
#Splash .white { position:relative; float:left; clear:both; width:90%; font-family:DIN-Regular; font-style:normal; font-size:18px; line-height:25px; color:#fff; padding:10px 0 0 20px }
*:first-child+html #Splash .white { line-height:31px }
* html #Splash .white { line-height:31px }
* html #Splash .blue { line-height:37px; margin:-11px 0 -10px }
* html #Splash p { background:url(/images/overlay-splash_lines_ie6.gif) }

/* - BODY
=========================================================================*/
#Body { float:left; padding:11px 0 53px }
#Body.internal { padding:19px 0 34px }
#Body .heading { display:block; font-size:1.167em; font-weight:normal; color:#000 }

/* - BODY : Homepage
=========================================================================*/
#HpBody { height:358px }
#HpBody td { width:224px; border-left:1px solid #e5e5e5; padding:8px 0 0 15px }
#HpBody td.hp_training { width:225px; border:0 }
#HpBody td.hp_training .heading { padding:0 0 0 4px }
#HpBody td .viewall { color:#03b4d3 }
#HpBody td .viewall:hover { color:#007287; text-decoration:none }

/* First column // designated as Training Programs */
#HpBody td.hp_training ul { position:relative; display:inline; float:left; width:214px; margin:15px 0 8px -2px }
#HpBody td.hp_training ul li { display:inline; float:left; font-weight:bold; margin:0 0 7px }
#HpBody td.hp_training ul li img { float:left; width:72px; height:54px; margin:0 10px 0 0 }
#HpBody td.hp_training ul li a { float:left; width:200px; color:#018ba4; background:#ededed; padding:6px 7px }
#HpBody td.hp_training ul li a:hover { color:#03b4d3; background:#0f3f55; text-decoration:none }
#HpBody td.hp_training ul li a:hover img { border:2px solid #03b4d3; margin:-2px 8px -2px -2px }
#HpBody td.hp_training .viewall { margin:0 0 0 7px }

/* Second column // designated as Featured Expert */
#HpBody td.hp_expert p { position:relative; float:left; clear:both; width:214px; line-height:1.333em; padding:0 10px 0 0; margin:0 0 22px }
#HpBody td.hp_expert a img { position:relative; display:inline; float:left; width:214px; height:143px; background:url(/images/image_unavailable_214x117.gif); margin:15px 0 12px -5px }
#HpBody td.hp_expert a b { cursor:pointer; display:block; clear:left;  float:left; width:200px; padding:0 0 3px; margin:0 }
#HpBody td.hp_expert a:hover { text-decoration:none  }
#HpBody td.hp_expert a:hover img { background:url(/images/image_unavailable_214x117_2.gif) }
#HpBody td.hp_expert a { margin:0 0 0 3px }

/* Third column // designated as Recent News & FAQs */
#HpBody td.hp_recent p { padding:12px 12px 12px 0 }
#HpBody td.hp_recent .hp_news { min-height:132px; height:auto !important; padding:0 0 25px }
#HpBody td.hp_recent ul { padding:6px 0 13px }
#HpBody td.hp_recent li { padding:0 0 7px }

/* Third column // designated as Contact Us */
#HpBody td.hp_contact p { padding:12px 0 15px }
#HpBody td.hp_contact p b { display:block; font-size:1.167em; color:#000 }

/* - BODY : Internal
=========================================================================*/
#ColumnLeft, #ColumnCenter, #ColumnRight { float:left; min-height:200px; height:auto !important; height:200px }
#ColumnLeft { width:149px; padding:0 0 0 19px }
#ColumnCenter { width:507px; border-right:1px solid #ccc; padding:0 17px 40px 28px }
#ColumnRight { width:224px; padding:0 0 0 15px }

/* Left Column */
#ColumnLeft.extend { width:720px; border-right:1px solid #ccc; padding:0 }

/* Center Column */
#ColumnCenter p { padding:0 20px 15px 0 }
#ColumnCenter .snippet_wrap { position:relative; margin:0 0 0 -28px }
* html #ColumnCenter .snippet_wrap { float:left; clear:both; display:inline }
#ColumnCenter .snippet { float:left; display:inline; width:150px; min-height:107px; height:auto !important; height:107px; font-size:.917em; border-top:1px solid #ccc; padding:3px 0 0; margin:28px 0 0 28px }
#ColumnCenter .snippet .title { display:block; font-size:1.091em; color:#018ba4; padding:0 0 0 1px }
#ColumnCenter .snippet a { cursor:pointer; color:#03b4d3; margin:0 0 0 1px }
#ColumnCenter .snippet a:hover { color:#0f3f55; text-decoration:none }
#ColumnCenter .snippet a:hover .play { text-decoration:none }
#ColumnCenter .snippet p { color:#000; padding:0 0 0 1px }
#ColumnCenter .snippet img { float:left; width:150px; height:84px; margin:5px -150px 0 0; display:inline; }
#ColumnCenter .snippet .play { clear:both; width:150px; height:84px; margin:5px -150px -89px 0; }
#ColumnCenter ul { padding:0 0 0 20px }
#ColumnCenter li { list-style:disc }
#ColumnCenter li li { list-style:circle }
#ColumnCenter li li li { list-style:square }

/* Right Column */
#ColumnRight .cta_bluebar { margin:8px 0 0 }

/* Play icon overlay
 * USE -- <span class="play">&nbsp;</span><img ...> */
.play { cursor:pointer; position:relative; display:inline; float:left; background:url(/images/overlay-play.png) 50% 50% no-repeat }
* html .play { background:url(/images/overlay-play_ie6.gif) 50% 50% no-repeat }

/* Paging */
.paging { float:left; clear:both; width:100%; font-size:.917em; border-top:1px solid #e5e5e5; padding:3px 0 0; margin:7px 0 0 }
.paging .numberofpages { float:left; padding:0 0 0 7px }
.paging .pagenav { float:right; padding:4px 10px 0 0 }
.paging .pagenav a { position:relative; float:left; height:10px; line-height:10px; border:solid #b1b3b6; border-width:0 1px; padding:0 6px; margin:0 0 0 -1px }
.paging .pagenav a:hover { color:#000 }
.paging .pagenav a.current, .paging .pagenav a.current:hover { font-weight:bold; color:#636466; text-decoration:none }
.paging .pagenav a.nextBtn { border-left-color:#fff; border-right:0 }
.paging .pagenav a.prevBtn { border-right-color:#fff; border-left:0; z-index:1 }
.paging .pagenav a.nextBtn:hover, .paging .pagenav a.prevBtn:hover { text-decoration:none }

/* View by [chart] or [list] */
.viewby { float:right; color:#939393; padding:1px 12px 0 0 }
.viewby a { color:#000 }
.viewby a:hover, .viewby a.current-view { color:#018ba4; text-decoration:underline }

/* Info Bar at the top of some pages above content */
.infobar { padding:2px 0 6px 2px }
.infobar a { color:#7d7d7d }
.infobar a:hover { color:#0f3f55; text-decoration:none }

/* Dark blue lock bar typically used as a LINK */
.lockbar { cursor:pointer; display:block; width:100%; height:37px; background:#0f3f55 url(/images/icon-unlocked_blue.gif) 8px 5px no-repeat; margin:0 0 7px }
.lockbar:hover { background:#1D5A76 url(/images/icon-unlocked_blue2.gif) 8px 5px no-repeat; text-decoration:none }
.lockbar span { float:left; color:#fff; padding:9px 0 0 38px }
.lockbar span b { font-size:1.167em; color:#25bed9 }
.lockbar i { float:right; font-size:.833em; color:#25bed9; padding:11px 13px 0 0 }

/* Get Full Access heading and mini form */
#Body .heading.getaccess { position:relative; font-weight:bold; color:#0f3f55; background:url(/images/icon-unlocked.gif) no-repeat; padding:7px 0 0 29px; margin:-7px 0 4px }
* html #Body .heading.getaccess { background-position:0 2px; padding-bottom:2px }
#GetAccessMiniForm { float:left; clear:both; width:208px; padding:0 0 0 2px }
#GetAccessMiniForm form { padding:11px 0 0 }
#GetAccessMiniForm input { width:200px; height:18px; font:1em Arial, Helvetica, sans-serif; color:#0f3f55; border:1px solid #d7d7d7; background:#dcf7fb; padding:2px 0 0 6px; margin:0 0 8px }

#ColumnRight .password {background:url(/images/password.gif) 5px 4px no-repeat #dcf7fb; }
#ColumnRight .password_nobg {#dcf7fb;}

#GetAccessMiniForm input.submit, #loginform input.submit { cursor:pointer; width:auto; height:auto; font-weight:bold; color:#25bed9; background:#0f3f55; border:0; padding:2px 5px; margin:3px 0 0 }
#GetAccessMiniForm input.submit:hover, #loginform input.submit:hover { background:#1d5a76 }
#loginform input { width:200px; height:18px; font:1em Arial, Helvetica, sans-serif; color:#0f3f55; border:1px solid #d7d7d7; background:#dcf7fb; padding:2px 0 0 6px; margin:0 0 8px }
.highlight {background:#efeeee;}
#Body .highlight .heading.getaccess { position:relative; font-weight:bold; color:#0f3f55; background:url(/images/icon-unlocked.gif) no-repeat; padding:7px 0 0 29px; margin:5px 0 4px }
* html #Body .highlight .heading.getaccess { background-position:0 2px; padding-bottom:2px }
/* Video Details */
#Video { display:inline; float:left; clear:both; width:100%; min-height:281px; height:auto !important; height:auto; margin:0 0 3px }
#Video img { float:left; height:281px; }
.overplay { cursor:pointer; position:relative; display:inline; float:left; background:url(/images/overlay-play.png) 50% 50% no-repeat; width:495px; height:281px; margin-top:0; margin-bottom:-281px }
* html .overplay { background:url(/images/overlay-play_ie6.gif) 50% 50% no-repeat }

/* - TRAINING & EXPERT LISTS
=========================================================================*/
#TrainingList #ColumnCenter, #ExpertList #ColumnCenter { width:496px; padding-left:39px }
#TrainingList #ColumnRight .heading, #TrainingList #ColumnLeft .heading, 
#ExpertList #ColumnRight .heading, #ExpertList #ColumnLeft .heading { padding-bottom:10px }
#TrainingList #ColumnCenter .heading, #ExpertList #ColumnCenter .heading { padding-bottom:18px }
#TrainingList #ColumnRight .cta_bluebar, #ExpertList #ColumnRight .cta_bluebar { margin:0 0 8px }

#TrainingList .list-item, #ExpertList .list-item { width:489px; height:83px; background:#f2f2f2; padding:12px 0 0 7px; margin:0 0 1px }
#TrainingList .list-item.alt, #ExpertList .list-item.alt { background:#fafafa }
#TrainingList .list-item:hover, #ExpertList .list-item:hover { background:#e6e6e6 }
#TrainingList .list-item a, #ExpertList .list-item a { font-size:1.167em; font-weight:bold; color:#018ba4 }
#TrainingList .list-item a:hover, #ExpertList .list-item a:hover { color:#03b4d3; text-decoration:none }
#TrainingList .list-item img, #ExpertList .list-item img { float:left; width:125px; height:83px; margin:-6px 13px 0 0 }
#TrainingList .list-item .play { width:125px; height:94px; margin:-6px -132px -94px 0 }
#TrainingList .list-item p, #ExpertList .list-item p { float:left; width:335px; color:#757575; padding:4px 0 0 2px }
#ExpertList .list-item p { font-size:.917em; font-style:italic; color:#282828 }
#TrainingList .list-item p b { font-weight:normal; color:#000 }
#TrainingList .list-item p span { font-size:.917em }



/* - EXPERT DETAILS
=========================================================================*/
#ExpertDetails #ColumnLeft { position:relative; margin:0 0 -27px }
#ExpertDetails .the_details { width:696px; margin:0 0 0 15px }
#ExpertDetails .the_details .left { width:478px; background:#f7f7f7; border-right:1px solid #FFF; padding:15px 13px 40px 9px }
#ExpertDetails .the_details .right { width:187px; background:#f2f2f2; padding:19px 0 0 8px }
#ExpertDetails .infobar { padding-left:17px }

#ExpertDetails .the_details .heading { color:#0f3f55; padding:0 0 12px 7px }
#ExpertDetails .the_details .section { float:left; clear:both; width:100%; border-top:1px solid #dedede; padding:9px 0 12px }
#ExpertDetails .the_details .section p { padding:0 15px 14px 7px }
#ExpertDetails .the_details .section p b { display:block; font-weight:normal; color:#000; padding:0 0 3px }
#ExpertDetails .the_details .mainphoto { float:left; width:231px; margin:0 22px 20px 0 }
#ExpertDetails h1 { font-size:1.5em; font-weight:bold; color:#018ba4; margin-top:22px }
#ExpertDetails h2 { font-size:1em; font-style:italic; color:#282828; margin-bottom:20px }

#ExpertDetails .the_details a.thumbnail { display:inline; float:left; clear:both; cursor:pointer; margin:0 0 0 7px }
#ExpertDetails .the_details a.thumbnail img { float:left; width:150px; height:84px }
#ExpertDetails .the_details a.thumbnail .play { width:150px; height:84px; padding:0; margin:0 0 -89px }
#ExpertDetails .the_details a.thumbnail span.title { float:left; clear:both; width:140px; padding:4px 0 9px 1px }
#ExpertDetails .the_details a.thumbnail:hover { text-decoration:none }

#ExpertDetails .the_details .moreinfo li { padding:0 7px 4px 7px }

/* - TRAINING DETAILS
=========================================================================*/
#TrainingDetails #ColumnCenter { width:500px; padding-left:35px }
#TrainingDetails h1 { font-size:1.5em; font-weight:bold; color:#018ba4; margin-top:0 }
#TrainingDetails h1.locked { position:relative; background:url(/images/icon-locked.gif) 0 3px no-repeat; padding:0 0 0 19px; margin:-3px 0 12px }

#TrainingDetails .the_details { float:left; clear:both; width:476px; background:#f2f2f2; padding:0 12px }
#TrainingDetails .the_details .heading { color:#0f3f55; padding:0 0 12px 7px }
#TrainingDetails .the_details .section { float:left; clear:both; width:100%; border-top:1px solid #dedede; padding:9px 0 12px }
#TrainingDetails .the_details .section.noborder { border:0 }
#TrainingDetails .the_details .section p { padding:0 15px 14px 7px }
#TrainingDetails .the_details .section p b { display:block; font-weight:normal; color:#000; padding:0 0 3px }
#TrainingDetails .the_details .section .related { float:left; width:48%; font-size:.917em; color:#282828; line-height:normal; padding:0 0 14px 7px }
#TrainingDetails .the_details .section .related b { display:block; font-size:1.182em; margin:0 0 6px }



/* - FOOTER
=========================================================================*/
#Footer { clear:both; height:66px; color:#747373; background:#000; padding:22px 0 0 14px }
#Footer a { color:#fff; margin:0 7px }
#Footer a:hover { color:#38bfef; text-decoration:none }
#Footer a.stjo_link { float:right; display:inline; position:relative; margin:-22px 19px 0 0 }
#Footer .copyright { font-size:.917em; line-height:1.333em; color:#808080; padding:4px 0 0 7px }
#Footer .copyright a { color:#4d4d4d; margin:0 }
#Footer .copyright a:hover { color:#4d4d4d; text-decoration:none }
#Footer .copyright span { float:none; color:#4d4d4d; padding:0 34px 0 0 }