/*
Theme Name: Green Theme
Theme URI: http://www.samcrawshaw.co.uk
Description: A theme for my portfolio built on <a href="elliotjaystocks.com">Elliot Jay Stocks</a> Starkers theme
Version: 1 (WP2.6.2)
Author: Sam Crawshaw
Author URI: http://www.samcrawshaw.co.uk
Tags: green, theme, portfolio, sam, crawshaw
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

/* reset */

*{
padding: 0;
margin: 0;}

/* postioning and sizes */

html{overflow: scroll;}

html, body{
font-size: 100%;
height: 100%;}

body{
color: #333;
background-image: url('./images/background.gif');
background-repeat: repeat-x;
font-family: Helvetica, Arial, san-serif;}

#wrapper{
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em !important;}

.clear{clear: both;}

.left{float: left;}

.center{
text-align: center;
margin: 0 auto;}

.right{float: right;}

/* header */

#header_wrapper{
background-image: url('./images/background2.jpg');}

#header{
height: 320px;
line-height: 140px;
width: 960px;
margin: 0 auto;
background-image: url('./images/title.jpg');
background-repeat: no-repeat;}

#header h1, #header p{
margin-left: -9999px;
padding: 10px;}

#header_no{
height: 320px;
line-height: 140px;
width: 960px;
margin: 0 auto;
background-image: url('./images/title.jpg');
background-repeat: no-repeat;}

#header_no h1, #header_no p{
margin-left: -9999px;
padding: 10px;}

/* navigation */

#navigation_wrapper{
margin-top: -60px;
height: 60px;}

#navigation{
width: 960px;
margin: 0 auto;}

#navigation ul{}

#navigation ul li{
float: left;
width: 160px;
text-align: center;
line-height: 55px;
list-style-type: none;}

.page_item a{
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 75%;
display: block;}

.page_item a:hover{
color: #fff;
background-image: url('./images/navigation_on.png');}

.current_page_item a{
color: #fff;} 

/* content */

#content_wrapper{
height: 100%;
clear: left;}

#page_top{
position: absolute;
margin: -15px 0 0 -10px;
width: 960px;}

#content{
min-height: 550px;
background-color: #fff;
padding: 10px;
width: 940px;
margin: 20px auto;}

#content p{font-size: 90%;}

#content h2{
font-family: "Times New Roman";
font-style: italic;
font-size: 250%;
width: 100%;
margin-bottom: 20px;
color: #696;}

#content h2 a:hover{color: #000;}

#content p{
padding-right: 10px;
padding-bottom: 20px;}

/* assignment columns */

.assignment_column_quarter{
border-left: 1px solid #696;
width: 225px;
margin-left: 450px;
padding-left: 10px;}

.assignment_column_half{
float: left;
display: block;
padding: 0 0px 0 0px;
width: 430px;}

.assignment_column_half ul{
font-size: 95%;
margin: 0 0 20px 20px;}

.assignment_column_half ul li{
margin-bottom: 10px;
list-style-type: circle;}

#next{
height: 100px;
line-height: 100px;
width: 100%;
background-color: #fff;
color: #696;
text-align: center;
display: block;
border: 1px solid #696;}

#next:hover{
background-color: #696;
color: #fff;}

.assignment_column_half a{float: left;
height: auto;
width: 440px;}

.assignment_column_half  img{
float: left;

width: 440px;
margin-bottom: 20px;}

.internal_image{
height: 100px;
border: 1px solid #696;
width: 220px;}

/* columns */

.column_home p a{
text-decoration: none;
color: #696;}

.column_home a:hover{color: #000;}

.column_home{
width: 230px;
float: left;}

.column_quarter{
float: left;
width: 230px;}

.column_quarter h3{
margin-bottom: 20px;}

.column_half{
padding-left: 10px;
width: 440px;
float: left;}

.column_half ul li{
width: 210px;
height: 52px;
margin: 17px 10px 0 0;
float: left;}

.column_half ul li img{float: left;}

.column_half ul li p{
height: 32px;
line-height: 52px;
margin-left: 65px;}

.column_three_quarter{
border-left: 1px solid #696;
display: block;
padding-left: 10px;
width: 689px;
margin-left: 230px;}

.column_three_quarter ul li{
font-size: 95%;
margin-bottom: 10px;
margin-left: 20px;
list-style-type: circle;}

.column_three_quarter h3 a{
border-top: 1px solid #696;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
color: #696;
text-decoration: none;}

.column_three_quarter h3 {
height: 50px;
line-height: 50px;}

.post h3 a{border-top: 1px solid #696;
z-index: 1;
position: absolute;
height: 100%;
width: 600px;
color: #696;
text-decoration: none;}

.post h3 a:hover{color: #000;}

.post ul li a{margin-bottom: -17px;}

h3 a:hover{color: #000;}

.column{
width: 455px;
float: left;}

.box{
margin-bottom: 10px;
width: 463px;
clear: left;
max-height: 200px;
height: 200px;}

.box a{
position: relative;
top: 0;
display: block;
height: 100%;
width: 100%;}

.image{float: left;}

.image img{
border: 1px solid #696;
height: 100%;
margin-top: -50px;
width: 100%;}

.written{
margin: 0 0 -1px 1px;
height: 50px;
width: 100%;
position: relative;
z-index: 1;
background-image: url('./images/highlight.png');}

.written h4{
font-weight: bold;
line-height: 50px;
padding-left: 10px;}

.written a{
height: 200px;
text-decoration: none;
color: #333;}

.written a:hover{color: #fff;}

h3{color: #696;}

.spacer{
height: 10px;
margin-bottom: 30px;}

.small_spacer{margin-bottom: 10px;}

.storytitle{
line-height: 50px;
height: 50px;}

/* footer */

#footer_wrapper{
background-image: url('./images/footer_background.gif');
height: 300px;
clear: left;}

#footer_wrapper p{
color: #696;
margin: 0 0 0 10px;
font-size: 75%;}

#footer_fitter{
margin: 0 auto;
padding-top: 20px;
height: 100%;
width: 800px;}

#footer{
background-image: url('./images/footer.gif');
width: 960px;
height: 280px;
margin: 0 auto;}

#footer ul{
width: 25%;
float: left;}

#footer ul li{
font-size: 100%;
list-style-type: none;}

#footer ul li h4{
font-weight: bold;
text-transform: uppercase;
color: #696;
padding: 10px 0 10px 0;}

