/*
Theme Name: peterandthecat
Theme URI:www.peterandthecat.co.nz
Description:CSS for peterandthecat
Version: 2.0
Author:Peter
Author URI: www.peterandthecat.co.nz
*/


/* style sheet for two column template */
/* this template has a full screen background image, a translucent background to the content, a fluid layout, two columns and horizontal navigation*/

/* global settings for the whole document as well any body elements */
html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

body {
	background-color:#f2f2f2;
	background-image:url(images/greypattern.jpg);
	font-family:Verdana, sans-serif;
	font-size:1em;
	line-height: 125%;
	color:#403e3f;
}

em {
	font-style: italic;
}


a {
	text-decoration: none;
	color:maroon;
	border:none;
}

a img{
	border:none
}

/* fix background in place and make it fill the screen and be fully resizable*/
#background img{
	margin:0;
	padding:0;
	position:absolute;
	width:100%;
	min-width: 1024px;
	height:100%;
	background-attachment:fixed;
	z-index: -1;
}



/*places the scrollbar on the edge of the browser window*/
#scroller {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	overflow:auto;
}
#outerwrapper{
 	width:900px;
 	height:auto;
 	margin:auto;
 	border:none;
 	padding:0;
 	overflow:auto;
 }


/*contains all the content*/
#contentwrapper{
	position:relative;
	top:0;
	width:850px;
	height: auto;
	min-height: 700px;
	margin:0;
	border:none;
	padding:0;
	float:left;
}

/*sets a translucent colour behind the content that scrolls with it and matches its size*/
#translucentlayer {
	position:absolute;
	margin:0;
	border:none;
	padding:0;
	width: 850px;
	height:98%;
	background-color:white;
	opacity:0.75;filter:alpha(opacity=75);
	z-index: -1;	
}

.logo{
	width:15%;
	height:auto;
	margin-left:1px;
}

.title{
	width:50%;
	height:auto;
}

/*settings for navigation tabs*/
#nav{
	width:auto;
	margin:0;
	border:none;
	padding:0;
	float:left;	
}

#nav ul{
	list-style:none;
	margin:0;
	/*border:1px solid red;*/
	padding:0;
}


/* the background color and tab images*/
.home a, .gallery a, .contact a, .blog a, .sketches a{
	display:block;
	width:25px;
	height:100px;
	text-indent: -1000em;
	padding:0;
	border:none;
	margin-bottom:2px;
}

.home a{
	background-image:url(navigation/homegreen.png);
	background-repeat:no-repeat;
	display:block;
}

.home a:hover{
	background-image:url(navigation/home.png);
	background-repeat:no-repeat;
	display:block;
	width:45px;
	height:180px;
}


.gallery a{
	background-image:url(navigation/gallerygreen.png);
	display:block;
}

.gallery a:hover{
	background-image:url(navigation/gallery.png);
	background-repeat:no-repeat;
	display:block;
	width:45px;
	height:180px;
}

.contact a{
	background-image:url(navigation/contactgreen.png);
	background-repeat:no-repeat;
	display:block;
}

.contact a:hover{
	background-image:url(navigation/contact.png);
	background-repeat:no-repeat;
	display:block;
	width:45px;
	height:180px;
}

.blog a{
	background-image:url(navigation/bloggreen.png);
	background-repeat:no-repeat;
	display:block;
}

.blog a:hover{
	background-image:url(navigation/blog.png);
	background-repeat:no-repeat;
	display:block;
	width:45px;
	height:180px;
}

.sketches a{
	background-image:url(navigation/sketchesgreen.png);
	background-repeat:no-repeat;
	display:block;
}

.sketches a:hover{
	background-image:url(navigation/sketches.png);
	background-repeat:no-repeat;
	display:block;
	width:45px;
	height:180px;
}





/* floats are cleared so the footer goes across the bottom below the two columns. remove the clear and the footer will go below the content or the sidebar to form part of that column. remove the clear and the footer will make a third column as long with a flexible width (or set a width but make sure all three columns are less than or equal to 100% including any margins,padding, and borders*/
#footer {
	margin:5%;
	border:none;
	padding-bottom:55px;
	clear:both;
}

#footer ul{
	list-style:none;
}

/*styles for individual page templates follow*/

/*contact page, gallery page*/
/*the posts or main content, floated left to form two columns. must have width set for this to work*/
#content{
	width:750px;
	height:auto;
	margin:0;
	border:none;
	padding:50px;
	float:left;
}

#content h2{
	margin-top:0;
	border:none;
	padding:0;
	font-weight:normal;
}

.clearspacer{
	min-height:100px;
	border:0;
}

.linespacer{
	border-top:1px solid #a2bbab;
	margin-top:200px;
	margin-bottom:0px;
	
}


.textbox {
	display:block;
	width:750px;
	height:auto;
	margin:0;
	border:none;
	padding:0;
	overflow:hidden;
	font-size: 1.5em;
	line-height:2em;
}

.textbox h2 {
	font-weight: normal;
}

/* this is the image gallery*/
#fullsize{
	margin:0;
	border:none;
	padding:0;
}

#fullsize, h1{
	}

/* the blog*/
#blog{
	width:500px;
	height:auto;
	margin-top:50px;
	border:none;
	padding:0;
	font-size: 0.8em;
	line-height:1.5em;
}

#blog img{
	width:400px;
	height:auto;
	margin:0 30px;
	border:20px solid white;
	padding:0;
}

#sidebar1 {
	width:auto ;
	height:auto;
	min-height:300px;
	float:right;
	margin:50px 0 0 0;
	border:none;
	padding 0;
	font-size:0.8em;
	line-height:1.5em;
}

#feedback {
	font-size:1em;
	font-weight:normal;
	line-height: 0.8em; 
}

#feedback li{
	list-style: none;
	list-style-position: inside; 
}

#feedback ol{
	margin-left:0;
	margin-bottom:100px;
	padding-left:0;
}

#feedback hr{
	border-top:1px solid #a2bbab;
	border-bottom:none;		
}

#feedback .meta{
	font-size:0.5em;
 }
 
 #feedback a{
 	font-size:2em;
 }
 
 #feedback img{
 	float:left;
 	margin-right:25px;
 }
 
 
 #commentform p {
 	margin:0;
 }
 
 #comment {
 margin-top:1em;
 margin-bottom: :1em;
}