/* 

20|20 Integrated Solutions
Matthew James - www.designbyok.com

*/


body {
margin: 0;
padding: 0;
width: 100%;
font: normal 80%/130% "Lucida Grande", Lucida, Verdana, sans-serif;
background: #343434  url(../i/bg.jpg) center top no-repeat;
color: #222;
}
    
#wrapper {
position: relative;
margin: 0 auto;
width: 989px;
text-align:left;
background: #fff url(../i/wrapper_bg.png) top center no-repeat; 
border: 0;
}

#date {
font-size: 80%;
color: #b3b3b3;
text-transform: uppercase;
margin: 0 0 0 10px;
padding-top: 10px;
}


/* banner */


#banner_inner {
height: 20px;
background: transparent;
float: left;
width: 960px;
margin: 0 0 50px 0;
border: 0px dotted red;
}



/* column container */
.colmask {
position: relative;
/*clear: both;*/
float: left;
width: 100%;
overflow: hidden;
border: 1px solid black;
}


/* common column settings */
.colright,.colmid,.colleft {
float: left;
width: 100%; /* width of page */
position: relative;
}
	
	
.main_column,.left_column,.right_column {
float: left;
position: relative;
padding: 0;	
margin-bottom: 50px;
overflow: hidden;
}

/* 3 column settings */
.threecol {
border: 0px solid black;
}

.threecol .colmid {
right: 195px;			
background: transparent;
margin-top: 0px;
}

.threecol .colleft {
right: 565px;
background: transparent;
}

.threecol .main_column {
width: 470px;
left: 1015px;		
padding: 0 0 30px 0;
border: 0px solid white;
}

.threecol .left_column {
width: 225px;
left: 290px;
margin-left: 10px;
background: transparent;
border: 0px solid white;
}

.threecol .right_column {
width: 225px;
left: 800px;
background: transparent;
border: 0px solid white;
}



/* 2 column settings */
#twocol_main {
font-size: 95%;
background: transparent;
float: left;
width: 620px;
padding: 0 0 50px 0;
margin: 0 0 20px 0;
border: 0px solid #ddd;
}

#twocol_side {
background: transparent;
float: left;
width: 270px;
margin: 0 30px 20px 20px;
padding: 0;
}





/* main navigation */

ul#mainnav {
float:left;
margin: 55px 0 0 10px;
padding: 0;
font-weight: normal;
font-size: 95%;
border: 0px solid green;
}

ul#mainnav li {
display:inline;
margin-right:13px;
margin-left:0;
padding-bottom:5px;
padding-left:0;
}

ul#mainnav li a:link, ul#mainnav li a:visited {
color: #fff;
text-decoration: none;
}

ul#mainnav li a:hover {
color: #fdbb30;
text-decoration: none;
border-bottom: 1px solid #fdbb30;
padding-bottom: 3px;
}

#home a.home,
#about a.about, 
#people a.people, 
#services a.services, 
#clients a.clients, 
#resources a.resources,
#contact a.contact {
text-decoration: underline;
color: #fdbb30;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
}


/* sub navigation */

ul#subnav {
margin: 0;
padding: 5px 0;
font-size: 95%;
list-style-type: none;
}

ul#subnav li {
padding: 10px 0 10px 0;
padding-left: 0;
border-bottom: 1px solid #999;
}

ul#subnav li a:link, ul#subnav li a:visited {
color: #444;
text-decoration: none;
}

ul#subnav li a:hover {
color: #222;
text-decoration: underline;
}

img.subnav_arrow {
margin: 0 8px 0 0;
float: left;
width: 22px;
height: 22px;
}




/* footer */
#footer {
clear: both;
background: transparent url(../i/footer_bg.png) top center no-repeat; 
margin-top: 50px;
padding: 8px 30px 20px 30px;
font-size: 80%;
}

#footer a:link, #footer a:hover, #footer a:visited {
font-weight: normal;
}




/* contact form */

#contact-area {
width: 447px;
margin-top: 25px;
background: #fff;
padding: 10px 10px 40px 10px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 250px;
margin: 0px 0px 10px 0px;
border: 1px solid #999;
background: #fff;
color: #333;
font-family: "Lucida Grande", Lucida, Helvetica, Arial, Verdana, sans-serif;
font-size: 110%;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 1px solid #333;
background: #fff;
}

#contact-area input.submit-button {
width: 80px;
float: right;
}

label {
float: left;
text-align: left;
margin-right: 15px;
width: 170px;
padding-top: 5px;
font-weight: bold;
}



/* sidebar panels */ 



.white_panel_top {
height: 15px;
background: #fff;
/*background: transparent url(../i/panelwhite_top.png) left top repeat-x;*/
}

.white_panel {
background-color: transparent;
padding: 10px 0 10px 0;
color: #333;
margin-bottom: 15px;
background: #fff;
border: 1px solid #ddd;
/*background: transparent url(../i/panelwhite_bg.png) left bottom repeat-x;*/
}



.white_panel h1 {
text-transform: uppercase;
font-size: 100%;
color: #fff;
padding: 0;
margin:  0;
}

.white_panel p {
margin: 10px;
}

.white_panel a:link {
color: #FDBB30;
text-decoration: none;
}

