/* - GLOBAL
=========================================================================*/
html { font-size:101% }
body { font:.75em/1.417em Arial, Helvetica, sans-serif /* 12 px */; color:#58595b; padding:0; margin:0 auto; /* make anything a hover with this code >> */ behavior:url("/css/csshover.htc") }
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, #ColumnCenter p a, #Body a { color:#018ba4; text-decoration:none; -moz-outline-width:0; outline:none; font-size:12px; }
a:hover, #ColumnCenter p a:hover { color:#0f3f55; text-decoration:underline }

.clear_all { clear:both }

#ColumnCenter h1, #ColumnCenter h2, #ColumnCenter h3 { font-size:2.083em; font-weight:normal; color:#0f3f55 }
#ColumnCenter h1 { line-height:normal; margin:10px 0 15px }
#ColumnCenter 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> */
#ColumnLeft .cta_bluebar { display:inline; float:left; clear:both; width:156px; font-size:.833em; color:#25bed9; background:#0f3f55; text-align:right; padding:4px 8px; margin:8px 0 0; text-decoration:none }
#ColumnLeft .cta_bluebar span { cursor:pointer; float:left; font-size:1.2em }
#ColumnLeft .cta_bluebar:hover { color:#38bfef; background:#1d5a76; text-decoration:none }

/* 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> */
#ColumnLeft .cta_lightbluebar { display:inline; float:left; clear:both; width:156px; color:#fff; background:#25bed9; padding:17px 1px 12px 15px; margin:8px 0 28px; text-decoration:none }
#ColumnLeft .cta_lightbluebar .bluetext { cursor:pointer; position:relative; display:block; font-size:.833em; color:#0f3f55; margin:0 0 0 -1px }
#ColumnLeft .cta_lightbluebar .bluetext b { float:left; font-size:1.6em; font-weight:normal; padding:0 10px 0 0 }
#ColumnLeft .cta_lightbluebar:hover { background:#1e9bb1; color:#fff; text-decoration:none }
#ColumnLeft .cta_lightbluebar:hover .bluetext { color:#fff }

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

/* - NAVIGATION
=========================================================================*/
.NavLeft { padding:8px 0 20px }
.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:444px; background:#ccc }

#Splash { float:left; clear:both; width:786px; height:155px; background:#0f3f55;}
#Splash.ultraslim { height:8px; line-height:1px; background:url(/images/bkg-splash_ultraslim.gif) }
#Splash.banner01 { height:171px; 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 49px 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 }

#ColumnLeft, #ColumnCenter { float:left; min-height:200px; height:auto !important; height:200px }
#ColumnLeft a, #ColumnCenter a { text-decoration:none }

#ColumnLeft { width:172px; padding:0 35px 0 17px }
#ColumnCenter { width:545px; padding:0 17px 40px 0 }
#ColumnCenter ul { padding:0 0 0 20px }
#ColumnCenter li { list-style:disc }


/* 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 li { list-style:disc }

/* 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 }
#GetAccessMiniForm 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 { background:#1d5a76 }

/* 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 }

/* - 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:94px; 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:94px; 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; 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; height:173px; 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 .play { 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:right; color:#4d4d4d; padding:0 34px 0 0 }