body
{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 80%;
    color: #907553;
    margin: 0;
    padding: 0;
    background: url(    '../images/HSSmart_bg.jpg' ) repeat-x;
}

h1
{
    font-size: 100%;
    line-height: 100%;
    margin: 1px 0 0 0;
    vertical-align: middle;
}

h2
{
    font-size: 100% !important;
    line-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

h4
{
    font-size: 110% !important;
    line-height: 110% !important;
}

p
{
    line-height: 1.3em;
}

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

/* This style was added due to conflicts from ExtJS stylesheets */
.ColumnHolder ul 
{ 
    list-style-type: disc !important;     
    padding-left: 20px !important;
}

a:hover
{
    cursor: pointer;
    color: #907553;
    text-decoration: underline;
}

img
{
    border: none;
}

.OchreText, .OchreText:link
{
    color: #d65600;
    font-weight: bold;
}

.DarkGreyText, .DarkGreyText:link
{
    color: #666666;
    font-weight: bold;
}

#Header
{
    height: 85px;
    padding: 0 13px 0 13px;
    background: url(    '../images/HSSmart_Header.jpg' ) no-repeat top center;
}

#Helix_logo
{
    margin: 8px 0 0 15px;
}

.logo_version
{
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    text-align: right;
    top: 50px;
    width: 168px;
    z-index: 100;
}

.login_button
{
    float: right;
    display: block;
    position: absolute;
    text-indent: -1000%;
    height: 26px;
    width: 142px;
    background: url(    '../images/HSSmart_login_button.png' ) no-repeat top left;
}

.login_button:hover, .RightBarTrial:hover, .RightBarDemo:hover
{
    background-position: bottom left;
}

#HeaderContact
{
    text-align: right;
    float: right;
    clear: both;
    margin: 20px 20px 0 0;
    /*font-size: 1.1em;*/
}

#HeaderRight
{
    clear: both;
    width: 325px;
    float: right;
}

#HeaderLinks
{
    
    float: right;
    clear: both;
    margin: 15px 30px 0 0;
    position: relative;
    font-size: 95%; width: 150px;
}

#HeaderLogin
{
    float: right;
    margin: 0px 30px 0 0;
    padding-right: 20px;
    width: 142px;
    position: relative;
}

#Container
{
    margin: 0;
    padding: 0;
}

#Content
{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

#navigation
{
    height: 44px;
    width: 965px;
    background: url('../images/top_menu_full.png') no-repeat;
}

#nav_text
{
    padding: 15px 0 5px 25px; 
    color: #907553; letter-spacing: 0.05em;
}

#nav_text h1
{
    font-weight: normal;
}

#navigation ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

#navigation li
{
    float: left;
    margin: 0;
    height: 44px;
}

#navigation a
{
    color: #000;
    text-decoration: none;
    font-weight: bold;
    background: url(  '../images/Menu_Divider.png' ) bottom right no-repeat;
    padding: 0 1px 0 0;
    display: block;
    float: left;
    height: 44px;
}

#navigation a span
{
    background: url(    '../images/Menu_bg_off.png' ) right top repeat-x;
    padding: 15px 27px 0 26px;
    display: block;
    float: left;
    height: 30px;    
}

#navigation a:hover span
{
    background: url(    '../images/Menu_bg_on.png' ) right top repeat-x;
}

#navigation .current span
{
    background-image: url(    '../images/Menu_bg_on.png' );
}




/* Curved borders means first and last tabs require different backgronud images */

#navigation .first a span
{
    background: url(    '../images/Menu_bg_first_off.png' ) left top no-repeat;
}

#navigation .first a:hover span
{
    background: url(    '../images/Menu_bg_first_on.png' ) left top no-repeat;
}

#navigation .firstcurrent span, #navigation .firstcurrent a:hover span
{
    background: url(    '../images/Menu_bg_first_on.png' ) left top no-repeat;
}

/* Need extra padding to center text for first tab visually*/
#navigation .firstcurrent span, #navigation .first span
{
    padding-left: 38px;
}



#navigation .last a span
{
    background: url(    '../images/Menu_bg_last_off.png' ) right top no-repeat;
}

#navigation .last a:hover span
{
    background: url(    '../images/Menu_bg_last_on.png' ) right top no-repeat;
}

#navigation .lastcurrent span, #navigation .lastcurrent a:hover span
{
    background-image: url(    '../images/Menu_bg_last_on.png' );
}

/* Need extra padding to center text for last tab visually*/
#navigation .lastcurrent span, #navigation .last span
{
    padding-right: 36px;
}

/* Remove divider line for last navigation item */
#navigation .last a, #navigation .lastcurrent a
{
    background: none;
}




/* Second level navigation styles */
#SubNavigation
{
    height: 21px;
    width: 945px;
    margin: 0 0 0 7px;
    border-left: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    background: url(    '../images/Submenu_bg.png' ) repeat-x;
}

#SubNavLinks
{
    font-size: 80%;
    color: Black;
    padding: 0px 0 0 10px;
}

#SubNavLinks a span
{
    margin: 0 0 0 0;
    padding: 7px 0 0 20px;
    float: left;
    height: 20px;
}

#SubNavLinks a
{
    float: left;
    margin: -2px 0 0 0;
    padding: 0 20px 0 0;
}

#SubNavLinks .activesub a span
{
    background: url(    '../images/subhead_left.jpg' ) no-repeat left center;
}

#SubNavLinks .activesub a
{
    background: url(    '../images/subhead_right.jpg' ) no-repeat right center;
}




#PageContainer
{
    padding: 0 0 0 0;
    background: url(    '../images/HSSmart_body.png' ) repeat-y center center;
    height: auto;

}

#PageContent
{
    min-height: 600px; /*Doesnt work on test site*/
    margin: 0;
    padding: 0 0 0 7px;
}

#PageFooter
{
    height: 20px;
    width: 960px;
    background: #FFFFFF url(    '../images/HSSmart_footer.png' ) no-repeat;
    margin: 10px 0 0 0;
}

#SplashImage
{
    width: 946px;
    height: 321px; border: solid 1px #CCCCCC;
    background: url(    '../images/Helix_main.jpg' ) no-repeat;
}

#SplashText
{   
    text-indent: -1000%;
}

/*This placeholder is required to stop page content jumping when switching in Firefox*/
#SplashImageHolder
{
    /*
    display: block;
    width: 729px;
    height: 288px;
    */
}

/* Rounded white box to fit text in main body next to the right bar */

.WhiteBox
{
    margin-top: 20px;
    width: 729px;
    height: auto;
}

.WhiteBox .body
{
    display: table;
    margin: 0;
    padding: 0;
}


.WhiteBoxTop
{
    background: url( '../images/white_rounded_box_top.png' ) no-repeat center top;
    height: 15px;
    margin: 0;
}

.WhiteBoxBody
{
    background: url( '../images/white_rounded_box_body.png' ) repeat-y;
    padding: 1px 15px 1px 15px;
}

.WhiteBoxBody p
{
    padding-top: 0;
    margin-top: 0;
}


.WhiteBoxFooter
{
    height: 22px;
    background: url( '../images/white_rounded_box_bottom.png' ) no-repeat center bottom;
}

#RightBar
{
    float: right;
    width: 162px;
    height: 275px;
    margin: 0 20px 0 0;
}

.RightBarLine
{
    background: url(   '../images/hr_bg.gif' ) repeat-x center center;
    width: 100%;
    height: 1px;
    margin: 5px 0 5px 0;
}

#RightBar .BulletPoint
{
    background: url(   '../images/Bullet_point.png' ) no-repeat left center;
    padding: 0 0 0 10px;
    margin: 0 0 0 15px;
    color: #616161;
}

.RightBarTrial
{
    background: url(   '../images/RightBar_FreeTrial.png' ) no-repeat left top;
    display: block;
    height: 90px;
    width: 162px;
    text-indent: -1000%;
    margin: 0 0 10px 0;
}

.RightBarDemo
{
    background: url(   '../images/RightBar_ViewDemo.png' ) no-repeat left top;
    display: block;
    height: 90px;
    width: 162px;
    text-indent: -1000%;
    margin: 0 0 10px 0;
}

.RightBarPad
{
    display: block;
    height: 90px;
    width: 162px;
}

.ColumnHolder
{
    /*background-color: #e8e8e8;*/
    display: table;
    clear: both;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 10px;
}

.ColumnHolderFull
{
    width: 100%;
    margin-bottom: 20px;
    margin-top: 0;
}

.LeftColumn
{
    margin: 0 0 20px 0;
    padding: 0;
    width: 49%;
    float: left;
}

.RightColumn
{
    margin: 0 0 20px 0;
    padding: 0;
    width: 49%;
    float: right;
}







/* Accordion */
.accordionHeader, .accordionHeaderSelected
{
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    background: url(   '../images/form-expander_bg.gif' ) no-repeat;
    margin-top: 5px;
    padding: 4px 5px 7px 25px;
    height: 12px;
}

.accordionHeaderSelected
{
    background-image: url(   '../images/form-expander_bg0.gif' );
}

.accordionContent
{
    background: url(   '../images/Accordion_bg.gif' ) no-repeat bottom center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0 20px 0 15px;
    width: 840px;
    clear: both;
}


/*  
    Accordion Small
    Separate images for nested accordions
*/
.accordionHeaderSml, .accordionHeaderSmlSelected
{
    position: relative;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    background: url(   '../images/form-expander_small_bg.gif' ) no-repeat;
    margin-top: 5px;
    padding: 4px 5px 7px 25px;
    height: 11px;
}

.accordionHeaderSmlSelected
{
    background-color: Aqua;
}

.accordionHeaderSmlSelected
{
    background-image: url(   '../images/form-expander_small_bg0.gif' );
    overflow: hidden;
}

.accordionContentSml
{
    background: #ffffff url(   '../images/Accordion_small_bg.gif' ) no-repeat bottom center;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px 20px 15px 15px;
    width: 790px;
}






/*

Styles for home page content switcher

*/

.FrontMenu
{
    margin: 0 0 0 -15px;
    padding: 0;
    height: auto;
}

.FrontMenu .Bar
{
    width: 921px;
    height: 148px;
}

.FrontMenu .Panel
{
    width: 921px;
    height: auto;
}

.FrontMenu .PanelShift
{
    margin-top: -40px;
}

.FrontMenu .Panel .body
{
    width: 921px;
    background: transparent url(  '../images/Home_content_body.png' ) center center repeat-y;
    margin: 0; padding: 0;
    
}

.FrontMenu .Panel .topoff
{
    width: 921px;
    height: 33px;
    background: url(  '../images/Home_content_top.png' ) top center no-repeat;
}

.FrontMenu .Panel .topon
{
    width: 921px;
    height: 0px;
    background: url(  '../images/Home_content_body.png' ) center center repeat-y;
}

.FrontMenu .Panel .bottom
{
    width: 921px;
    height: 24px;
    background: url(  '../images/Home_content_bottom.png' ) bottom center no-repeat;
}

.FrontMenu .item1:hover, .FrontMenu .item2:hover, .FrontMenu .item3:hover
{
    background-position: bottom left;
}

.FrontMenu .item1
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Assessment_button.png' ) top left no-repeat;
}

.FrontMenu .item1on
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Assessment_button_on.png' ) top left no-repeat;
}

