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

	Title: Website
	Author: XHTMLized
	Date: October 2007 

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

	1.  GENERAL
			1.1 Headings and paragraphs
			1.2 Forms
			1.3 Links
			1.4 Miscellaneous
		
	2. GENERAL ELEMEMENTS
	
	3. LAYOUT
			3.1 Accessibility menu
			3.2 Header
			3.3 Content
			3.4 Secondary content
			3.5 Sidebar
			3.6 Footer
		
	4. LAYOUT ELEMENTS

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


/* 1. GENERAL
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* Global reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body {
	line-height: 1; }	
	
ol, ul {
	list-style: none; }
	
.content-list ul {
	list-style:disc;
	margin-left: 50px;
	margin-bottom: 20px;
}

.content-list ul li {
	margin-bottom: 5px;

}
	
table {
	border-collapse: separate; 
	border-spacing: 0;  /* tables still need 'cellspacing="0"' in the markup */
}

caption, th, td {
	text-align: left; 
	font-weight: normal;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* 1em = 10px \ 1.1em = 11px \ 1.2em = 12px */
	text-align: center;
}

/* 1.1	Headings and paragraphs
-----------------------------------------------------------------------------------------------*/	

h1 {}

h2 {}

h3 {}

h4 {}

p  {}


/* 1.2	Forms
-----------------------------------------------------------------------------------------------*/	

input, textarea, select {
	font: 1.2em Arial, Helvetica, sans-serif;
}


/* 1.3	Links
-----------------------------------------------------------------------------------------------*/	

a:link {
	color: #0000ff;
	text-decoration: underline;
}

a:visited {}

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

a:active {}


/* 1.4	Miscellaneous
-----------------------------------------------------------------------------------------------*/	

hr { 
	display: none; }
		
strong {
	font-weight: bold; }
		
em {
	font-style: italic; }
	
abbr, acronym {
	border-bottom: 1px dotted #999; 
	cursor: help;
}


/* 2. GENERAL ELEMENTS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

.hide {
	position: absolute;
	left: -9999px;
}

.clear {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block; }
	
/* Hides from IE-mac \*/ 
* html .clearfix {
	height: 1%; }

.clearfix {
	display: block; }
/* End hide from IE-mac */


/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
body {
	background:#050505 url(../images/bg-body.gif) left top repeat-x;
}
body.inside {
	background:#050505 url(../images/bg-body_inside.gif) left top repeat-x;
}
.container {
	width: 900px;
	position: relative;
	margin: 0 auto;
	text-align: left;
}

#header {
	height:335px;
	position:relative;
	background:url(../images/bg-header.jpg) left top no-repeat;
}
#header.inside {
	background:url(../images/bg-header_inside.jpg) left top no-repeat;
	position:relative;
	height:124px;
}
/* Default - Two columns layout */
.columns_wrapper {
	background:#474747;
}

.content {
	float: left;
	width: 668px;
	font-size:1.4em;
	line-height:1.2em;
	color:#fff;
}
	
.nav {
	position:relative;
	width: 232px;
	float: right; 
}
#content-home {
	background:#474747 url(../images/bg-content_home.jpg) left top no-repeat;
	padding-top:97px;
}
#content-inside {
	background:#474747 url(../images/bg-content_inside.jpg) left top no-repeat;
	padding-top:97px;
	width:646px;
}
#content-projects {
	background:#474747 url(../images/bg-content_projects.jpg) left top no-repeat;
	padding-top:97px;
	width:657px;
	padding-bottom:20px;
}
#nav-home {
	background:#474747 url(../images/bg-nav_home.jpg) left top no-repeat;
	height:300px;
}
#nav-about_us {
	background:#474747 url(../images/bg-nav_about_us.jpg) left top no-repeat;
	height:300px;
	width:254px;
}
#nav-contact_us {
	background:#474747 url(../images/bg-nav_contact_us.jpg) left top no-repeat;
	height:300px;
	width:254px;
}
#nav-services {
	background:#474747 url(../images/bg-nav_services.jpg) left top no-repeat;
	height:300px;
	width:254px;
}
#nav-projects {
	background:#474747 url(../images/bg-nav_projects.jpg) right top no-repeat;
	height:300px;
	width:243px;
}
#footer {
	clear: both; }
	
/* One column layout */

body.one-column #secondary-content, body.one-column #sidebar {
	display: none; }

body.one-column #content {
	width: 980px;
	float: none;
}
	
/* Three column layout - 3colunns.html for this */
	
body.three-column #content {
	width: 760px;
	float: left; 
}
	
body.three-column #main-content {
	width: 540px;
	float: right; 
}
	
body.three-column #secondary-content {
	width: 200px;
	float: left; 
}


/* 3.1	Accessibility menu
-----------------------------------------------------------------------------------------------*/	

