/*  
Theme Name: Prety Hackabout
Theme URI: http://pretty.co.uk/
Description: based on kubrick.
Version: 0.1
Author: Toby Stokes
Author URI: http://pretty.co.uk/	

	*** REGARDING IMAGES ***
	All CSS that involves the use of images, can be found in the 'index.php' file.
	This is to ease installation inside subdirectories of a server.

*/



/* Begin Typography & Colors */


#page {

	}

#header {
 padding:0px;
	}


small {
	font-size: 0.9em;
	line-height: 1.5em;
	}



h1 {
	font-size: 4em;
	}


h2 {
	font-size: 1.6em;

	}


h3 {
	font-size: 1.3em;
	}


.entry p a:visited {
	color: #b85b5a;
	}


	
code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

a{
	font-weight:bold;
	color:#000;
}

p
{
    font-size:12px;
}
/* End Typography & Colors */



/* Begin Structure */
body {
	font-size: 10px;
	font-family: Arial,Helvetica,  Sans-Serif;
	background-color: #fff;
	color: #333;
	text-align: center;
	padding:0px;
	margin:20px 0px 20px 20px;
	}

#page {
    background-color: white;
	text-align: left;
	width:610px;
    padding:0px;
	margin:0px auto;
	
	}
	
#header {
	color: #333;
	height: 145px;
	margin:0px 0px 20px 0px;
	padding-left: 0px;
	text-align: left;
}
	
#header img	{
	vertical-align:bottom;
	padding-right:20px;
}

#header #logo	{
	margin-bottom: 5px; /* basline compensation */
}

#leftcolumn {
	text-align:right;
	float: left;
	width: 380px;
	background: #fff;
}
.rightcolumn {
	padding: 0;
	width: 340px;
	float:left;
}
#staticleft{
	float:left;
	padding: 0;	
	width:340px; 	
}

#staticright{
	float:left;
	width:243px; 
}

/*narrowcolumn = rightcolumn*/

/* Modules*/

#portfolio_outer
{
	
}

#borderwrapper
{
    /* border-bottom:1px white solid; */
    margin-bottom: 2px;
}
/* IE hack */
html>/**/body  #borderwrapper { margin-bottom: 1px; }

#portfoliowrapper
{
    height:347px;
	width:582px;
    overflow:hidden;   
}
#portfolio{
	position:relative;
	height:322px;
	width:542px;

}
#portfolioimage{
	position:absolute;
	top:20px;
	left:0px;
}
.portfoliodetailsimage{
	position:absolute;
	top:0px;
	left:0px;
}
#portfolionav{
	position:absolute;

	z-index:3;
}

#portfoliolink {

}

.portfoliodetail {
	position:relative;
	height:302px;
	width:542px;
	margin: 0 1px 1px 0;
	border: 20px black solid;
	background: #fff url(images/spinner.gif) no-repeat 50% 50%;
	padding:0px;
	text-align:left;
}

img.arrowforward, img.arrowback {
    position:absolute;
    top:250px;
	margin-top:0px;

	/*
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	*/
	}
	
img.arrowback
{
	left:0px;
	float:left;
}

img.arrowforward
{
	right:0px;
}


.projectinfo {
    position:absolute;
    top:250px;
    left:80px;
	width:390px;
	float:left;
	clear:both;
	font-size:17px;
	line-height:30px;
    z-index:20;
	/* opacity: 0.8; */
}

a:hover img.arrowforward, a:hover img.arrowback {
	opacity: 1;
	}

div.projectinfo span {
	background:#000;
	color:#fff;
	margin:0;
	line-height:21px;
	padding:0px 10px 0px 4px;
	}

.projectinfo a span {
    font-weight:normal;
    text-decoration:none;
	color:#fff;	
}

.projectinfo a:hover span {
	background:#ff0000;
}
.projectinfo a
{
	color:#fff;
}


#loading
{
    position:absolute;
    top:30px;
    right:30px;
    display:none;
}

#loading span{
	background:#000;
	color:#fff;
	margin-bottom:1px;
	height:19px;
	padding:1px 10px 1px 4px;
}

.loadbar
{
    position:absolute;
    background:#000;
    width:379px;
    height:19px;
    opacity: 0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
}

#loadbar1
{
    top:251px;
    left:80px;
    z-index:100;
}

