/* 
    Created on : Jun 17, 2014, 1:09:32 PM
    Author     : workhouse
*/

@font-face{font-family:"PS_11548";
           src:url("../fonts/PS_11548.TTF");           
}

@font-face{font-family:"GovtAgentBB_ital";
           src:url("../fonts/GovtAgentBB_ital.ttf");           
}

@font-face{font-family:"coder";
           src:url("../fonts/coder.ttf");           
}
root{
    display: block;
}

body, #menus{
    /* background-color: #53AFA4; 
    background-image: url('../images/blurr.png');
    background-repeat: no-repeat;
    background-size: cover;
    */ 
    background-color: #0A4153;
}

body{
    margin: 0px;
    font-family: Arial,Verdana,sans-serif;
    font-size: 0.8em;
    color: #6B6C6C;
}

#whole_content{
    width: 800px;
    background-color: white;
    margin: 20px auto 41px;
    padding: 15px;
    box-shadow: black 0 0 9px;
    border-radius: 2px;
}

#header_section{
    width: 100%;    
    display: inline-block;
}

#logo, #logo_placeHolder span, #menus{
    float: left;
    font-weight: bold;
}

#logo{
    width: 13%;    
}

#logo_placeHolder span, #menus{
    clear: left;
}

#extralinks_placeHolder{
    float: right;
    clear: right;
    margin-top: 18px;
    margin-right: 2px;
}

#extralinks_placeHolder a{
    text-decoration: none;
    color: rgb(124, 122, 122);
    padding: 2px 5px;
    border: rgb(255, 255, 255) thin solid;
    font-weight: bold;
}

#extralinks_placeHolder a:hover{
    background-color: rgb(11, 148, 224);
    color: white;
}

#menus {
    background-color: rgb(241, 19, 160);
    background: linear-gradient( to bottom, rgb(208, 44, 109), rgb(162, 15, 73));
    /* width: 100%; */
    box-shadow: 0px 1px 4px #000;
    /* border-radius: 0px; */
    margin-top: 10px;
    margin-bottom: 10px;
    color: #FFFFFF;
    font-family: verdana;
    font-size: 81%;
}



ul,li{
    margin:0;
    padding:0;
}

/*------------------------------------*\
        NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight: normal;
    /* Clear floats */
    float:left;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    position:relative;
    border-left: rgb(206, 189, 197) thin groove;
}
#nav a{
    display:block;
    text-decoration:none;
    text-shadow: rgb(74, 74, 74) 0 1px 2px;;
    /* text-shadow: rgb(255, 255, 255) 0 2px 2px; */
    /* border-bottom: thick rgba(123, 188, 231, 0) solid; */
    /* border-bottom: thick solid transparent; */
    /* border-bottom: thick solid transparent; */
    height: 14px;  
    color: #F2F2F2;
    font-weight: bold;
    width: 132px;  
    text-align: center;  padding: 14px 0px 12px;
}
#nav a:hover{
    background: #FBFBFB;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    /* background:rgba(255,255,255,0); */ /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    /* border: thin solid black; */
    /* box-shadow: black 0 0 2px; */
    border-radius: 0 0 5px 5px;
    z-index: 20;
}

#nav li ul{
    border: thin solid grey;
    border-radius: 0;
    min-width: 158px;
}

#nav ul li{
    padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */

    background: #115C74;
    color: white; }
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
    background: white; 
    color: black;
    text-shadow: none;
    font-size: 95%;
    font-weight: normal;
    padding: 10px;
    /* min-width: 200px; */
    text-align: left;
    width: auto;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background: rgba(172, 42, 77, 1);   
    color: white; 
}

.divider{
    padding: 14px 0px 10px;
    font-weight: bold;
    text-shadow: rgb(37, 37, 37) -1px 0 0px;
}

/*------------------------------------*\
        TYPE
\*------------------------------------*/

div#BannerPocket {
    height: 275px;
}

h1{
    font-family:Calibri, Arial, Verdana, sans-serif;
    font-size:2em;
    width:520px;
}

#main_content{
    width: 100%;
}



.sub_menus_color{
    background-color: rgb(255, 255, 255);
    border-color: rgb(135, 135, 135);
}


#sub_menus{
    width: 100%;
    height: 31px;
    background-color: white;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-bottom: 2px;
}

