/*//////////////////////////////////////////////////////////////////////////////
                                                                           
     General page styles                                                   
                                                                          
//////////////////////////////////////////////////////////////////////////////*/

* {
    margin: 0px;
    padding: 0px;
    outline: none;
}
html {
    height: 96%;
    padding:1%;
}

body {
    height:100%;
    color: #222;
    margin: 0;
    padding: 0;
    font-family: Arial, verdana, sans-serif;
    font-size: 0.8em;
    border:0 none;
    background:url("../images/bg_body.png") repeat scroll 0 0 #D7D7D7;
}
a {
    color: #266B99;
    text-decoration: none;
}

a:hover {
    color: #666;
}

p {
    margin: 10px 0px 10px 0px;
}

img {
    border: none;
}

div { position:relative }

h1 {
    color: #000;
    font-size: 2.5em;
    letter-spacing:-1px;
    padding:10px 0 0 10px;
    margin-bottom:5px;
}

h2 {
    font-size: 1.8em;
    color: #333;
    margin: 10px 0px 20px 0px;
    background: #EEE;
    padding: 5px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #FFF;
    border-right: 1px solid #CCC;
}

/*//////////////////////////////////////////////////////////////////////////////
                                                                             
     Layout div styles                                                        
                                                                              
     #company_info is company's name and address at the top-left of the page  
     under the header   

     #info_box appears to show a user a message when they click the save changes
     button
                                                                             
     #header is the bar at the very top of the page, containing the SYNETY    
     logo                                                                    

     #container is the container div for the sidebar and main content

     #logo is a div containing the SYNETY logo, nested within the header div

     #quick_menu, #quick_links are the links inside the header div

     #sidebar is the left-hand bar containing the navigation

     #main_panel is the div that contains the main content, to the right of
     the sidebar

     .menu_box_container, .menu_title, .menu_box are the individual boxes
     for the navigation in the sidebar

     .panel_box is the box containing each section of content, nested within
     the main panel

     .equal_width_col is used to create two columns of equal width
                                                                           
//////////////////////////////////////////////////////////////////////////////*/

.wrapper {
    margin:auto;
    height:100%;
}

#company_info {
    width: 43%;
    float: right;
    text-align: right;
    padding-right: 5%;
    overflow: auto;
    font-size: 1.5em;
    margin-top: 10px;
}

#company_info p {
    margin: 2px 0px 3px 0px;
}

#info_box {
    float: left;
    visibility: hidden;
    width: 100%;
    padding: 10px;
    font-size: 1.2em;
    margin: 5px 0px 10px 0px;
}

#container {
    position:absolute;
    width:100%;
    bottom:0;
    top:130px;
    margin:0;
}

#header {
    background:#000 url(../images/bg_mast.png) repeat-x 0 0;
    width: 100%;
    height:72px;
    margin:0;

}
#logo {
    float: left;
    margin: 20px;
}

#synety_man {
    position: absolute;
    right: 10px;
    top: 10px;
}

#quick_menu {
    font-size: .9em;
    font-weight: normal;
    float: right;
    margin: 0;
}

#quick_links {
    list-style: none;
}

#quick_links li {
    float: left;
    margin-left: 30px;
}
#quick_links li:first-child {
    margin-left: 0;
}
#quick_links li a {
    color:#666;
}
#quick_links li a:hover {
    color:#333;
}
#quick_links li img {
    float:left;	
}
#quick_links li span {
    float:left;
    display:block;
    padding:.2em 0 0 5px;
}


#sidebar {
    float: left;
    width: 180px;
    margin:0 0 0 0;
}

#main_panel {
    padding: 0;
    margin:0 0 0 200px;
    background:#FFF;
    min-height:100%;
    overflow:hidden;
}

#main_panel h1 {
    float:left;
    /*width:100%;*/
    padding:20px 0 0 20px;
}

.menu_box_container {
    margin: 0px 0px 20px 0px;
    background:#fff;
}
.menu_title.colour1 {
    background:#2ea1db;
}

.menu_box_container h2 {
    font-size:1.2em;
    border:0 none;
    cursor:pointer;
    padding:5px;
    margin:5px 0 0 0;
    background:#f2f2f2;
    font-weight:normal;
    color:#777;
}
.menu_box_container h2:hover {
    color: #444;
    background:#F2F2F2;
}

.menu_box_container h2.open_close {
    background:#fff url(../images/icon_expand.png) no-repeat center right;
}
.menu_box_container h2.open_close:hover {
    background:#F2F2F2 url(../images/icon_expand.png) no-repeat center right;
}


.menu_title {
    color: #000;
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing:-1px;
    padding: 10px;
}

.menu_title.colour1 { background:#9fd51b }
.menu_title.colour2 { background:#2ea1db }
.menu_title.colour3 { background:#f1008f }

.menu_box {
    font-size: 1.2em;
    padding: 8px; 
}

.menu_nav {
    list-style: none;
    padding:0;
    margin:0;
}


.menu_nav.expandable {
    display:none;
    margin:5px 0 0 0;
}
.menu_nav.expandable li a {
    padding:5px 5px 5px 15px;
}


.menu_nav li a {
    display:block;
    padding:5px;
    color: #777;
    font-size: 0.9em;
    text-decoration: none;
}



.menu_nav li a:hover {
    color: #444;
    background:#F2F2F2;
}

.menu_nav li.active a {
    color: #000;
    font-weight: bold;
    background:#fff;
}
.menu_nav li.active a:hover {
    cursor:default;
}
.menu_nav.expandable {
    border-bottom:3px solid #F2F2F2;
}
.menu_nav.expandable li a {
    font-size:1.1em;
}


.panel_box {
    clear:left;
    font-size: 1.2em;
    background: #FAFAFA;
    border: 1px solid #DDD;
    overflow: auto;
    /*border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;*/
}

.padding_top_bottom{
    
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.panel_box h2 {
    font-size: 1.4em;
    color: #333;
    margin: 10px 0px 10px 0px;
    background:#D8D8D8;
    border:0 none;
    padding:15px;
}

.panel_box h3 {
    color: #555;
    font-size: 1.5em;
    margin: 10px 0px 20px 0px;
}

.grey_box {
    border: 1px solid #BBB;
    padding: 5px;
    margin-bottom: 20px;
}


.white_bg {
    
        background-color:#fff !important;
}

.grey_bg {
   background: url("../images/bg_body.png") repeat scroll 0 0 #D7D7D7 !important;
}


.panel_box {
    padding:0;
    background:0 none;
    border:0 none;
    overflow-x: hidden;
}

div#myDropdown {
    margin: 0px auto !important;
}
div#myDropdown label {
    margin: 0;
    padding: 0;
    line-height: 0.8em !important;
}
div#myDropdown img {
    margin-top: 2px;
}
div#myDropdown a {
    text-decoration: none !important;
}