.white_panel a:visited {
color: #FDBB30;
text-decoration: none;
}

.white_panel a:hover {
color: #FDBB30;
text-decoration: underline;
}





.white_panel h1 {
text-transform: uppercase;
font-size: 95%;
font-weight: bold;
color: #333;
padding: 0 0 10px 0;
margin:  0 10px;
}

.white_panel p {
margin: 10px;
}


/* homepage banner entry */

#home_entry_panels_container {
background: transparent;
float: left;
width: 990px;
margin: 20px 0 10px 0;
border: 0px dotted red;
}

.home_entry_panels {
width: 235px;
height: 175px;
padding: 0;
color: #333;
margin: 0px 12px 0 0;
float: left;
}


img.home_entry_arrow {
width: 87px;
height: 26px;
padding: 0 0 0 20px;
color: #333;
margin: 0;
border: 0;
}

.home_entry_panels ul {
list-style: none;
list-style-position: outside;
font-size: 11px
color: #FDBB30;
width: 200px;
margin: 0;
padding: 60px 0 10px 35px;
font-size: 90%;
}

.home_entry_panels  li {
list-style-type: disc;}


.home_entry_panels ul a:link, .home_entry_panels ul a:visited {
color: #333;
text-decoration: underline;
}

.home_entry_panels ul a:hover {
color: #666;
text-decoration: underline;
}



/* inner page banner */

.inner_banner_links {
width: 235px;
height: 80px;
padding: 0;
margin: 30px 3px 0 0px;
border: 0;
float: left;
}




/* homepage features */

.left_feature {
width: 225px;
float: left;
padding: 0;
margin: 20px 0;
}
.right_feature {
width: 225px;
float: right;
padding: 0;
margin: 20px 0;
}


/* news items */

.home_news_item {
padding: 5px;
margin-bottom: 10px;
font-size: 90%;
border-bottom: 1px solid #ddd;
}

.home_news_item_date {
text-transform: uppercase;
font-weight: normal;
background: #efefef;
padding: 0 0 0 3px;
width: 120px;
margin: 0 0 10px 0;
font-size: 90%;
color: #000;
}

.newspage_date {
text-transform: uppercase;
font-weight: normal;
background: #efefef;
padding: 0 0 0 3px;
width: 120px;
margin: 20px 0 10px 0;
font-size: 90%;
color: #000;
}

.home_news_item_link {
font-size: 110%;
}



/* arrow links */

.arrowlink_dark {
background: url(../i/yellowarrow_darkbg.png) center left no-repeat;
color: #FDBB30;
}

.arrowlink_light {
background: url(../i/yellowarrow_lightbg.png) center left no-repeat;
}

.arrowlink_light, .arrowlink_dark {
font-size: 110%;
height: 25px;
padding: 5px 0 0 30px;
}

.white_panel .arrowlink_light,
.white_panel .arrowlink_dark {
margin-left: 10px;
 }






.smallprint {
font-size: 90%;
color: #666;
}

.smallprint p, .smallprint ol {
margin-top: 0;
margin-bottom: 0;
}



a:link {
color: #333;
text-decoration: underline;
}
	
a:hover {
color: #666;
text-decoration: underline;
}

a:visited {
color: #666;
text-decoration: underline;
}


p {
margin: 0 0 10px 0;
line-height: 150%;
}

p.sidebar {
margin: 5px 0 20px 0;
font-size: 90%;
line-height: 140%;
}

#twocol_main ul {
margin: 5px 0 20px 0;
list-style-type: disc;
padding-left:20px;
}

#twocol_main li {
margin: 5px 0;
}


h1 {
color: #423D30;
font-size: 170%;
font-weight: normal;
margin: 0 0 15px 0;
}

h2 {
color: #423D30;
font-size: 140%;
font-weight: bold;
margin: 30px 0 5px 0;
}

h2.news {
color: #423D30;
font-size: 140%;
font-weight: bold;
margin: 0px 0 5px 0;
}

h3 {
color: #423D30;
font-size: 110%;
font-weight: bold;
margin: 20px 0 5px 0;
}

h2.sidebar {
color: #fff;
font-size: 90%;
font-weight: bold;
background: transparent url(../i/h2sidebar_bg.png) left top repeat-x;
text-transform: uppercase;
padding: 3px 5px;
margin: 0 0 0 0;
}

.largetxt {
font-size: 125%;
line-height: 160%;
}

img.filetypeicon {
padding: 0;
margin: 3px 8px -2px 0;
width: 14px;
height: 14px;
}

.about_table {
width: 630px;
background: #f2f2f2;
padding: 10px;
margin: 10px 0 0 0;
}

.about_table td {
border-top: 1px dotted #423D30;
padding: 10px 0;
vertical-align: top;
}


.floatleft {
float: left;
margin: 0 20px 10px 0;
border: 5px solid #fff;
}

.floatright {
float: right;
margin: 0 0 10px 20px;
border: 5px solid #fff;
}



ul.projects {
padding: 0;
border-top: 2px solid #666;
margin: 10px 0 20px 0;
}

ul.projects li {
list-style-type: none;
list-style-position: inside;
padding: 7px 0 9px 0;
border-bottom: 1px solid #999;
margin: 0px;
}