/*
* Craig Jones Design - CSS by threefour.co.uk
*/

/* Reset */
@import "reset.css";

/* Main styles */

html {
font-family: Helvetica, "Calibri", Arial, sans-serif;
}

body {
line-height:18px;
}


/* Layout */

#wrapper {
width:900px;
margin:40px auto;
}

/*********************** Header ***********************/


#header {
height:30px;
background:#a4a5a9;
margin:0 0 36px 0;
}

h1#logo {
width:265px;
height:30px;
float:left;
color:#ceff00;
text-indent:-9999px;
display:block;
background:url('../images/logo.jpg') no-repeat 0 0;
}

/*********************** Frame ***********************/

#frame {
height:455px;
position:relative;
}

#content {
overflow:hidden;
float:left;
}

#content .contact, #content .clients {
width:100%;
visibility: visible;
}

#picture {
float:right;

}

/*********************** Main Nav ***********************/

#mainNav {
height:24px;
background:#a4a5a9;
clear:both;
margin:0 0 18px 0;
}

/* Navigation */

#mainNav ul {
padding:0 10px;
}

#mainNav li {
display:inline;
}

#mainNav li a {
text-indent:-9999px;
}

#mainNav li a:hover {
}

#mainNav li a:active {
}

#mainNav li.first {}

#mainNav li.selected a{
}

li#navabout a {
display:block;
float:left;
width:76px;
height:24px;
background:url('../images/nav-about.jpg') no-repeat 0 0;
}

li#navservices a {
display:block;
float:left;
width:108px;
height:24px;
background:url('../images/nav-services.jpg') no-repeat 0 0;
}

li#navportfolio a {
display:block;
float:left;
width:105px;
height:24px;
background:url('../images/nav-portfolio.jpg') no-repeat 0 0;
}

li#navclients a {
display:block;
float:left;
width:89px;
height:24px;
background:url('../images/nav-clients.jpg') no-repeat 0 0;
}

li#navcontact a {
display:block;
float:left;
width:94px;
height:24px;
background:url('../images/nav-contact.jpg') no-repeat 0 0;
}

li#navabout a:hover, #about li#navabout a {
background:url('../images/nav-about.jpg') no-repeat 0 -24px;
}

li#navservices a:hover, #services li#navservices a {
background:url('../images/nav-services.jpg') no-repeat 0 -24px;
}

li#navportfolio a:hover, #portfolio li#navportfolio a {
background:url('../images/nav-portfolio.jpg') no-repeat 0 -24px;
}

li#navclients a:hover, #clients li#navclients a {
background:url('../images/nav-clients.jpg') no-repeat 0 -24px;
}

li#navcontact a:hover, #contact li#navcontact a {
background:url('../images/nav-contact.jpg') no-repeat 0 -24px;
}



/*********************** Footer ***********************/

#footer {
height:60px;
clear:both;
}

/* V-Card */


.vcard {
width:400px;
float:right;
font-size:12px;
color:#515151;
}

.vcard p {font-size:12px; margin:0;}

p.adr {width:200px;float:left;}
p.adr span {display:block;}
span.extended-adress {}
span.street-adress {}
span.region {display:inline;float:left;padding:0 6px 0 0;}
span.postal-code {display:inline;float:left;}

p.tel {width:199px;float:left;}

p.tel span.type {font-weight:bold;width:16px;}

p.email {margin-top:18px;}
p.email span {font-weight:bold;width:16px;}


/*********************** Global ***********************/

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


.clear {
clear:both;
background:transparent;
}

.hide {
display:none;
}


img, img a {
border:none;
}

/* Links */

p a {
color:#c8f526;
text-decoration:none;
}

p a:hover {
color:#c8f526;
text-decoration:underline;
}

p a:focus {}

/* Typography */

.email {
	background-color:#a4a5a9;
	padding: 0.2em;
}

h1 {}

h2 {
font-size:18px;
color:#444;
margin:0 0 9px 0;
}

h3 {}

h4 {}

h5 {}

h6 {}

p {
font-size:14px;
color:#515151;
margin:0 0 9px 0;
}

acronym {}

abbr {}

blockquote {}

strong {}

/*********************** Page Specific ***********************/

body#about div#content p {
	width:500px;
}



div#splash {
margin:40px auto 0px auto;
width:283px;
}

div.clients ul {
margin:0px 0px 0px 60px;
width:300px;
float:left;
list-style:none;
font-size:12px;
color:#515151;
}


/*********************** Portfolio ***********************/

div.portfolio {
height:455px;
padding:0 29px;
}

body#home #content p {
width:600px;
padding:0 0 0 8px;
}