/* ----------------------------------------------------------
File: screen.css
Site: www.jasard.co.uk
Description: All site styles
Author: Jason Ardener - http://www.jasard.co.uk
Version: 1.0
--------------------------------------------------------------

/* Imports ---------------*/ 
@import url(resets.css);

/* Body ----------------*/ 
body {
background: #f1f1f1 url(../images/site/top_back.jpg) repeat-x scroll top;
text-align: left;
font-family: Arial,Verdana,Tahoma,sans-serif;
font-size: 62.5%;
color: #656565;
line-height:2.2em;
}

/* Hidden items -------------*/
#access,
legend span,
#gallery h2,
.noflash{ 
position: absolute; left: 0px; top: -3000px; width: 1px; height: 1px; overflow: hidden; 
}

html {
background: #e8e8e6;
}

/* Divs -------------*/
#wrap {
margin:0 auto;
width:905px;
}

#header {
height: 59px;
float: left;
width:905px;
padding: 45px 0 10px;
}

#buttons {
width: 220px;
float: right;
list-style: none;
}

#buttons li {
float: left;
}

#buttons li a:focus { 
outline: none; 
}

#buttons li.but_home {
background: url(../images/site/bar_left.jpg) no-repeat;
padding-left: 13px;
width: 47px;
}

#buttons li.but_portfolio {
width: 59px;
}

#buttons li.but_aboutme {
width: 70px;
}

#buttons li.but_cv {
width: 26px;
}

#buttons li.but_contact {
background: url(../images/site/bar_right.jpg) no-repeat scroll right;
padding-right: 15px;
width: 59px;
}

#buttons li.but_home a {
background: url(../images/site/but_home.jpg) no-repeat;

height: 56px;
display: block;
text-indent: -9999px;
}

#buttons li.but_portfolio a {
background: url(../images/site/but_portfolio.jpg) no-repeat;
height: 56px;
display: block;
text-indent: -9999px;
}

#buttons li.but_aboutme a {
background: url(../images/site/but_aboutme.jpg) no-repeat;
height: 56px;
display: block;
text-indent: -9999px;
}

#buttons li.but_cv a {
background: url(../images/site/but_cv.jpg) no-repeat;
height: 56px;
display: block;
text-indent: -9999px;
}

#buttons li.but_contact a {
background: url(../images/site/but_contact.jpg) no-repeat;
height: 56px;
display: block;
text-indent: -9999px;
}

#content_wrap {
background: url(../images/site/page_back2.jpg) repeat-y;
width: 905px;
float: left;
}

#content_top {
height: 11px;
float: left;
width: 905px;
}

.gal {
background: url(../images/site/page_top.png);
}

.nogal {
background: url(../images/site/page_topnogal.png);
}

#content_bottom {
background: url(../images/site/page_bottom.jpg);
height: 9px;
float: left;
width: 905px;
}

#content {
padding: 10px 35px 10px 25px;
font-size: 1.4em;
float: left;
width: 573px;
}

#content ul {
list-style-image:url(../images/site/arrows.png);
padding:0 0 20px 20px;
}

#sidebar {
width: 272px;
float: right;
}

.side_box {
margin: 20px 17px 0px 0px;
text-align: left;
}

.side_box_top {
background: url(../images/site/rightbox_top.jpg) no-repeat scroll top;
color: #827f7f;
height: 44px;
padding: 20px 0 0 70px;
}

.side_box_main {
background: url(../images/site/rightbox_back.jpg) repeat-y scroll top;
padding: 0 0 0 40px;
font-size: 1.2em;
}

.side_box_main ul {
list-style-image:url(../images/site/arrows.png);
}

.side_box_main img {
margin: 0 0 0 6px;
border:2px solid #a6a5a5;
}

.side_box_bottom {
background: url(../images/site/rightbox_bottom.jpg) no-repeat scroll top;
height: 10px;
}

#page_bottom {
background: url(../images/site/bottom_back.jpg) repeat-x scroll bottom;
width: 100%;
clear:both;
height: 60px;
}

#footer {
margin: 0 auto;
width: 865px;
padding: 20px 20px 0 20px;
color: #7d7d7d;
}

