body{
    font-size: 12px;
    font-family: arial;
    margin: 0;
    padding: 0;
    line-height: 20px;
    color: #464646;
}

h1{
    font-size: 2em;    
}

h3{
    font-size: 1em;    
}

a{
    text-decoration: none;
    outline: none;
    color: #0182C4;
}

h1.page_header{
    margin-top: 40px;
    margin-bottom: 20px;
    color: white;
    font-size: 	1.25em;
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	padding: 7px 7px 7px 20px;
	background: #0182C4;
	background: -moz-linear-gradient(center left, #0182C4 0%,#ffffff 100%);
	background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #0182C4),color-stop(1, #ffffff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0182C4', endColorstr='#ffffff', GradientType=1); /* for IE */

}    

#main_container{
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

#top_section{
    
}

#dhlogo{
    background: url(../images/logo_dh.jpg) no-repeat;
    width: 158px;
    height: 63px;
    float: left;
}

    #dhlogo a{
        text-indent: -9999px;
        height: 65px;
        display: block;
    }

#menu{
    background: url(../images/menu_line.jpg) 100% 100% no-repeat;
    height: 63px;
    width: 680px;
    float: right;
    position: relative;
}

#menu ul{
    position: absolute;
    top: 40px;  
    right: 0;  
    padding: 0;
    margin: 0;
}

#menu ul li{
    display: inline;
    padding-right: 50px;
}

#menu ul li.last{
    padding-right: 0;
}

#menu li a{
    text-decoration: none;
    font-weight: bold;
    color: #464646;
}

#menu li a:hover{
    color: #2C9F2C;
}

#menu li a.active{
    color: #5DC224;
}

#banner{
    background: url(../images/cios_banner.jpg) no-repeat;
    width: 892px;
    height: 280px;
    margin-left: auto;
    margin-right: auto;  
    display: none;
    position: relative;
}

    #banner #youtube_video{
        position: absolute;
        right: 0;
        top: 58px;
    }
    
    #banner #youtube_video a{
        background: url(../images/youtube_link.jpg) no-repeat;
        width: 196px;
        height: 165px;
        display: block;
        text-indent: -99999px;
    }

.item_container{
    width: 281px;
    height: 286px;
    float: left;
    margin-left: 20px;
    margin-right: 10px;
    position: relative;
}

.item_content{
    margin-top: 120px;
    width: 250px;  
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.item_content p{
    top: 130px;    
    text-align: justify;
}

.item_content h3{
    color: #0182C4; 
    top: 100px;   
}

.item_content a.readmore{
    background: url(../images/icon_more.jpg) no-repeat;
    width: 16px;
    height: 13px;  
    position: relative; 
}

.item_content a span{
    visibility: hidden;
}

.item_container#learn_more{
    background: url(../images/featured_learnmore.jpg) no-repeat;
    position: relative;
}

.item_container#learn_more span.hover{
    background: url(../images/featured_learnmore_hover.jpg) no-repeat;
    width: 281px;
    height: 102px;
    display: block;
    position: absolute;
    display: none;
}

.item_container#screenshots{
    background: url(../images/featured_screenshots.jpg) no-repeat;
}

.item_container#contactus{
    background: url(../images/featured_contactus.jpg) no-repeat;
}    

#why_cios_list_container{
    margin-bottom: 20px;
} 

.why_cios_list{
    float: left;
}

.why_cios_list li{
    list-style-image: url(../images/greendot.jpg);
    padding-bottom: 10px;
}  

#cios_packages_header{
    color: white;
    background: #0182C4;
    padding: 5px 5px 5px 20px;
    font-size: 1.25em;
    width: 140px;
    margin-bottom: 0;
    -moz-border-radius: 0 30px 0 0;
    -webkit-border-radius: 0 30px 0 0;
}

.cost_table{
    border-collapse: collapse;
    width: 900px;   
    border: 1px solid #4CB847;
}

.cost_table th{
    padding: 7px;
    background: #4CB847;
    color: white;
    font-weight: bold;
    font-size: 1.083em;
    text-shadow: 1px 1px 1px #000000;
}

.cost_table tr.big_header{
    height: 50px;
}

.cost_table td{
    padding: 10px;
    font-size: 1.083em;
    border-right: 1px solid #4CB847;
}

#cost_comparison{
    position: relative;
}

#cost_comparison #versus.icon{
    background: url(../images/icon_versus.png) no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 170px;
    left: 545px;
    z-index: 100;
}

#cios_packages td.description_column{
    width: 550px;
}

#cios_subscription h1, #cios_without h1{
    margin: 0;
    font-size: 	1.667em;
    padding: 10px 0 10px 20px;
}

#cios_without{
    width: 570px;
    height: 400px;
    float: left;
    margin-right: 10px;
}

#cios_without h1{
    background: url(../images/icon_smiley_sad.png) 90px 50% no-repeat; 
}

#cios_subscription{
    width: 320px; 
    height: 400px;
    float: left;
}   

#cios_subscription h1{
    background: url(../images/icon_smiley_happy.png) 5px 50% no-repeat; 
}