#loadbar2
{
 top:272px;
 left:80px;
 z-index:100;
}

#aboutus{
	height:215px;	
}

#servicesandskills{
	height:auto;	
	zoom:1;
}

#getintouch{
	height:215px;
}

#ourclients{
	height:auto;
	zoom:1;
}

#count
{
    position:absolute;
    top:294px;
    left:508px;
    font-size:10px;
    font-weight:bold;
}

.crumb
{
   background:#000;
   width:582px;   
   color:#fff;
   font-size:14px;
   margin-bottom:1px;
   position:relative;
}

.crumb div
{
   padding:10px 0px 10px 20px;
   width:auto;
}

.crumb div.loader
{
   position:absolute;
   background:#ff0000;
   top:0px;
   left:270px;
   width:0px;
   height:40px;
   padding:0px;
}

.crumb a
{
    color:#fff;
    font-weight:normal;
}
    
/*end modules */

.fullwidth {
	
	width: 542px;	
}

.post 
{
    position:relative;
	margin: 0 1px 1px 0;
	border: 20px black solid;
	border-top: 6px black solid;
	background: #fff;
	height:auto;
    overflow: hidden; 
	padding:0px;	
	text-align:left;
	
	}
	
.post h2 {
	background: black;
	color: white;
	margin: 0;
	font-size: 1.3em;
	height: 15px;
	margin-bottom:6px;
	padding-bottom: 5px;
	/* margin-top: -10px; */
	}

.post h2 a {
	color: white;
	font-weight:bold;
	padding-right: 30px;
	padding-bottom: 10px;
	text-decoration:none;

	}
	
.post h2 a:hover {	
	text-decoration:underline;
}

.post h2 span {
	color: white;
	font-weight:bold;
	padding-right: 30px;
	padding-bottom: 10px;	
	}
	
.post p{
}
.post p{
	margin:0px 5px 1em 7px;
}


.post h4, .post small  {
	padding: 0;
	}

.post a{
	text-decoration:underline;
	color:#000;
}

.post ul{
	float:left;
	margin:0px 10px 0px 5px;
	padding:0px;
}

.post li {
	font-size:12px;
	list-style-type: none;
	padding-left:2px;
	margin-bottom:8px;
	margin-left:0px;
	line-height:12px;
}

#servicesandskills ul{
	width:127px;


}

#ourclients ul{
	width:165px;


}

.post div.entry{
	display:inline-block;
	height:auto;
 	margin:5px 9px 10px 9px;
}

.nav {
	text-align: right;
	background: black;
	color: #FFF;
	padding: 5px 0 0 0;
	height: 10px;
	overflow: hidden;
	font-size: 10px;
	line-height: 10px;
}

.nav a{
	color:#fff;
	text-decoration:none;
}
.nav a:hover{
	color:#fff;
}
.nav a:visited{
	color:#fff;
}

/*
.imagepost{
	white-space: ignore;
}

.imagepost p{
	margin:0px;
}

.imagepost img{
	margin:0px;
	padding:0px;
	border:1px solid #fff;
}

.imagepost {
	margin: 0 1px 1px 0;
	border: 10px black solid;
	background: #fff;
	height:auto;
	width:auto;
	padding:0px;
	}
	
.imagepost h2 {
	background: black;
	color: white;
	margin: 0;
	font-size: 1em;
	height: 20px;
	}

.imagepost h2 a {
	color: white;
	padding-right: 30px;
	padding-bottom: 10px;
	}
*/

a.newer{
	display:none;
	float: right;
}

a.older {
	float: left;
}

#footer {
	padding: 0 0 0 1px;
	margin: 0;
	width: 880px;
	
	clear: both;
	}

#footer div {
	margin: 0;
	float:left;
	}
	
#footeraddress{

}


#footerpdf{
	width:340px;
	padding-left:20px;
}

#footerpdf img{
	/* float:left; */
}

#poweredby{
	clear:both;
	margin-top:13px
}

address {
	font-style: normal;
}

address a {
	font-weight:normal;
}

.copy {
	margin-top:-5px;

}

#errormessage p {
	font-size: 17px;
	font-weight: bold;
}

/* End Structure */




/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img {
	border:1px solid #fff;
}
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 0px;
	margin: 0 0 0 0;
	}

.alignright {
	float: right;
	}
	

/* End Images */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */