/* CSS Document */
/* Rebecca Esler */
/* 24/06/08 */

@import "headers.css";

body{
margin:0;
padding:0;
background-color:#b2ad9e;
}

/* ---background image and colour--- */
#bg{
background:url(../images/bg.jpg) repeat-x top center;
background-color:#c5c1b1;
margin:0;
padding:0;
min-height:600px;
min-width:984px;}

img{
border:0;}

/* ---centres site--- */
#frame{
width:834px;
margin:0 auto;
padding:0 10px 0 0;}

/* ---link on logo--- */
#logo{
margin:0 auto;
padding:0 80px 0 0;
width:100px;
height:131px;}

/* ---left side of content area--- */
#contentLeft{
width:462px;
margin:0 0 30px 35px;
padding:0;
font: 12px/17px Arial, sans-serif;
text-align:left;
color:#ffffff;
float:left;
display:inline;}

#contentLeft h1{
margin:0;
font: 24px Arial, sans-serif;
padding:0;
color:#ffffff;}

#contentLeft h2{
margin:15px 0 8px 0;
font: 14px Arial, sans-serif;
padding:0;
color:#ffffff;}

.small{
margin:0;
font: 10px Arial, sans-serif;
padding:0;
color:#ffffff;
font-weight:bold;}

#contentLeft a{
margin:0;
padding:0;
text-decoration:none;
color: #bfc98f;}

#contentLeft li{
margin:0px;
padding:0;
list-style:none;}

/* ---what im up to - twitter updates--- */
#twitterbox{
background:url(../images/twitter_bg.png) top left no-repeat;
color:#443b2e;
font: 11px/14px Arial, sans-serif;
margin:0;
padding:5px;
width:452px;}

.dottedline{
margin:0;
padding:10px;
border:1px dotted #ffffff;}

.dottedlineSmall{
margin:0;
padding:5px 10px;
border:1px dotted #ffffff;}

#twitterbox h2{
color:#443b2e;
font: 14px Arial, sans-serif;
margin:0;
padding:0 0 7px 0;}

#twitterbox ul{
margin:0;
padding:0;}

#twitterbox li{
float:left;
margin:0;
padding:8px 0 0 0;
list-style:none;}


.twitter{
margin:0;
padding:0;
color:#443b2e;
font: 10px/14px Arial, sans-serif;}

#BexEslersFacebookStatusUpdatestlvs29iv60uiqukketbv8i2f24 a{
	color:#443b2e;}

.dottedline{
margin:0;
padding:10px;
border:1px dotted #ffffff;}

.dottedlineSmall{
margin:0;
padding:5px 10px;
border:1px dotted #ffffff;}

#BexEslersFacebookStatusUpdatestlvs29iv60uiqukketbv8i2f24 h2{
color:#443b2e;
font: 14px Arial, sans-serif;
margin:0;
padding:0 0 7px 0;}

.date{
width:412px;
background:url(../images/bullet.png) top left no-repeat;
float:left;
margin:3px 0 0 0;
padding:1px 0 8px 20px;
text-decoration:none;
font: 9px Arial, sans-serif;
color:#443b2e;
border-bottom:1px dotted #443b2e;}

#BexEslersFacebookStatusUpdatestlvs29iv60uiqukketbv8i2f24 div{
	display:none;}

#top{
margin:0;
padding:0;}

#notebookbox1{
clear:both;
margin:15px 0;
padding:5px;
background:url(../images/heading_box.png) top left repeat;}

#notebookbox2{
clear:all;
margin:0 0 10px 0;
padding:5px;
background:url(../images/heading_box.png) top left repeat;}

#contactbox{
margin:0 0 10px 0;
padding:5px;
background:url(../images/heading_box.png) top left repeat;}

#textLeft{
float:left;
display:inline;
margin:0 0 10px 17px;
padding:0 0 0 1px;
width:220px;
font-size:11px;}

#textLeft a{
margin:0;
padding:0;
text-decoration:none;
color:#ffffff;}

#textLeft a:hover{
margin:0;
padding:0;
text-decoration:none;
color:#55554b;}

#textRight{
float:right;
display:inline;
margin:0 0 20px 0;
padding:0 0 0 1px;
width:220px;
font-size:11px;}

#textRight a{
margin:0;
padding:0;
text-decoration:none;
color:#ffffff;}

#textRight a:hover{
margin:0;
padding:0;
text-decoration:none;
color:#55554b;}

