.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

body { background-color:#415f71; font-family:Calibri, Arial, Sans-Serif; }
#page-container { width:980px; margin:10px auto 50px auto; }

#header { height:35px; } 
#header h1 { float:left; width:340px; height:35px; display:block; text-indent:-100000px; background:url(/img/exerto.no-logo.png) no-repeat top left; margin:0 17px 0 10px;}
#header h1 a { display:block; height:35px; }
#header-info { float:right; }

#login-form a { font-size:11px; color:White; text-decoration:underline; display:inline-block; margin:0 5px 0 0; }
#login-form input[type='text'],
#login-form input[type='password'] { margin:0 4px 0 0; padding:5px 2px 3px 5px; /*height:13px; */ /* 21 -5 -3=13px */ width:100px; /* 100 -2 - 5= 93px */border:none;  font-size:11px; color:#2e4553; background:url(/img/login-form-field-bg.png) no-repeat top left; } 
#login-form input[type='image'] { vertical-align:bottom; }
#login-form span.error { padding-right: 5px; font-size: 10px; font-weight: bold; color: Red; }

#login-status { font-size:14px; color:#8b9ea9; font-weight:bold; }
#login-status span a { display:inline-block; font-size:18px; color:#fff; font-weight:normal; margin:0 17px 0 8px; background: none; }
#login-status a.logoutbutton { display:inline-block; height:22px; width:63px; /*69-6= 63px*/ line-height:22px; background:url(/img/log-out-btn.png) no-repeat top left; padding:0 0 0 6px; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; }

#navi { clear:both; float:left; width:972px; overflow:hidden; background:url(/img/navi-bg.png) no-repeat top left; height:30px; text-align:center; font-size:12px; font-weight:bold; padding:0 4px;} 
#navi h1 { float:left; width:120px; height:30px; display:block; text-indent:-100000px; background:url(/img/exerto.no-logo-updated.png) no-repeat top left; }
#navi h1 a { display:block; height:30px; background:none; }
#navi ul { float:left; position:relative; left:50%; margin:0 0 0 -120px; z-index:10; }
#navi li { height:30px; margin:0 1px 0 0; float:left; position:relative; right:50%; }
#navi a { height:30px; width:auto; display:block; text-transform:uppercase; text-decoration:none; background:url(/img/navi-left.png) no-repeat top left; color:#fff; padding:0 0 0 10px; }
#navi a span { height:19px; /* 30 - 11 = 19 */ display:block; background:url(/img/navi-right.png) no-repeat top right; padding:11px 10px 0 0; cursor:pointer;}
#navi a:hover { background-position:left -30px; }
#navi a:hover span { background-position:right -30px; }
#navi a.selected { background-position:left -60px; color:#214e69; }
#navi a.selected span  { background-position:right -60px; }
#navi .loginStatus { float:right; margin:4px; position:relative; z-index:20; }
#navi .loginStatus a { background:none; display:inline-block; height:auto; text-transform:none; padding:0; }
#navi .loginStatus input { vertical-align:middle; margin:0 0 0 10px; }


#content { }
/* Added by Christian to support articles without videos */
#content h1 { font-size:20px; font-weight:bold; left:20px; top:25px; background: white; padding: 20px; padding-top: 40px;  clear: both; color:#F56600; }

#sub-navi { clear:both; float:left; width:100%; overflow:hidden; padding:7px 0 0 0; background-color:#fff; }
#sub-navi ul { float:left; position:relative; left:50%; }
#sub-navi li { float:left; position:relative; right:50%; padding:0 3px; height:26px; background:url(/img/sub-nav-vert-rule.png) no-repeat top left; }
#sub-navi li.first { background:none; }
#sub-navi a { display:block; padding:3px 4px 0 4px; height:15px; /*18-3 = 15 */ margin:2px 0 0 0; font-size:12px; font-weight:bold; text-transform:uppercase; text-decoration:none; color:#333; }
#sub-navi li.selected { background:url(/img/sub-navi-selected-arrow.png) no-repeat bottom center; } 
#sub-navi li.selected a { background-color:#f56600; color:#fff; }

#flash-video { width:980; }

#video-container { clear:both; position:relative; }
#video-container object { z-index:1; }
#flash-vido-overlay { z-index:5; position:absolute; top:25px; left:20px; display:inline-block; color:#f56600; font-size:20px; font-weight:bold;}

#video-info { /*background:#607f92 url(/img/video-info-bg.png) no-repeat bottom left;*/ background-color:#607f92; margin:-5px 0 0 0; padding:10px 15px 15px 15px; color:#d7e0e4; font-size:14px; }
#video-info div { color:#fff; }
#video-info span.video-title { font-size:20px; font-weight:bold; display:inline-block; margin:0 8px;}
#video-info span.video-presenter { font-weight:bold; }

#textpage-container { margin:-5px 0 0 0; padding:20px; overflow:hidden; color:#333; font-size:14px; background:#fff url(/img/text-page-bg.png) no-repeat bottom left;  }
#textpage-container div.col-one { width:370px; margin:0 29px 0 0; float:left; }
#textpage-container div.col-two { width:260px; margin:0 20px 0 0; float:left; }
#textpage-container div.col-three { width:260px; float:left; }
#textpage-container img { float:left; margin:0 10px 20px 0; }

/* tables in the content page - for listing videos */
#textpage-container table { border-top:1px solid #d9d9d9; font-size:12px; width:100%; margin:0 0 15px 0;}
#textpage-container td { border-bottom:1px solid #d9d9d9; padding:2px 0; }

/* reset the styles back to normal */
#textpage-container p { margin:0 0 10px 0; }
#textpage-container strong { font-weight:bold; }
#textpage-container em { font-style:italic; }
#textpage-container h3 { color:#f56600; font-weight:bold; }

#extra-info { margin:-5px 0 0 0; background-color:#fff; padding:0 5px; width:970px; /*980-5-5 = 970*/ height:140px; overflow:hidden; } 
#extra-info div { float:left; height:134px; margin:6px 0 0 0; padding:0 1px 0 15px; }
#extra-info .col-one { width:305px; /* 321 - 1 - 15 = 305*/ background:url(/img/extra-info-vert-rule.png) no-repeat top right; }
#extra-info .col-two { width:313px; /* 329 - 1 - 15 = 313*/ background:url(img/extra-info-vert-rule.png) no-repeat top right; }
#extra-info .col-three { width:304px; /* 320 - 1 - 15 = 304*/ }
#extra-info h3 { font-size:20px; font-weight:bold; color:#1f3847; margin:13px 0 10px 0; } 
#extra-info p { font-size:12px; font-weight:bold; color:#415f71; }
#extra-info p + a { margin:10px 0 0 0; color:#c95400; font-size:12px; text-decoration:none; display:inline-block; }
#extra-info img { float:right; } 

#footer { background:#1f3847 url(/img/footer-bg-alt.png) no-repeat bottom left; height:42px; padding:0 3px; margin:0; }
#footer li { padding:0 12px; float:left; height:25px; margin:10px 0 0 0; background:url(/img/footer-dotted-rule.png) no-repeat top left; }
#footer li.first { background:none; }
#footer a { text-transform:uppercase; font-size:12px; color:#fff; text-decoration:none; }

#loginModal { background-color:#d9e2e5; padding:10px; height:175px; }
#loginModal h1 { font-size:18px; color:#333; font-weight:bold; }
#loginContainer { margin:15px 0 0 35px; }
#loginContainer .error { color:Red; font-weight:bold; display:inline-block; margin:0 0 5px 0;}
#loginContainer .container {}
#loginContainer .fields { float:left; width:200px; }
#loginContainer .fields input.text { width:150px; height:15px; /*25-5-5 = 15px */ border:none; margin:0 0 5px 0; padding:5px; color:#415861; font-size:11px;}
#loginContainer .links { float:left; font-size:12px; }
#loginContainer .links a { display:block; margin:0 0 10px 0; color:#7d7e7f; }


/* Override Styles specific to #two-col-text-page template */
/* Edited by Christian: Having the class on the body tag was not so easy to implement, added as class to content instead */
#content.two-col-text-page #textpage-container div.col-one { width:660px; margin:0 20px 0 0; }
#content.two-col-text-page #textpage-container div.col-two { margin:0; }

#textpage-container .endsubscriptionbox             { margin: 5px; margin-top: 10px; padding: 5px; border: 1px solid white; }
#textpage-container .endsubscriptionbox h3          { margin-bottom: 10px; font-size: 15px; color: White; }
#textpage-container .endsubscriptionbox label       { color: White; }
#textpage-container .endsubscriptionbox textarea    { width: 400px; height: 200px; }
#textpage-container .endsubscriptionbox input       { margin-top: 10px; }

#textpage-container .endsubscriptionconfirmation    { margin: 5px; margin-top: 10px; padding: 5px; border: 1px solid white; }
#textpage-container .endsubscriptionconfirmation h3 { margin-bottom: 10px; font-size: 15px; color: White; }
#textpage-container .endsubscriptionconfirmation p  { color: White; }


/* Added by Christian: CSS inherited from version 1 but modified */

#exerto-form                                    { background: width: 480px; margin-left: auto; margin-right: auto; display: block; overflow: hidden; }
#exerto-form input                              { color: black; margin-bottom: 2px; margin-right: 2px; width: 150px; font-size: 12px; font-family: Arial; }
#exerto-form .Gray                              { color: gray; }
#exerto-form table tr td.first                  { width: 120px; padding-right: 10px;}
#exerto-form table                              { border: 0; margin-bottom: 0; }
#exerto-form td                                 { border: 0; }
#exerto-form p.FormText                         { float: right; margin-right: 2px; margin-bottom: 0px; }
#exerto-form .box                               { margin-bottom: 4px; padding: 4px; width: 425px; background-color: #91A2AD; }
#exerto-form .box .gender input                 { width: 20px; float:left; }          
#exerto-form .box .gender label                 { float: left; }       
#exerto-form .box .textbox-where                { margin-left: 20px; width:350px; }
#exerto-form .box a                             { color: White; }
#exerto-form #SubmitButton                      { margin-top: 20px; margin-left: 20px;} 
#exerto-form .error-box                         { font-size: 12px; background-color: #F56600; width: 425px; margin-bottom: 4px; clear: left; }      
#exerto-form .error-box .error-box-inner        { padding: 10px; }        
#exerto-form .error-box .error-box-inner ul     { padding-left: 10px; list-style-type: none; padding-bottom: 5px; font-weight: bold; padding-top: 2px; padding-bottom: 4px; }
#exerto-form h1.Verification                    { float: none; margin-top: 40px; }
#exerto-form #VerificationBox                   { width: 425px; margin-bottom: 4px; padding: 10px; background-color: #DB570C; margin-top: 60px; }
#exerto-form #VerificationInput                 { width: 425px; margin-bottom: 4px; padding: 10px; background-color: #DB570C; }
#exerto-form #VerificationError                 { width: 425px; margin-bottom: 4px; padding: 10px; background-color: #DB570C; }
#exerto-form #Caution                           { margin-top: 4px; width: 425px; }
#Caution p                                      { font-weight: bold; }
#exerto-form #Terms                             { float: left; margin-top: 4px; width: 270px; }
#exerto-form #Terms p                           { font-size: 10px; }
#exerto-form #Terms input                       { float: left; width: 20px; }
#exerto-form .UpdPaymentTermsChk input          { width: 20px; }

#addToCalendar                                  { float: right;}
#addToCalendar li                               { background-image: url(/img/calendar.png); background-repeat: no-repeat; padding-left: 28px; margin-bottom: 3px; }
#addToCalendar li a                             { color: White; }

.xsltsearch_result                              { border: 2px dotted #91A2AD; padding: 5px; margin-bottom: 5px; }
.xsltsearch_result a                            { color: #F56600; }
#xsltsearch_navigation a                        { color: #F56600; }