.FrontMenu .item1off
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Assessment_button_off1.png' ) top left no-repeat;
}

.FrontMenu .item2
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Management_button.png' ) top left no-repeat;
}

.FrontMenu .item2on
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Management_button_on.png' ) top left no-repeat;
}

.FrontMenu .item2off
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Management_button_off1.png' ) top left no-repeat;
}

.FrontMenu .item3
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Reporting_button.png' ) top left no-repeat;
}

.FrontMenu .item3on
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Reporting_button_on.png' ) top left no-repeat;
}

.FrontMenu .item3off
{
    cursor: pointer;
    float: left;
    text-indent: -1000%;
    width: 307px;
    height: 148px;
    background: url(  '../images/Reporting_button_off1.png' ) top left no-repeat;
}

.Revert
{
    cursor: pointer;
    color: #d65600;
    float: right;
    clear: both;
    width: 50%;
    text-align: right;
}

.hidden
{
    display: none;
}

.displaytext
{
    width: auto;
    display: table;
    margin: 0px 30px 0 40px;
}

/* Shift text up a bit to make it look better */
#content1 div, #content2 div, #content3 div
{
    margin-top: -10px;
}

/*

End styles for home page content switcher

*/


.testimonials
{
    font-style: italic;
    line-height: 1.4em;
}