#textBtm{
float:left;
display:inline;
margin:0 0 10px 17px;
padding:0 0 0 1px;
font-size:11px;
color:#2b2c27;}

#contentLeft #textBtm p{
font-size:11px;
color:#2b2c27;}

#textBtm a{
margin:0;
padding:0;
text-decoration:none;
color:#2b2c27;}

#textBtm a:hover{
margin:0;
padding:0;
text-decoration:none;
color:#55554b;}

/* --- portfolio --- */
#portfolio{
width:473px;
padding:0px;
margin:10px 0 0 0;
color:#594d3c;}

#portfolioImage{
width:459px;
background-color:#ffffff;
padding:6px;
margin:0 0 10px 0;}

#visit{
float:left;
display:inline;
margin:1px 0 0 0;
padding:0;
width:150px;
color:#594d3c;
font: 10px Arial, sans-serif;}

#visit a{
margin:0;
padding:0;
text-decoration:none;
color:#594d3c;}

#numbers{
float:right;
display:inline;
text-align:right;
margin:0;
padding:0;
width:300px;
height:25px;
font: 11px Arial, sans-serif;}

#numbers a.numbers{
background:url(../images/number.gif) top left no-repeat;
margin:0;
padding:2px 9px 3px 6px;
text-decoration:none;
color:#ffffff;
text-align:right;}

#numbers a:hover.numbers{
background:url(../images/number_over.gif) top left no-repeat;
text-decoration:none;
color:#ffffff;}

#portfolio h2{
clear:both;
color:#594d3c;
margin:0;
padding:10px 0;
font: 14px/14px Arial, sans-serif;}

#winslow{
margin:0;
padding:0;
background:url(../images/portfolio/winslow.jpg) top left no-repeat;
height:219px;}

#alm{
margin:0;
padding:0;
background:url(../images/portfolio/alm1.gif) top left no-repeat;
height:219px;}

#artklick{
margin:0;
padding:0;
background:url(../images/portfolio/artklick1.jpg) top left no-repeat;
height:219px;}

#bealecullen{
margin:0;
padding:0;
background:url(../images/portfolio/bealecullen1.jpg) top left no-repeat;
height:219px;}

#cbd{
margin:0;
padding:0;
background:url(../images/portfolio/cbd2.jpg) top left no-repeat;
height:219px;}

#donnadohi{
margin:0;
padding:0;
background:url(../images/portfolio/donnadohi1.jpg) top left no-repeat;
height:219px;}

#effectus{
margin:0;
padding:0;
background:url(../images/portfolio/effectus1.gif) top left no-repeat;
height:219px;}

#inkode{
margin:0;
padding:0;
background:url(../images/portfolio/inkode.jpg) top left no-repeat;
height:219px;}

#nzega{
margin:0;
padding:0;
background:url(../images/portfolio/nzega1.jpg) top left no-repeat;
height:219px;}

#pcc{
margin:0;
padding:0;
background:url(../images/portfolio/pcc1.jpg) top left no-repeat;
height:219px;}

#somerton{
margin:0;
padding:0;
background:url(../images/portfolio/somerton1.jpg) top left no-repeat;
height:219px;}

#sunflower{
margin:0;
padding:0;
background:url(../images/portfolio/sunflower1.gif) top left no-repeat;
height:219px;}

#gascompany{
margin:0;
padding:0;
background:url(../images/portfolio/gascompany.jpg) top left no-repeat;
height:219px;}

#zymergy{
margin:0;
padding:0;
background:url(../images/portfolio/zymergy1.gif) top left no-repeat;
height:219px;}

.hide{
display: none;}

.show{
display: block;}

/* ---right side of content area--- */
#contentRight{
width:258px;
margin:10px 35px 30px 0;
padding:0;
float:right;
display:inline;}

#contentRight h2{
margin:0px 0 10px 0;
padding:5px 0 0 40px;
background:url(../images/h2.gif) top left no-repeat;
font: 18px/18px Arial, sans-serif;
color:#ffffff;}

#contentRight h3{
margin:35px 0 15px 0;
padding:5px 0 0 40px;
background:url(../images/h3.gif) top left no-repeat;
font: 18px/18px Arial, sans-serif;
color:#ffffff;
font-weight:normal;}

/* ---recent work javascript box--- */
#recentWork{
margin:47px 0 0 0;
padding:0;}

