/**********************************************************************************************

	Title: Main CSS
	Author: Definitive Design Studio
	Date: February 24, 2009 

***********************************************************************************************

	1. Global Reset
	
	2. General Elements
	
	3. Layout
		3.1 Header
		3.2 Content
			3.2.1 Index
			3.2.2 Portfolio
			3.2.3 Services
			3.2.4 Contact Us
			3.2.5 About Us
		3.3 Footer

***********************************************************************************************/


/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
* { 
	margin:0; 	
	padding:0;
}

.clear {
	clear: both;
}

/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

body {
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	line-height: 2em;
	background: #5f5f5f;
}

img {
	border: 0;
	padding: 0;
	margin: 0;
	display: block;
}

h1 {
	font-family: Futura, Geneva, Arial, Helvetica, sans-serif;
	font-size: 2.0em;
	margin: 10px 0;
	color: #333;
}

h2 {
	padding: 1em 0;
	font-family: Futura, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	color: #333;
}

p {
	font-family: Futura, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #333;
}

a {
	color: #eee;
	font-family: Futura, Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-decoration: none;
}

li {
	margin: 0 0 0 75px;
	padding: 0;
}

td {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #333;
}	

form {
	width: 600px;
	margin: 0 auto;
}

span {
	color: #333;
}

.center {
	margin: 0 auto;
	display: block;
}

/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

#container {
	margin: 0 auto;
	padding: 0;
	width: 1050px;
	height: auto;
	text-align: justify;
}

.bar {
	background: url(../images/bar.png);
	width: 1050px;
	height: 5px;
}
/* 3.1 HEADER
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#header {
	margin: 25px auto 0 auto;
	width: 1050px;
	height: 105px;
	background: url(../images/header_bg.png) center center;
}

.header_link {
	display: block;
	width:280px;
	height: 30px;
	position: relative;
	top: 68px;
	left: 40px;
}

/* 3.2 GLOBAL NAVIGATION
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#globalheader { width: 600px; height: 40px; position: relative; left: 425px; top: 35px; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 120px; height: 0; padding-top: 40px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader { background-image: url(../images/dds_menu.png); background-repeat: no-repeat; }

/* normal */
#globalheader #globalnav li#portfolio a { background-position: 0 0; }
#globalheader #globalnav li#services a { background-position: -120px 0; }
#globalheader #globalnav li#contactus a { background-position: -240px 0; }
#globalheader #globalnav li#blog a { background-position: -360px 0; }
#globalheader #globalnav li#aboutus a { background-position: -480px 0; }

/* hover */
#globalheader #globalnav li#portfolio a:hover { background-position: 0 -41px; }
#globalheader #globalnav li#services a:hover { background-position: -120px -41px; }
#globalheader #globalnav li#contactus a:hover { background-position: -240px -41px; }
#globalheader #globalnav li#blog a:hover { background-position: -360px -41px; }
#globalheader #globalnav li#aboutus a:hover { background-position: -480px -41px; }

/* pressed */
#globalheader #globalnav li#portfolio a:active { background-position: 0 -81px; }
#globalheader #globalnav li#services a:active { background-position: -120px -81px; }
#globalheader #globalnav li#contactus a:active { background-position: -240px -81px; }
#globalheader #globalnav li#blog a:active { background-position: -360px -81px; }
#globalheader #globalnav li#aboutus a:active { background-position: -480px -81px; }

/* selected */
#globalheader.portfolio #globalnav li#portfolio a { background-position: 0 -123px !important; }
#globalheader.services #globalnav li#services a { background-position: -120px -123px !important; }
#globalheader.contactus #globalnav li#contactus a { background-position: -240px -123px !important; }
#globalheader.blog #globalnav li#blog a { background-position: -360px -123px !important; }
#globalheader.aboutus #globalnav li#aboutus a { background-position: -480px -123px !important; }