.quote
{
    font-size: 120%;
    font-weight: bold;
    color: #000;
}

.quote_name
{
    font-size: x-small;
    font-weight: bolder;
}

.ContentSlider
{
    display: table;
    width: 850px;
    height: auto;
    margin: 0;
    padding: 0;
}

.Slider
{
    display: none;
}

.slide
{
    float: right;
    margin: 0;
    padding: 0;
}

.anchorLink
{
}

.btn-slide
{   
    text-align: left;
    height: 16px;
    padding: 0px 20px 0 20px;
    color: #000000;
    text-decoration: none;
    background: url( '../images/arrow.gif' ) no-repeat right top;
}

.active
{
    background-position: right bottom;
}

#content0 .LeftColumn, #content0 .RightColumn, #content0 .ColumnHolder
{
    padding: 0;
    margin: 0;
}

.centred
{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.HSSmartTable
{
    /*font-size: 85%;*/
}

.HSSmartTable th
{
    font-weight: bold;
    background-color: #f5e7cc;
    text-align: left;
    padding: 5px 5px 5px 5px;
}

.HSSmartTable td
{
    width: 25%;
    vertical-align: top;
    padding: 5px 5px 5px 5px;
}

.HSSmartTable tr
{
    background-color: #FFFFFF;
}

.alignRight
{
    float: right;
}

.alignLeft
{
    float: left;
}

/* Maintain line height consistency */
sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline; /*_vertical-align: bottom;*/
    position: relative;
}