#accessibility-menu {
	position: absolute;
	left: -1000em;
	text-align: left;
}


/* 3.2	Header
-----------------------------------------------------------------------------------------------*/	

#header h1, #header h1 a, #header h1 a span {
	display: block;
	width: 100px;
	height: 50px;
	overflow: hidden;
}

#header h1 {
	position: absolute;
	top: 0;
	left: -9999em;
}

#header h1 a { /* style the text covered by image */ }

#header h1 a span {	
	position: absolute; 
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../images/logo.gif) no-repeat;
}
#header #contact {
	width:222px;
	height:75px;
	top:30px;
	left:275px;
	position:absolute;
	color:#fff;
	text-align:left;
	font-size:1.4em;
	line-height:1.4em;
}
#header #contact-home {
	width:222px;
	height:75px;
	top:20px;
	left:368px;
	position:absolute;
	color:#fff;
	text-align:right;
	font-size:1.4em;
	line-height:1.4em;
}
#header #contact-home strong,
#header #contact strong {
	display:block;
	font-weight:normal;
	font-size:1.8em;
	line-height:1.2em;
}
/* 3.3	Nav
-----------------------------------------------------------------------------------------------*/

.nav li{
	height: 30px;
}


.nav li a{
	position:absolute;
	width:200px;
	height:30px;
	right:7px;
	text-indent: -9999em;
}
.nav li.home a{
	top:27px;
}
.nav li.projects a{
	top:60px;
}
.nav li.about_us a{
	top:93px;
}
.nav li.services a{
	top:126px;
}
.nav li.contact_us a{
	top:160px;
}

.nav li {
	z-index: -10;
}

.nav li a {
	z-index: 10;
}

/* 3.4	Content
-----------------------------------------------------------------------------------------------*/	

.content h2 {
	margin-left:20px;
	margin-bottom:1em;
	font-size:1.6em;
}
.content p {
	margin-left:20px;
	margin-bottom:1.2em;
}
.category {
	margin-left:17px;
	margin-bottom:20px;
}
	.category img {
		border:1px solid #646464;
	}
	.category ul {
		border-bottom:1px solid #646464;
		height:1%;
	}
	.category li {		
		border:1px solid #646464;
		border-bottom:0;
		float:left;
		width:99.5%;
	}
	.category ul>li {
		float:none;
		width:auto;
	}
		.category li a {
			display:block;
			padding:5px 8px;
			color:#fff;
			text-decoration:none;
		}
	.category li.stripe {
		background:#333;
	}
.presentation {
	margin-left:17px;
	margin-bottom:20px;
}
	.presentation img {
		border:1px solid #646464;
	}
	.presentation .gallery {
		background:#333;
		border:1px solid #646464;
		padding-bottom:13px;
	}
	.presentation>.gallery {
		padding-bottom:0;
	}
	.presentation .gallery li {
		float:left;
		margin:13px 0 13px 27px;
		display:inline;
	}
	.presentation .gallery li img {
		display:block;
		border:0;
	}
	.presentation .gallery li img.small {
		margin-top:18px;
	}
/* 3.6	Footer
-----------------------------------------------------------------------------------------------*/	
#footer {
	background:url(../images/bg-footer.gif) left top repeat-x;
	padding:0 15px;
}
#footer p.copyright {
	float:left;
	padding:10px 0;
	color:#fff;
	font-size:1.4em;
	line-height:1.2em;
	font-weight:bold;
}
#footer ul {
	float:right;
	text-align:right;
	width:420px;
	color:#fff;
	font-size:1.4em;
	padding:20px 0;
}
#footer ul li {
	display:inline;
}
#footer ul li a {
	color:#fff;
	font-weight:bold;
}
/* 4. LAYOUT ELEMENTS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 5. ADMIN
-----------------------------------------------------------------------------------------------*/

#login_modal td {
padding: 0px;
}

.cat_nav, .cat_nav:link {
display: block;
float: left;
background-color: #777;
margin: -15px 0px 10px 20px;
padding: 2px 5px 2px 5px;
font-size: 80%;
color: #fff;
text-decoration: none;
}

form {
margin-left: 20px;
}

form h1 {
font-size: 130%;
background-color: #ccc;
padding: 5px;
color: #000;
font-weight: bold;
}

form label {
width: 200px;
display: block;
margin: 5px 0px 5px 0px;
font-size: 90%;
font-weight: bold;
}

.projects-list {
margin-top: 5px;
margin-bottom: 5px;
border: 2px solid #222;
}

.projects-list td{
padding: 5px;
background-color: #333;
}

.admin_bar {
background:#777777 none repeat scroll 0 0;
margin-bottom:20px;
margin-left:20px;
padding:10px;
}

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


.inner_content {
	margin-left: 20px;	
}