/* 3.2 CONTENT
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#content {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 1050px;
	height: auto;
}

#content_header {
	margin: 0 auto;	
	height: auto;
	background: url(../images/content_header_bg.png) repeat-y;
}

#content_body {
	margin: 0 auto;
	height: auto;
	background: url(../images/content_body_bg.png) repeat-y;
}

/* 3.2.1 INDEX
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.index_header {
	margin: 0 auto;
	height: 335px;
	width: 900px;
}

.index_header_left {
	float: left;
	margin-right: 50px;
}

.index_header_right {
	float: left;
	width: 440px;
	margin: 30px auto;
}

a.enter_button {
	display: block;
	margin: 0 auto;
	height: 75px;
	width: 200px;
	background: url(../images/enter.png);
}

.index_body {
	height: 300px;
}

.index_body_top {
	margin: 0 auto;
	width: 900px;
	height: 300px;
	background: url(../images/content_body_top.png) center center no-repeat;
}

.index_body_top h1 {
	font-size: 2em;
	line-height: 2em;
	float: left;
	width: 280px;
	text-align: center;
	margin: 30px 10px 5px 10px;
}

.index_body_top a {
	color: #333;
}

.index_body_top p {
	float: left; 
	width: 270px;
	margin: 0 15px 0 15px;
}

.index_body_img {
	float: left;
	width: 300px;
}

.index_body_img img {
	float: right;
	margin-right: 15px;
}

.index_body_bottom {
	margin: 5px auto;
	height: 450px;
	width: 900px;
	background: url(../images/content_body_bottom.png) center center no-repeat;
}

.box_left {
	float: left;
	margin: 45px 0 0 30px;
	width: 222px;
}

.box_left h1 {
	width: 222px;
	text-align: center;
}

.box_right {
	float: left;
	margin: 45px 0 0 60px;
	width: 570px;
}

/* 3.2.2 PORTFOLIO
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.portfolio_header {
	margin: 0 auto;
	width: 900px;
	height: 300px;
}

.portfolio_header a {
	color: #333;
}

.portfolio_header_left {
	float: left;
	margin-right: 50px;
}

.portfolio_header_right {
	float: left;
	width: 550px;
	margin: 15px auto;
}

.portfolio_body {
	margin: 0 auto;
	width: 900px;
	height: 1398px;
	border: 1px solid #ccc;
	background: url(../images/portfolio_body.png) repeat-y;
}

.portfolio_row {
	margin: 0 auto;
	padding: 10px 0 0 0;
	width: 800px;
	height: 190px;
}

.port_left {
	float: left;
	border: 1px solid #333;
	margin-top: -2px;
}

.port_right {
	float: left;
	margin-left: 20px;
	padding-top: 10px;
	width: 598px;
	height: 180px;
}

/* 3.2.3 SERVICES
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.services_header {
	margin: 0 auto;
	height: 380px;
	width: 900px;
}

.services_header_left {
	float: left;
	margin-right: 50px;
}

.services_header_right {
	float: left;
	width: 540px;
	margin: 30px auto;
}

.print_header_left {
	float: left;
	margin: 20px 50px 0 0;
}

.print_header_right {
	float: left;
	width: 440px;
	margin: 30px auto;
}

.services_body {
	height: 300px;
}

/* 3.2.4 CONTACT US
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.contact_header {
	margin: 0 auto;
	width: 900px;
	height: 330px;
}

.contact_header img {
	margin: 15px 0;
	float: left;
}

.contact_header_right {
	float: left;
	width: 500px;
	margin: 40px 30px 0 30px;
}

.contact_body {
	margin: 0 auto;
	width: 600px;
	height: 230px;
}

/* 3.2.5 ABOUT US
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.about_header {
	margin: 0 auto;
	width: 998px;
	height: 300px;
}

img.about_header { 
	display: block;
}

.about_body {
	margin: 0 auto;
	height: 450px;
	width: 900px;
	background: url(../images/content_body_bottom.png) center center no-repeat;
}

.box_left {
	float: left;
	margin: 45px 0 0 30px;
	width: 222px;
}

.box_left h1 {
	width: 222px;
	text-align: center;
}

.box_right {
	float: left;
	margin: 45px 0 0 60px;
	width: 570px;
}

/* 3.3 FOOTER
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#footer {
	margin: 0 auto 25px auto;
	padding: 0;
	width: 1050px;
	height: 110px;
	background: url(../images/footer_bg.png) center center;
}

#footer_content {
	margin: 0 auto;
	padding-top: 10px;
	width: 1000px;
}

#footer_content a {
	font-weight: bold;
}

.footerInfo {
	float: left;
	width: 275px;
	color: #eee;
	font-size: 1.2em;
	margin-left: 25px;
}

.footerInfo a {
	font-weight: normal !important;
	font-size: 1em;
}

.footerText {
	float: right;
	text-align: right;
	margin-right: 25px;
	margin-top: 40px;
	font-size: 1.2em;
	color: #eee;
}

.footerText a {
	color: #437ab8;
}

.footerNavL, .footerNavR {
	float: left;
	width: 90px;
	text-align: left;
	margin-left: 40px;
	font-size: 1.4em;
	color: #eee;
}

/* MISC CLASSES
-----------------------------------------------------------------------------------------------
===============================================================================================*/

.blue {
	color: #437ab8;
}