sup
{
    bottom: 1ex;
}

sub
{
    top: .5ex;
}

.columns3
{
    float: left;
    width: 30%;
    margin: 10px 25px 0 0;
}

.clearleft
{
    height: 1px;
    clear: left;
}

.clearboth
{
    height: 20px;
    clear: both;
}


.quoted
{
    background: url( '../images/quotes_left.gif' ) no-repeat left top;
    padding-left: 35px;
}

.quoted p
{
    background: url( '../images/quotes_right.gif' ) no-repeat right bottom;
    padding-right: 20px;
}

#VideoPlaceholder
{    
    border: 1px solid #CCCCCC; 
    margin-left: auto;
    margin-right: auto;
    display: block;
    
}

#formdetails
{ 
    height: 250px;
}

.quoteblock
{
    background: url( '../images/quotes_left.gif' ) no-repeat left top;
    padding-left: 35px;
    padding-top: 10px;
    float:left; margin: 0;
    width: 95%; 
    /*color: #000000;*/
}

.quoteblock .quotetext
{
    background: url( '../images/quotes_right.gif' ) no-repeat right bottom;
    padding-right: 20px;
    float:left;
    width: auto;
    padding-bottom: 15px; margin-bottom: 10px;     
    font-size: 110%; line-height: 1.4em;
}

.quoteblock .quotetitle
{    
    float:right; height: 100%;
    display: block; width: auto;
    clear: left; font-weight: bold;    
}

.sideborderbox
{   
    float: left;
    width: 31%;
    border-left: solid 1px #CCCCCC; 
    height: 160px; 
    padding: 10px 0 10px 10px;
    margin: 20px 0px 10px 0;
}

#mapholder
{
    width: 500px;
}


/* the overlayed element */
#overlay {
	
	/* growing background image */
	background-image:url("../images/white.png");
	
	/* dimensions after the growing animation finishes  */
	width:530px;
	height:400px;		
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:35px;
	
	position: relative;
}

/* default close button positioned on upper right corner */
#overlay div.close {
	background-image:url("../images/close.png");
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.ContentHolder
{
    margin: 0 0 0 0px; display: table;
    
}

.HomeColumnHeader
{
    font-weight: bold; 
    height: 30px; 
    color: #f4eee2;
    background-color: #907553;
    margin: 0;
    padding: 0px 0 5px 20px;
}

.HomeColumn1 h3, .HomeColumn2 h3, .HomeColumn3 h3
{
    height: 22px; 
    color: #f4eee2;
    background-color: #907553;
    margin: 0;
    font-size: 99%;
    padding: 6px 0 0 20px;
}

.HomeColumn1, .HomeColumn2, .HomeColumn3
{
    float: left;
    width: 33.1%; 
    height: auto;    
    padding: 0;
    margin: 0;
}

.HomeColumn1 a, .HomeColumn2 a, .HomeColumn3 a
{
    text-decoration: underline;
}

.HomeColumn1 hr, .HomeColumn2 hr, .HomeColumn3 hr
{
    width: 90%; height: 1px; background-color: #dbd0be; border: 0; color: #dbd0be;
}

.HomeColumn2
{ 
    border-left: 1px solid #dbd0be;
    border-right: 1px solid #dbd0be;
}

.HomeColumn1 p, .HomeColumn2 p, .HomeColumn3 p
{
    padding: 0 20px 0 20px;
    font-size: 90%; line-height: 1.4em;
}

p.smaller
{
    font-size: 85%;
}