#sub_menus div{
    border-radius: 5px 5px 0 0;
    border-width: 2px;
    border-style: solid;
    margin-left: 20px;
    float: left;
    padding: 9px 12px 6px;
    font-weight: bold;
    color: rgb(81, 79, 79);
    /* text-shadow: rgb(80, 77, 77) 0px 1px 0px; */
    border-bottom: none;
    height: 16px;
}

#sub_menus .unselected_sub_menus {
    background-color: rgb(135, 135, 135);
    /* background: linear-gradient( to bottom, rgb(158, 155, 156), rgb(125, 125, 125)); */
}

#sub_menus a{
    text-decoration: none;
    padding: 5px 6px;
}

.sub_menus_color a{
    color: rgb(96, 95, 95);
}

.sub_menus_color.unselected_sub_menus a{
    color: white;
}

#pageHeader div:first-child{
    color: rgb(212, 22, 126);
    font-size: 1.2em;
}

#pageHeader{
    float: left;
    width: 267px;
    padding: 0px 26px 0;
    background: url('../images/pagecurl.png') no-repeat scroll 260px 204px #FFF;
    height: 260px;
    border: thin solid rgb(207, 207, 207);
    margin-left: -3px;
    box-shadow: rgb(237, 237, 237) -1px -1px 2px;
    margin-top: 0px;
    /* text-shadow: rgba(16, 16, 16, 0.89) 0px 1px 1px; */
}

#pageHeader h3{
    /* font-family: PS_11548; */
    font-size: 2em;
    margin-bottom: 0px;
    margin-top: 0px;
    font-weight: normal;
}

#pageHeader h1{
    width: 100%;
    font-size: 124%;
    margin-top: 14px;
    font-weight: normal;
    text-shadow: none;
}

#pageHeader span {
    color: rgb(66, 97, 136);
}

span {}

#main_content #sub_menus h3 {
    margin-top: 5px;
    float: right;
    margin-right: 20px;
}

#main_content #main_content_body {
    float: left;
    width: 72%;
    /* margin-top: 19px; */
    border-right: 1px solid rgb(127, 127, 127);
    background-color: white;
    padding-bottom: 20px;
    border-right-color: rgb(229, 229, 229);
    height: 100%;
    min-height: 380px;
}

#main_content #rightbar {
    float: right;
    width: 25%;
    padding: 10px;
    height: 100%;
    border-left: thin solid black;
    border-left: none;
    background-color: rgb(246, 246, 246);
}

.products {
    float: left;
    width: 45%;
    /* height: 162px; */
    /* background-color: black; */
    margin-left: 15px;
    /* margin-bottom: 0px; */
    margin-top: 20px;
    border: rgb(255, 255, 255) 3px solid;
    box-shadow: gray 0px 0px 3px;
}

.product_title {
    float: left;
    /* font-family: GovtAgentBB_ital; */
    color: rgb(255, 255, 255);
    padding-top: 10px;
    height: 1px;
    position: absolute;
    text-shadow: rgb(0, 0, 0) 0 1px 1px;
}

.product_title span{
    padding-left: 10px;
    position: absolute;
}

.products img{
    width: 100%;
    float: left;
}

#main_content_body #quo {
    color: rgb(25, 25, 26);
    font-size: 72%;
    /* background-color: rgb(252, 252, 161); */
    background-color: rgb(247, 241, 201);
    /* background: linear-gradient( to bottom, rgb(253, 252, 76), rgb(240, 236, 52)); */
    /* text-shadow: rgb(228, 228, 228) 0 1px 0px; */
    padding: 5px 26px;
    /* margin-top: 24px; */
    font-family: verdana;
    /* box-shadow: rgb(56, 56, 56) 0px 3px 2px; */
    border-bottom: thin solid rgb(210, 210, 210);
}

#content{
    /* min-height: 540px; */

    border: thin solid rgb(207, 207, 207);
    margin-top: 20px;
    background-color: rgb(246, 246, 246);
}

.triangle {
    position: absolute;
    border-left: rgba(94, 93, 96, 0.65) solid 116px;
    border-bottom: transparent solid 79px;
}

#note1{    
    margin-bottom: 199px;
}

#note2 {
    font-family: verdana;
    font-size: 108%;
    font-weight: bold;
    text-align: center;
    color: rgb(49, 49, 49);
    box-shadow: gray 0 0 5px;
    padding: 28px 10px;
    margin-left: 1px;
    float: left;
    clear: both;
    margin-top: 5px;
    background-color: rgb(250, 250, 250);
}

