/* Title: Geroge Boyle Architect*/
/* Author: Romanp.com */
/* Date: April 08, 2012 */
/* Version: Mobile Beta */

/* TABLE OF CONTENTS  */
/* 1. Structure & Layout */
/* 2. Navigation */
/* 3. Background Images */
/* 4. Active Links */
/* 5. Content */
/* 6. Background Images */


/************************ 
1. Structure & Layout 
************************/
*{
	margin: 0;
	padding: 0;
}

body {
	margin: 0 auto 0 auto;
	background-color: #000;
	color: #666;
	font-family:"Asap", sans-serif;
	font-weight: 400;
}

@media screen and (max-width: 320px)
{
	body {
		width: 320px;
	}
}
/************************ 
2. Navigation 
************************/

#nav {
	width: 100%;
	margin: 0 auto 0 auto;
	font-size: 2em;
	font-weight: bold;
	text-shadow:1px 1px 1px #000;
}

#nav ul {
	list-style: none;
	width:100%;
	display:inline-block;
}

#nav li {
	position: relative;
	width: 16.5%;
	float: left;
	border-right: 1px transparent solid;
	border-bottom: 1px transparent solid;
	text-align: center;
	text-transform:uppercase;
	color:#666666;
}

@media screen and (max-width: 320px)
{
	#nav li{
		width: 51px;
		height: 51px;
		line-height:51px;
	}
}

a{
	text-decoration:underline;
	color: #999;
}


#nav a{
	position: relative;
	/*top: 20px;*/
	display: block;
	min-height: 100%;
	text-decoration: none;
	color: #FFF;
	background-color: transparent;
	z-index:100;
	/*opacity: .4;*/
	line-height:77px;
	opacity:0;
}

#nav a:active{
	/*opacity: 1;*/
}

@media screen and (max-width: 320px)
{
	#nav a{
		position: relative;
		/*top: 8px;*/
		line-height:52px;
	}
}

#nav span{
	position: absolute;
	top: 0;
	left: 0;
	z-index:1;
	display: block;
	width: 100%;
	height: 100%;
	/*opacity: .3;*/
	opacity:0;
}



/************************ 
3. Background Images 
************************/


#nav span{
	background-image:url(../images/frontend/mobile_nav_bg.jpg);
	background-position:center;
}


/************************ 
4. Active links 
************************/


/************************ 
5. Content 
************************/


#project h1 {
	padding:20px 20px 0 20px;
	letter-spacing: .1em;
	font-size: 1.5em;
	font-weight:400;
}

#project h1 b,
#project h1 strong{
	color: #FFF;
	font-weight:400;
}

#project p {
	padding: 20px;
	font-size: .8em;
	line-height: 1.7em;
}

#project img{
	width:100%;
	height: auto;
	padding: 5px 0 5px 0;
}

@media screen and (max-width: 320px)
{
	#project img{
		max-width: 316px;
	}
}

.top-of-page{
	padding: 0;
}

.button-top-of-page {
	padding: 12px;
	background-color: #333;
	color: #FFF;
	text-decoration:none;
}

/************************ 
6. Footer 
************************/


#footer,
.returns{
	font-size:.8em;
}

#footer a,
.returns a{
	text-decoration:none;
	color: #999;
}

#footer a:active,
.returns a:active{
	color: #FFF;
}

#footer ul,
.returns{
	clear: both;
	list-style: none; 
	line-height: 28px;
	padding: 15px 0 20px 30px;
	text-shadow:1px 1px 1px #333;
}

@media screen and (max-width: 320px)
{
	#footer ul,
	.returns{
		padding: 10px 0 20px 20px;
	}
}

#footer li,
.returns li{
	padding: 0 0 0 25px;
}


.address{
	background-image:url(../images/frontend/address.png);
	background-repeat:no-repeat;
	background-position: 0 6px;
}
.phone{
	background-image:url(../images/frontend/phone.png);
	background-repeat:no-repeat;
	background-position: 0 6px;
}
.email{
	background-image:url(../images/frontend/email.png);
	background-repeat:no-repeat;
	background-position: 0 6px;
}
.home{
	background-image:url(../images/frontend/home.png);
	background-repeat:no-repeat;
	background-position: 0px 6px;
}
.top{
	background-image:url(../images/frontend/top.png);
	background-repeat:no-repeat;
	background-position: 0px 12px;
}	
.world{
	background-image:url(../images/frontend/location.png);
	background-repeat:no-repeat;
	background-position: 0px 6px;
}