/* Layout and styling for three column (menu, graphics and content) page with header and footer */
/* Coded by Mechele Kitching 05 january 2010 */
/* www.mechelekitching.co.uk */
/* version: 1 */

/* General layout */
/* www.mechelekitching.co.uk main CSS document */

/*-----------------------------------------------*/
html,body{
height:100%;
margin:0;
padding:0;
}

body {
background: url(../images/site/orange_grad.gif) repeat-x;
font:normal 11px/16px Arial, sans-serif;
color:#000000;
}

#wrapper {
text-align:left;
width:1000px;
margin:0 auto;
padding:0;
}

/* Typographic styling
-----------------------------------------------*/
p {
font-size:1.1em;
font-weight:400;
line-height:140%;
color:#252525;
}

#contact p {
font-size:1.4em;
font-weight:400;
color:white;
}

#footnav p {
font-size:1em;
font-weight:400;
color:white;
}

.imgheader {
font-size:1.2em;
font-weight:400;
color:white;
background: black;
margin:0 140px 0 0;
padding:2px 0 2px 10px;
}

.quote p {
font-size:1.1em;
font-weight:400;
color:white;
}

#header h1 {
background:url(../images/site/logo.png) 0 0 no-repeat;
text-indent:-9999px;
cursor:pointer;
margin:0;
padding:0;
}

#header h1 a {
display:block;
width:230px;
height:120px;
}

h2 {
background:url(../images/site/title1.gif) 0 0 no-repeat;
text-indent:-9999px;
cursor:pointer;
margin:20px 0 0 0;
padding:0;
height: 80px;
width: 210px;
}

h3 {
font-size:1.2em;
line-height:150%;
font-weight:700;
color:#4d4d4f;
}

#header h3 {
display:block;
float:right;
background:url(../images/contact.gif) 0 0 no-repeat;
text-indent:-9999px;
cursor:pointer;
}

#footer h4 {
font-weight:400;
color:#ec008c;
margin-bottom:0px;
padding-bottom:0px;
}

a {
outline:none; /* Gets rid of Firefox's dashed borders */
color:#75b03f;
}

a:link {
text-decoration:none;
}

a:hover {
color:#75b03f;
text-decoration:underline;
}

a:visited {
text-decoration:none;
}

.imagelink a { color: gray;}
.imagelink a:hover { color:#fbc115;}

.next a:link {
color:#ec008c;
font-size: 1.2em;
font-weight: 400;
}

.next a:hover {
color:#ec008c;
font-size: 1.2em;
font-weight: 400;
}

.next a:visited {
color:#ec008c;
font-size: 1.2em;
font-weight: 400;
}

.next a:hover {
color:#ec008c;
font-size: 1.2em;
font-weight: 400;
}

.back a:link {
color:#0092c8;
font-size: 1.2em;
font-weight: 400;
}

.back a:hover {
color:#0092c8;
font-size: 1.2em;
font-weight: 400;
}

.back a:visited {
color:#0092c8;
font-size: 1.2em;
font-weight: 400;
}

.back a:hover {
color:#0092c8;
font-size: 1.2em;
font-weight: 400;
}

/* Divs position and size
-----------------------------------------------*/

#header {
height:70px;
width:100%;
}

#logo {
width:230px;
height:120px;
margin:0 0 0 45px;
position: absolute;
}

#banner1 {
width:100%;
height:200px;
margin:0;
padding:0;
background: url(../images/home/birds.png) 0 0 no-repeat;
}

#banner2 {
width:100%;
height:200px;
margin:0;
padding:0;
background: url(../images/portfolio/birds.png) 0 0 no-repeat;
}

#contact {
float:right;
margin:45px 20px 0 0;
font-size: 1.35em;
color:white;
}

#footer {
clear:both;
height:140px;
width:100%;
background-color:#252525;
position:relative;
top: 50px
}

#contbtm{
width:1000px;
margin:0 auto;
}

#footnav{
width:400px;
float:left;
margin:0;
padding:0;
}

#cloud{
width:230px;
height:100px;
float:right;
margin:10px 20px 0 0;
padding:0;
}

#image1 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/skills.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

#image2 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/work.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

#image3 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/way.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

#image4 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/me.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

#image5 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/news.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

#image6 {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
background: url(../images/home/contact.jpg) no-repeat;
border:solid;
border-color:gray;
border-width: 1px;
}

.quote {
float:left;
width:170px;
height:160px;
margin:20px 0 0 0;
padding:5px 20px 0 20px;
background: url(../images/portfolio/quote.gif) no-repeat;
}


/* Layout style for 2 Col grid
-----------------------------------------------*/

.column1 {
float:left;
width:240px;
margin:50px 0 0 20px;
padding:10px 0 0 0;
background: url(../images/home/greenstripes.gif) 0 0 repeat-x;
}

.column2 {
float:left;
width:240px;
margin:50px 0 0 0;
padding:10px 0 0 0;
background: url(../images/home/greenstripes.gif) 0 0 repeat-x;
}

.imagelink {
float:left;
width:220px;
height:140px;
margin:20px 0 0 20px;
}

.textbox {
float:left;
width:220px;
height:140px;
margin:0 0 0 20px;
}

.column3 {
float:left;
width:720px;
margin:50px 0 0 0;
padding:10px 0 0 20px;
background: url(../images/home/greenstripes.gif) 0 0 repeat-x;
}

.imageportfolio {
float:left;
width:720px;
margin:20px 0 10px 0;
border:solid;
border-color:gray;
border-width: 1px;
}


/* Top Navigation styles
-----------------------------------------------*/

#topnav {
float:right;
margin:45px 150px 0 0;
padding:0;
}

#topnav li{
list-style-type:none;
float:left;
margin:0;
padding:0;
}

#topnav li a{
float:left;
color:white;
font-size:1.4em;
font-weight:400;
padding:0 30px 0 0;
display:inline;
text-decoration:none;
}

#topnav li a:hover, #topnav li a:active{
text-decoration:none;
color:#75b03f;
}

#topnav li .current{
color:#75b03f;
}