#footer ul {
float: left;
padding-left: 180px;
word-spacing: 5px;
}

#footer li {
display: inline;
text-transform: lowercase;
}

#copy {
float: left;
}

#top {
float: right;
}

#footer a {
color: #7d7d7d;
border-bottom:1px dotted #7d7d7d;
}

/* Headers -------------*/
#header h1 {
background: url(../images/site/logo_1.jpg) no-repeat;
width: 456px;
height: 56px;
display: block;
float: left;
text-indent: -9999px;
}

.side_box_top h2 {
font-size: 1.6em;
text-transform: lowercase;
}

#content h1 {
color: #7B944B;
font-size: 2.8em;
padding:5px 0 20px;
text-transform: lowercase;
}

#content h2 {
font-size: 1.4em;
padding-bottom: 10px;
}

#content h3 {
font-size: 1.2em;
font-weight: bold;
color: #9D9D9E;
}

#gallery_prev_middle h2 {
font-size: 1.6em;
}

/* Paragraphs -----------*/
#content p {
padding: 0 0 20px;
text-align: justify;
}

/* Links -----------*/
#content a {
border-bottom:1px dotted #7B944B;
color:#7B944B;
}

#content .portfolio a {
color: #656565;
border-bottom:none;
}

#gallery_prev a {
border-bottom:1px dotted #7B944B;
color:#7B944B;
}

/* Definition Lists -----------*/ 
.keyinfo dt {
float: left;
width: 150px;
}

.keyinfo dd {
margin: 0 0 0 150px;
}

dl {
padding: 0 0 10px 0;
}

.portfolio {
line-height:1.0em;
}

.portfolio dt {
float: left;
width: 150px;
height: 135px;
border-bottom:1px dashed #9d9d9e;
margin-bottom: 15px;
}

.portfolio dd {
margin: 0 0 0 150px;
height: 135px;
border-bottom:1px dashed #9d9d9e;
margin-bottom: 15px;
}

.webdesign .portfolio dt {
height: 110px;
}

.webdesign .portfolio dd {
height: 110px;
}

/* Gallery -----------*/ 
#gallery_view {
width: 590px;
float: left;
}

#gallery_view_top {
height: 10px;
background: url(../images/site/galview_top.jpg) no-repeat;
}

#gallery_view_middle {
height: 250px;
background: url(../images/site/galview_back.jpg) repeat-y;
padding:0 9px;
}

#gallery_view_bottom {
height: 10px;
background: url(../images/site/galview_bot.jpg) no-repeat;
}

#gallery_prev {
width: 305px;
float: right;
}

#gallery_prev_top {
height: 10px;
background: url(../images/site/galprev_top.jpg) no-repeat;
}

#gallery_prev_middle {
height: 263px;
background: url(../images/site/galprev_back.jpg) repeat-y;
padding: 10px 15px 0;
font-size: 1.2em;
}

/* Image Gallery -----------*/ 
#image {position:relative; width:570x; height:250px; background:#FFF url(../images/site/loading.gif) center center no-repeat}

#image img {position:absolute;}

#thumbarea {position:relative; overflow:hidden; height:114px; width:275px; }

#thumbs {position:absolute; list-style:none; height:100px; width:10000px; padding:10px 0 0 0;}

#thumbs img {border:2px solid #a6a5a5;}

#thumbs li {float:left; margin-right:5px; cursor:pointer}

.imgnav {position:absolute; height:250px; width:20%; z-index:100; height:250px; width:20%; z-index:100; outline:none; cursor:pointer}

#previmg {left:0; background:url(../images/site/left.gif) left center no-repeat;}

#nextimg {right:0; background:url(../images/site/right.gif) right center no-repeat;}

.thumbnav {position:absolute; height:100px; width:20%; z-index:100; width:20%; z-index:100; outline:none; cursor:pointer; margin-top: 10px;}

#prevthumb {left:0; background:url(../images/site/leftsmall.gif) left center no-repeat;}

#nextthumb {right:0; background:url(../images/site/rightsmall.gif) right center no-repeat;}