#cios_subscription td{
    width: 160px;
}

#cios_subscription tr.total_cost{
    background: #0067B3;
    color: white;
}

#cios_subscription td.image_container{
    height: 190px;
    padding: 0; 
    margin: 0;
}

#cios_subscription td.image_container img{
    position: relative;
    top: 3px;
}

#screenshots_page{
    height: 650px; /* set the height of the container so that the page won't */
                   /* 'blink' when pagination is clicked */
}

#screenshots_page div.section{
    margin-bottom: 50px;
}

#screenshots_page .shot_wrapper{
    width: 200px;
    text-align: center;
    float: left;
    margin-right: 50px;
}

#screenshots_page .shot_wrapper.last{
    margin-right: 0;
}

#screenshots_page .shot_wrapper img{
    border: 1px solid #CCCCCC;
    -moz-box-shadow: 0px 0px 10px #CCCCCC;  
    -webkit-box-shadow: 0px 0px 10px #CCCCCC;    
}

#screenshots_page .page{
    display: none;
}

#screenshots_page .active{
    display: block !important;
}

.pagination{
    text-align: center; 
    margin-bottom: 60px;   
}

.pagination a{
    padding: 4px 6px;
    background: #9ED0FC;
    font-weight: bold;
    border: 1px solid #51ABF9;
    -moz-box-shadow: 3px 3px 10px #CCCCCC;   
    -webkit-box-shadow: 0px 0px 10px #CCCCCC;   
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-right: 1px;
    margin-left: 1px;
    
}

.pagination a:hover{
    background: #98D773;
    color: white !important;
}

.pagination a.pagination-active{
    color: white;
    background: #98D773;
}

.pagination a.pagination-inactive{
    color: #CDE7FD;
}

.pagination li{
    display: inline;    
}

#footer_section{
    margin-top: 20px;
}

#footer_section p{
    text-align: center;
}

.divider{
    background: url(../images/footer_border.jpg) no-repeat;
    width: 684px;
    height: 29px;
    margin-left: auto;
    margin-right: auto;
}

.color_blue{
    color: #01559D;
}

.apply_margin_bottom{
    margin-bottom: 40px;
}

.uppercase{
    text-transform: uppercase;
}

.align_center{
    text-align: center;
}   

.bold{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

.clear{
    clear: both;
}

/* ------------------- */
/* CSS: Features page  */
/* ------------------- */

.features_intro{
    text-align: justify;
    margin-bottom: 40px;
}

.module_container{
    margin-bottom: 30px;
}

.module_container .icon{
    width: 136px;
    height: 45px;
    display: block;
    border: 1px solid #CCCCCC;
    -moz-box-shadow: 0px 0px 10px #CCCCCC;
    -webkit-box-shadow: 0px 0px 10px #CCCCCC;  
    float: left;
}

.module_container .description{
    width: 700px;
    float: left;
    padding-left: 20px;
}

.module_container .description p{
    margin: 0;
}

.module_container#not{
    height: 150px;
}

#profile .icon{ background: url("../images/features/profile.jpg") 50% 50% no-repeat; }
#eleave .icon{ background: url("../images/features/eleave.jpg") 50% 50% no-repeat; }
#emedical .icon{ background: url("../images/features/emedical.jpg") 50% 50% no-repeat;}
#payroll .icon{ background: url("../images/features/payroll.jpg") 50% 50% no-repeat;}
#training .icon{ background: url("../images/features/training.jpg") 50% 50% no-repeat; }
#calendaring .icon{ background: url("../images/features/calendaring.jpg") 50% 50% no-repeat; }
#performance .icon{ background: url("../images/features/performance.jpg") 50% 50% no-repeat; }
#claims .icon{ background: url("../images/features/claims.jpg") 50% 50% no-repeat; }
#fixed .icon{ background: url("../images/features/fixed.jpg") 50% 50% no-repeat; }
#serial .icon{ background: url("../images/features/serial.jpg") 50% 50% no-repeat; }
#memo .icon{ background: url("../images/features/memo.jpg") 50% 50% no-repeat; }
#resource .icon{ background: url("../images/features/resource.jpg") 50% 50% no-repeat; }
#not .icon{ background: url("../images/features/not.jpg") 50% 50% no-repeat; }
#availability .icon{ background: url("../images/features/availability.jpg") 50% 50% no-repeat; }
#network .icon{ background: url("../images/features/network.jpg") 50% 50% no-repeat; }  
#time-attendance .icon{ background: url("../images/features/time-attendance.jpg") 50% 50% no-repeat; }  

/* Contact Form [START] */

#contactform_container{
    padding: 10px; 
    width: 700px; 
    position: relative;
    float: left;
}

#contactform_container #textarea{
    float: left; 
    margin-left: 5px;
}

#contactform{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 350px;
    float: left;
}       

#contactform li{
    padding-bottom: 10px;
}

#contactform label{
    display: block;
    width: 60px;
    float: left;
}

#textarea textarea, #contactform input[type="text"]{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#textarea textarea:hover, #contactform input[type="text"]:hover,
#textarea textarea:focus, #contactform input[type="text"]:focus{
    border: 1px solid #5DC224;
}