#footer ul li a{
color: #333;
text-decoration: none;}

#footer ul li a:hover{
color: #696;}

.push{
height: 4em;}

/* slider */

.main_view{
margin-top: -7px;
float: left;
position: relative;
width: 700px;
height: 375px;
margin-bottom: 10px;}

.window{
overflow: hidden;
width: 700px;
height: 376px;
overflow: hidden;
position: relative;}

.image_reel{
position: absolute;
top: 0;
left: 0;}

.image_reel img{
text-decoration: none;
border: none;
float: left;}

.image_reel a{
text-decoration: none;
border: none;}

.paging{
z-index: 100;
display: none;
position: absolute;
right: 30px; 
top: 20px;
height: 30px;
z-index: 100;
text-align: center;
line-height: 35px;
display: none;}

.paging a{
margin-bottom: 8px;
display: block;
border: 1px solid #060;
background: #696;
padding: 5px;
width: 50px;
height: 10px;
line-height: 10px;
text-decoration: none;
color: #fff;}
	
.paging a.active{
background: #fff;
border: 1px solid #060;
color: #696;}

/* contact form */

#name{
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 0 0;}

#emailform{
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 0 0;}

#subject{
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 0 0;}

#textarea{
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 0 0;}

#submit{
background-color: #fff;
color: #696;
width: 100px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 0 0;}

#submit:hover{
background-color: #696;
color: #fff;}

.contact_slide{
margin-bottom: -20px;}

/* sidebar */

#sidebar{
margin-top: 10px;
width: 220px;}

#sidebar ul li{
display: block;
margin-bottom: 10px;}

#sidebar ul li a{
color: #000;
text-decoration: none;}

#sidebar ul li a{color: #696;}

/* search */

#search{
margin-top: -9px;
border: 1px solid #696;
width: 100%;}

#s{
padding-left: 5px;
width: 168px;
float: left;}

#search input{
line-height: 30px;
height: 30px;
border: none;}

#searchsubmit{float: right;
background-color: #696;
color: #fff;
border-left: 1px solid #fff;
width: 35px;}

#searchsubmit:hover{
color: #696;
background-color: #fff;
border-left: 1px solid #696;
width: 35px;}

/* excerpt */

.excerpt{
padding-top: 20px;
width: 467px;}

.excerpt_image img{
z-index: -1;
border: 1px solid #696;}

/* posts */

#older{text-align: center;}

#older a{
padding: 5px;
border: 1px solid #696;
text-decoration: none;
color: #696;}

#older a:hover{
border: 1px solid #696;
background-color: #696;
color: #fff;}

.storycontent a{
color: #696;
text-decoration: none;}

.storycontent a:hover{color: #000;}

.excerpt_single a{
color: #696;
text-decoration: none;}

.excerpt_single a:hover{color: #000;}

.horizontal{
padding: 0 10px 10px 0;
width: 40%;}

.vertical{
padding: 0 10px 10px 0;
width: 30%;}

.post h4{
text-transform: capitalize;
color: #696;
font-weight: bold;
margin-bottom: 10px;}

.post a{
color: #696;
text-decoration: none;}

.post a:hover{color: #000;}

/* comments */

.respond h3{
margin-bottom: 20px;
margin-top: 20px;
height: 50px;
line-height: 50px;
border-top: 1px solid #696;
border-bottom: 1px solid #696;}

#respond_top{height: 50px;
line-height: 50px;
border-top: 1px solid #696;
border-bottom: 1px solid #696;}

#comments{
height: 50px;
line-height: 50px;}

label{
display: block;
width: 400px;}

#commentform a{
text-decoration: none;
color: #696;}

#commentform a:hover{color: #000;}

#commentform p{margin-top: 20px;}

#comment{
display: block;
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 20px 0;}

#author{
display: block;
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 20px 0;}

#email{
display: block;
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 20px 0;}

#url{
display: block;
width: 400px;
border: 1px solid #696;
padding: 5px;
margin: 5px 0 20px 0;}

#you_can{
width: 400px;
margin: 5px 0 -10px 0;}

ol li h4{
font-weight: bold;
margin: 20px 0 20px 0;}

/* collapse */

#switch{
border: 1px solid #696;
z-index: 200;
position: absolute;
float: left;
margin: 10px;
text-align: center;
line-height: 50px;
height: 50px;
width: 100px;}

#switch a{
color: #696;
display: block;}

#switch a:hover{cursor:pointer;
color: #fff;}