/* 3.7 DESIGNS BOILER PLATE =====================================
Company: 3.7 Designs
Project:
Author:
Comments:


= COLOR REFERENCE GUIDE =

FONT COLOR: #000000
HEADING COLOR: #333333
SECONDARY HEADING: #666666
BACKGROUND COLOR: #FFFFFF
SECONDARY BACKGROUND COLOR: #EFEFEF
HIGHTLIGHT COLOR: #990000 
LINK COLOR: #990000

================================================================*/



/*===============================================================

	G L O B A L     V A R I A B L E S

============================================== =GLOBAL VARIABLES */

html, body { 
font-family: Arial, Helvetica, sans-serif; font-size: 100%;
line-height: 1.5em; background: url(../images/background.gif) top center no-repeat #ffffff; }

#pagewidth {
width: 958px; margin: 0 auto 0 auto; }


/*===============================================================

	N A V I G A T I O N 
	
=================================================== =NAVIGATION */

#main_nav { list-style: none; margin: 0; padding: 0; width: 222px; float: left; margin-right: 10px; height: 155px; background: #df7a1c;}
#sub_nav {  padding: 10px 0 0 0; font-size: 11px; font-weight: bold; }
#sub_nav a { font-weight: 100; }
.title { font-size: 13px; }


a { color: #ffffff; }
a:hover { text-decoration: none; }



#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; width: 222px; } 

#home { background: url(../images/nav/home.gif); height: 27px; }
#home:hover { background: url(../images/nav/home.gif) -222px; }
#home.active { background: url(../images/nav/home.gif) -222px; }

#locations { background: url(../images/nav/locations.gif); height: 22px; }
#locations:hover { background: url(../images/nav/locations.gif) -222px; }
#locations.active { background: url(../images/nav/locations.gif) -222px; }

#company { background: url(../images/nav/company.gif); height: 21px; }
#company:hover { background: url(../images/nav/company.gif) -222px; }
#company.active { background: url(../images/nav/company.gif) -222px; }

#services { background: url(../images/nav/services.gif); height: 21px; }
#services:hover { background: url(../images/nav/services.gif) -222px; }
#services.active { background: url(../images/nav/services.gif) -222px; }

#projects { background: url(../images/nav/projects.gif); height: 21px; }
#projects:hover { background: url(../images/nav/projects.gif) -222px; }
#projects.active { background: url(../images/nav/projects.gif) -222px; }

#portfolio { background: url(../images/nav/portfolio.gif); height: 22px; }
#portfolio:hover { background: url(../images/nav/portfolio.gif) -222px; }
#portfolio.active { background: url(../images/nav/portfolio.gif) -222px; }

#contact { background: url(../images/nav/contact.gif); height: 21px; }
#contact:hover { background: url(../images/nav/contact.gif) -222px; }
#contact.active { background: url(../images/nav/contact.gif) -222px; }

/*
#button1 { background: url(../images/button1.jpg); width: 0px; }
#button1:hover { background: url(../images/button1.jpg) -0px 0; }
#button.active { background: url(../images/button1.jpg) -0px 0; }
*/

/*===============================================================

	T Y P O G R A P H Y
	
==================================================== =TYPOGRAPHY */

h1, h2, h3, h4, h5, p { margin: 15px 0 15px 0; }
h1 { margin-top: 0; }

/*===============================================================

	L I N K      S Y L E I N G
	
=================================================== =LINK STYLING */

a { }
a:hover { }
a:visited { }
a:active { }

/*===============================================================

	C O N T E N T     S T R U C T U R E
	
============================================== =CONTENT STRUCTURE */

#header { }
#header h2 { text-indent: -999999px; overflow: hidden; background: url(../images/header.gif); height: 71px; margin: 0; }

#content { margin: 15px 2px 2px 2px; color: #FFFFFF; height: 460px;}



#footer { clear:both; text-align: right; font-size: 11px; }
#footer a { color: #aaaaaa; } 

#right_col { padding: 10px; background: #754200; font-size: 12px; line-height: 1.65em; height: 440px; overflow: hidden; width: 478px; float: right; }

#left_col { width: 456px; float: left; background: #754200; font-size: 12px; line-height: 1.65em; }

#left_inner {  }

#bottom_left { width: 456px; height: 305px; overflow: hidden; position: absolute; background: #754200; }
#bottom_left2 { width: 222px; height: 305px; overflow: hidden; float: left; background: #754200; }

#nav_col { width: 204px; float: left; height: 430px; background: #975518; padding: 15px; }

.section { height: 455px; }

#nav_area { height: 155px; overflow: hidden; background: #b06016; }

.port_nav { width: 222px; float: left;  height: 460px !important ;}
.ligherbg { background: url(../images/sidephotos/church.jpg) bottom left #b06017 !important; }


.halfcol_left { float: left; width: 49%; }
.halfcol_right { float: right; width: 49%; }

h4 { text-transform: uppercase; font-weight: bold; letter-spacing: .075em; margin-top: -10px; }


/*===============================================================

	H E L P E R    C L A S S E S
	
============================================== =HELPER CLASSES */

.fr { float: right; }
.fl { float: left; }
.imgfl { float: left; margin-right: 9px; }

.fr15 { float: right; margin: 0 0 0 15px; }
.fl15 { float: left; margin: 0 15px 0 0; }

.listnomargin { margin: 0; padding: 0 0 0 15px; }

.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }
.taj { text-align: justify; }

.nomargin { margin: 0; }
.m10 { margin: 10px; }
.m15 { margin: 15px; }
.m20 { margin: 20px; }
.m25 { margin: 25px; }
.m30 { margin: 30px; }

.clear { clear: both; }
.cleft { clear: left; }
.cright { clear: right; }
 
/*===============================================================

	A C C E S S I B I L I T Y
	
======================================= =ACCESSIBILITY CLASSES */

#skip_links { position: absolute; margin-top: -100px; }

/* ==============================================================

	P H O T O S E C T I O N S

=============================================================== */

#homepage #content { background: url(../images/sidephotos/home.jpg) right top no-repeat; }

.proj_woodward { background: url(../images/sidephotos/proj_woodward.jpg) left top no-repeat !important; }
.proj_bagley { background: url(../images/sidephotos/bagley-fountain.jpg) right bottom no-repeat !important; }
.proj_term { background: url(../images/sidephotos/term-tower.jpg) right bottom no-repeat !important; }
.proj_detroit { background: url(../images/sidephotos/proj_detroit.jpg) right bottom no-repeat !important; }
.proj_browns { background: url(../images/sidephotos/proj_brown.jpg) right bottom no-repeat !important; }
.proj_mart { background: url(../images/sidephotos/campus_martius.jpg) right bottom no-repeat !important; }
.proj_grun { background: url(../images/sidephotos/grun_cash.jpg) right bottom no-repeat !important; }

.emp p { width: 45%; float: left; margin: 5px 3% 5px 0; line-height: 13px;}
.emp p span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }


.twocol { width: 47%; margin-right: 2%; float: left; list-style: none; padding-left: 0px; font-size: 10px;}

strong { font-weight: bold; }

#contact_form { width: 300px; }
#contact_form li { padding: 3px 0 3px 0; clear: both; }
#contact_form label { float: left; }
#contact_form input { float: right; }

/* ====== PORTFOLIO SECTION ======= */

.port_row { font-size: 11px; line-height: 14px; }
.port_list { line-height: 14px; }
.port_list ul { padding: 1px 0px 6px 9px; }

.port_list li ul { display: none; }
.port_visible { display: block !important; }

.port_list li { font-weight: bold; text-transform: uppercase; font-size: 11px; }
.port_list ul li { font-weight: 100; text-transform: none; letter-spacing: normal; }

.imgoutline img { border: 1px solid #fff; padding: 1px; }

.click_paragraph { margin-top: -15px; color: #dba865; font-size: 10px; }