#rightbar{

}

#rightbar a, .button {
    text-decoration: none;
    color: white;
    background-color: rgb(121, 185, 255);
    background: linear-gradient( to bottom, rgb(109, 167, 255), rgb(5, 114, 187));
    padding: 8px 25px;
    box-shadow: rgb(37, 37, 37) 0 1px 1px;
    /* font-family: GovtAgentBB_ital; */
    border: thin solid rgb(11, 69, 147);
    text-shadow: rgb(3, 3, 3) 0 1px 2px;
    font-size: 88%;
    text-align: center;
}

#rightbar a:hover, .button:hover {
    background: linear-gradient( to bottom, rgb(9, 103, 232), rgb(14, 64, 119));
    border-color: rgb(50, 50, 50);
}

.tagline{
    float: left;
    clear: both;
    background-color: rgb(147, 148, 149);
    font-size: 107%;
    padding: 30px 15px 25px;
    font-family: verdana;
    color: rgb(252, 252, 252);
    text-align: center;
    margin-top: 12px;
}

#bottom_links{
    /* border-top: #D0D0D0 1px solid; */
    border: #D0D0D0 1px solid;
    float: left;
    margin: 6px 0 0;
    padding: 15px 20px;
    width: 94.7%;
    background: linear-gradient( to bottom, rgb(245, 245, 245), rgb(222, 222, 222));
    color: rgb(62, 62, 62);
}

#bottom_links a{
    text-decoration: none;
    color: #3F3F3F;
    padding: 8px;
    /* font-family: GovtAgentBB_ital; */
    font-size: 104%;
}

#bottom_links a:hover {
    color: rgb(23, 123, 172);
    text-decoration: underline;
}

#footer{
    text-align: center;
    margin: 10px auto 0;
    /* height: 20px; */
    font-size: 0.9em;
    font-size: 85%;
    float: left;
    width: 100%;
    color: rgb(139, 139, 139);
}

.topMenu{
    /* border-bottom: 3px solid white; */ 
}

.selectedTopMenu{
    border-bottom-color: rgb(253, 237, 5);
}

#form_enclosure{
    width: 400px;

    border-radius: 5px;
    border: 4px solid rgb(68, 133, 195);
    box-shadow: rgb(81, 81, 81) 0 0 10px;
    padding: 20px;
    margin: 25px auto;
    background-color: rgb(56, 140, 220);
    color: white;
}

.field_element {
    margin-top: 10px;

    /* border: thin solid beige; */
    width: 198px;
    min-height: 43px;
    float: left;
}

.label_element {

}

.input_element {

}
.float_Stabilizer{
    clear: both;

}
input {
    width: 193px;
    border: thin solid rgb(112, 113, 114);
    height: 23px;
    border-radius: 3px;
}

.row {
    margin: 20px;

    color: black;
    /* font-size: 108%; */
    font-family: tahoma;
}

.topic {
    float: left;

    font-weight: bold;
    width: 132px;
    margin-right: 10px;
}

.description {
    float: left;

    width: 390px;
}

.hidden {
    display: none;
}

.columnHeader {
    font-weight: bold;
    color: white;
    background-color: rgb(16, 120, 195);    
    padding: 10px 20px;
    margin-top: 10px;
}

.tabspace {
    margin-left: 40px;

}

.todo {
    color: rgb(0, 81, 255);

    font-size: 9pt;
}

table{
    width: 100%;
    border: thin solid rgb(199, 199, 199);
    border-collapse: collapse;
    text-align: center;
}

tr:nth-child(even){
    background-color: rgb(247, 241, 201);
}

th{
    border: thin solid gray;    
    background-color: rgb(56, 140, 220);
    color: white;
    padding: 10px 5px;
}

td{
    border: thin solid gray;    
    padding: 5px 5px;
}

.inputError{
    border: thin red solid;
}

.dialogs{
    border: 4px solid rgb(42, 113, 180);
    width: 321px;
    padding: 20px;
    margin: 110px auto;
    text-align: center;
    border-radius: 5px;
    box-shadow: rgb(100, 100, 100) 0px 4px 8px;
    background-color: rgb(56, 140, 220);
    color: white;
    font-weight: bold;
}

.relative {
    position: relative;
}

div#div__header {
    display: none;
}
div#productCatalog {
    border: thin solid lightgray;
    padding: 5px;
}