#cnt_subject, #cnt_name, #cnt_phone, #cnt_email, textarea{
    width: 280px;
    padding: 3px;
    height: 30px;
    border: 1px solid #CCCCCC;
    -moz-box-shadow: 0px 0px 7px #CCCCCC;
    -webkit-box-shadow: 0px 0px 7px #CCCCCC;
}

#cnt_captcha{
    width: 100px;
    float: left;
    padding: 3px;
    border: 1px solid #CCCCCC;
    margin-left: 10px;
    height: 30px;
    -moz-box-shadow: 0px 0px 7px #CCCCCC;
    -webkit-box-shadow: 0px 0px 7px #CCCCCC;
}

#cnt_message{
    width: 300px;
    height: 205px;
    margin-left: 5px;
}

#cnt_send{
    font-weight: bold;
    padding: 5px;
    margin-top: 10px;
    float: right;
}

.captcha_note{
    width: 100px;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    text-align: justify;
    font-size: 11px;
}

#captcha_image{
    float: left;
    border: 1px solid #CCCCCC;
    -moz-box-shadow: 0px 0px 7px #CCCCCC;
    -webkit-box-shadow: 0px 0px 7px #CCCCCC;
}

.message_warning{
    position: absolute; 
    background: #75CB43; 
    padding: 5px; 
    /* border:2px solid #BC0606; */
    color: white;
    display: none;
    -moz-box-shadow: 0 0 10px #999999;
    -webkit-box-shadow: 0 0 10px #999999;
}

.warn_name{
    top: 40px; 
    left: 350px;
}

.warn_email{
    top: 135px; 
    left: 350px; 
}

.warn_email_syntax{
    top: 175px; 
    left: 350px; 
}

.warn_captcha{
    top: 230px; 
    left: 290px;  
}

.warn_captcha_incorrect{
    top: 270px; 
    left: 370px;
}

.warn_captcha_incorrect .bold{
    font-weight: bold;
}

.warn_captcha_incorrect .refresh{
    margin-top: 10px;
    text-align: center;
}

.warn_message{
    top: 0px; 
    right: 20px;
}

.success_message, .failure_message{
    font-weight: bold;
    margin-bottom: 20px;  
}

.success_message{
    color: #62AD4F;
}

.failure_message{
    color: #DB5147;    
}

#address_container{
    float: left;
    width: 200px;
    padding: 0 10px; 
}

#address_container div{
    margin-bottom: 10px;
}

#address_container .title{
    font-weight: bold;
    font-size: 13px;   
    text-transform: uppercase; 
    color: #0182C4;
}

#address_container label{
    font-weight: bold;
    font-size: 13px;   
    color: #4CB847;
}

#address_container label.hidden{
    visibility: hidden;
}         

/* [END] */

#w3c_emblem_container{
    /* width: 159px; */ /* disabled coz CSS is not valid due to the use of '-moz' and 'webkit' */
    width: 80px;
    margin-left: auto;
    margin-right: auto;
}    

.w3c_emblem{
    color: white;
    font-size: 0.75em;
    float: left;
    margin-left: 5px;
    margin-right: 2px;
    cursor: pointer;
    -moz-box-shadow: 0px 0px 6px #999999;
    -webkit-box-shadow: 0px 0px 6px #999999; 
}

.w3c_emblem a{
    color: white !important;
}

.w3c_emblem .w3c, .w3c_emblem .xhtml, .w3c_emblem .css{
    float: left;
}

.w3c_emblem .w3c{
    background: #ABABAB;
    width: 25px;
    padding-left: 3px;
}

.w3c_emblem .w3c.active{
    background: #75CB43;
}

.w3c_emblem .xhtml{
    background: #BCBCBC;
    width: 38px;
    padding-left: 3px;
}

.w3c_emblem .xhtml.active{
    background: #0182C4;
}

.w3c_emblem .css{
    background: #BCBCBC;
    width: 24px;
    padding-left: 3px;
}

.w3c_emblem .css.active{
    background: #0182C4;
}

/* Added 19 June 2013 by RAT@DH */
#cloud_article_teaser{
    font-size: 15px;
    margin: 30px 0;
}
    #cloud_article_teaser h1{
        width: 390px;
        line-height: 30px; 
        float: left;
        vertical-align: top;
        margin: 0;
        margin-right: 10px;
    }
    #cloud_article_teaser p.brief{
        float: left;
        font-size: 16px;
        line-height: 22px;
        margin: 0;
        text-align: justify;
        vertical-align: top;
        width: 480px;
    }
    #cloud_article_teaser .quote-symbol{
        float: left;
        vertical-align: top;  
        font-weight: bold;
        font-size: 120px; 
        padding-top: 30px;
        padding-right: 7px;
    }
    #cloud_article_teaser p.read_more{
        text-align: right;
    }
    #cloud_article_teaser p.read_more a{
        color: #D14545; 
        font-size: 12px;
    }
#cloud_article .emphasize{
    color: #2176B7;    
}