/*****************
**font-face rules
**Usage: h1, h2
**Fonts used: "Creampuff"
**Licenses: http://www.fontsquirrel.com/fonts/Creampuff
*****************/
@font-face{
	font-family:"Creampuff";
	src:url(../fonts/Creampuff.eot);
}
@font-face{
	font-family:"Creampuff";
	src:url(../fonts/Creampuff.ttf) format("truetype");
}
/*****************
** /font-face rules
*****************/

body{
	background:url(../images/torn.jpg) 0px 60px repeat-x;
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 20px;
	color:#333;
}

a{
	color:#da3a3a;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

/* Site Heading
*****************/
#banner{
	width:900px;
	height:342px;
	margin:69px auto 0px;
}

#banner img{
	margin-left:108px;
}

h1, h2{
	font-family:Creampuff;
	font-size:48px;
	line-height:60px;
	color:#da3a3a;
	position:absolute;
	top:180px;
	left:460px;
	text-shadow:rgba(0,0,0,.3)-1px 1px 2px,
				rgba(0,0,0,.5)1px -1px 1px;
}

h2{
	top:240px;
}

h3{
	font-size:18px;
	font-weight:bold;
	margin:20px 0px;
}

h3#workHeading{
	margin-bottom:0px;
}

/* Site Main
*****************/
#wrapper{
	width:900px;
	margin:30px auto;	
}

#main{
	width:590px;
	padding-left:10px;
	float:left;
}

#about{
	width:590px;
}

.workExample{
	margin-top:20px;
	width:280px;
}

.workExample:nth-child(even){
	float:left;
}

.workExample:nth-child(odd){
	float:right;
}

.workExample img{
	border:1px solid rgb(200,200,200);
	padding:4px;
	background-color:#fff;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:-1px 1px 3px rgba(126,126,126,0.75);
	-moz-box-shadow:-1px 1px 3px rgba(126,126,126,0.75);
	box-shadow:-1px 1px 3px rgba(126,126,126,0.75);
}

.workExample a:hover{
	text-decoration:none;
}

/* Hover slide effect:
** -webkit-transtion doesn't play nicely with display:none/block.
** width:0px is used to combat that and padding is also altered so the width can actually be 0px.
** overflow:hidden is used to stop text overflowing (no, seriously!) the 0px width span and allowing the :hover state to be activated from outwith the image area.
** also, IE doesn't get on with rgba but IE7 seems to want to get on with it when two background properties are defined. 
** eg. for background:rgb();background:rgba(); IE7 would ignore the first background property (rgb) but run off crying at the sight of the second (rgba).
** so I've used a transparent png as a fallback instead of a solid colour.
*****************/
.workExample a span{
	width:0px;
	height:110px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:0px;
	padding-right:0px;
	position:absolute;
	top:5px;
	right:5px;
	overflow:hidden;
	color:#fff;
	background:url(../images/ieBlack.png);
	background:rgba(0,0,0,0.75);
	opacity:0;
	/*CSS3*/
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	-webkit-box-shadow:-1px 0px 5px rgba(0,0,0,0.5);
	-moz-box-shadow:-1px 0px 5px rgba(0,0,0,0.5);
	box-shadow:-1px 0px 5px rgba(0,0,0,0.5);
	-webkit-transition:opacity 0.06s ease-in,
					width 0.09s ease-in;			
}

.workExample a:hover span{
	opacity:1;
	width:180px;
	padding-left:10px;
	padding-right:10px;
}

#contactDetails{
	width:290px;
	float:right;
}

#contactDetails p{
	padding:10px 0px 10px 20px;
	background:url(../images/divider.png) left bottom no-repeat;
}

#contactDetails p #email{
	display:block;
	margin:10px 0px;
}

#contactDetails h3{
	margin:0px;
	padding:0px 0px 10px 20px;
	background:url(../images/divider.png) left bottom no-repeat;
}

.article p+p{
	margin:20px 0px;
}

img.socialMediaIcon{
	margin:4px 10px 4px 0px;
	float:left;
}

br.clear {clear:both; display:block; height:1px; margin:-1px 0 0 0;}
div, ul, li {position:relative}