#photos{
width: 258px;
margin: 0px;
padding: 0px;
font: 12px Helvetica, Arial, sans-serif;
color:#ffffff;}

.image{
width:258px;}

.image a img{
padding: 0;
text-align:center;
margin:0 0 5px 0;
border:5px solid #ffffff;}

.image a.gap{
margin:0 5px 0 0;
padding:0;}

.image a:hover img{
padding: 0;
text-align:center;
margin:0 0 5px 0;
border:5px solid #abb86c;}

.arrow{
clear:both;
width:258px;
margin: 0;
}

.arrow a img{
float:right;
margin:0;
padding:0;
border:0;
width:17px;
height:18px;}

#flickr{width: 258px; margin:0; padding:0;}
.flickr_badge_image a img{
width:72px;
height:72px;}
#flickr_badge_image1 a:hover{ color:#669933; border-width:thick;}
#flickr_badge_image1 a{color:#ffffff; border-width:thick;}
#flickr_badge_image2 a:hover{ color:#669933;}
#flickr_badge_image2 a{color:#ffffff;}
#flickr_badge_image3 a:hover{ color:#669933;}
#flickr_badge_image3 a{color:#ffffff;}
#flickr_badge_image4 a:hover{ color:#669933;}
#flickr_badge_image4 a{color:#ffffff;}
#flickr_badge_image5 a:hover{ color:#669933;}
#flickr_badge_image5 a{color:#ffffff;}
#flickr_badge_image6 a:hover{ color:#669933;}
#flickr_badge_image6 a{color:#ffffff;}
#flickr_badge_image6{float:left; margin:0; padding:0;}
#flickr_badge_image5{float:left; margin:0 5px 0 0; padding:0;}
#flickr_badge_image4{float:left; margin:0 5px 0 0; padding:0;}
#flickr_badge_image3{float:left; margin:0; padding:0;}
#flickr_badge_image2{float:left; margin:0 5px 0 0; padding:0;}
#flickr_badge_image1{float:left; margin:0 5px 0 0; padding:0;}

/*--- navigation portfolio page --- */
#nav{
margin:28px 0 0 0;
padding:6px;
background:  url(../images/nav_bg.jpg) no-repeat top left;
width:246px;}

#nav ul{
margin:0;
padding:0;
border:1px dotted #d2cdc8;
list-style:none;
}

#nav li{
margin:0;
padding:0;
font: 11px Arial, sans-serif;
border-bottom:1px solid #d2cdc8;
}

#nav a{
margin:0;
padding:6px 14px;
text-decoration:none;
color:#ffffff;
display:block;
width:216px;}

#nav li.one a:hover{
background-color:#2a2d28;}

#nav li.two a:hover{
background-color:#232621;}

#nav li.three a:hover{
background-color:#2b2c27;}

#nav li.four a:hover{
background-color:#42433a;}

#nav li.five a:hover{
background-color:#54554a;}

#nav li.six a:hover{
background-color:#68695c;}

#nav li.seven a:hover{
background-color:#7a776a;}

#nav li.eight a:hover{
background-color:#868576;}

#nav li.nine a:hover{
background-color:#8f8e7e;}

#nav li.bottom a:hover{
background-color:#908f80;}

#nav li.end a:hover{
background-color:#908f80;}

#nav li.heading{
font: 14px/18px Arial, sans-serif;
color:#ffffff;
padding:7px 14px 5px 14px;
margin:0;}

.small{
font: 10px/18px Arial, sans-serif;
color:#ffffff;
padding:0px;
margin:0;}


#nav li.end{
border:0;}

/* ---footer bg image and text--- */
#footer{
margin:0;
padding:20px 0 40px 0;
background:  url(../images/footer.gif) repeat-x top left;
color:#443b2e;
font: 11px Arial, sans-serif;
text-align:center;}

#footer a{
margin:0;
padding:0;
color:#443b2e;
text-decoration:none;}

#footer a:hover{
margin:0;
padding:0;
color:#000000;
text-decoration:none;}

#footer a.xhtml{
background:  url(../images/btn_xhtml.gif) no-repeat bottom left;
color:#ffffff;
margin:0;
padding:2px 15px 2px 5px;
}

#footer a.css{
background:  url(../images/btn_css.gif) no-repeat bottom left;
color:#ffffff;
margin:0;
padding:2px 15px 2px 5px;
}