/*
	Site	: www.webfaced.co.uk
	Author	: Dominic Muns
	Company : Webfaced (www.webfaced.co.uk)
*/

* { margin:0; padding:0; }
body { 
	background:#111;
	height:100%;
	font-family: 'Open Sans', trebuchet MS, arial, helvetica, sans-serif;
	letter-spacing:-1px;
	color:#333;
}
img { 
	border:none;
}
h1, h2, h3, h4 {
	margin:0;
	padding:0;
	display:inline;
}
.clear {
	clear:both;
}
#container {
	width:100%;
	background: url('../img/crt.gif') repeat;
	min-height:100% !important;
}
a {
text-decoration:none;
outline: 0;
}
a:hover {
text-decoration:underline;
}


/*   ============================================================================================================   */
/*   =======   Top Menu   =======   */
/*   ============================================================================================================   */

ul#top-menu {
	width:100%;
	height:35px;
	padding:15px 0 0 0;
	margin:0 auto;
	list-style-type: none;
	position:fixed;
	top:0px;
	z-index:9999;
	background: #000;
	text-align:right;
}
#home-icon {
	float:left;
	width:25px;
	height:21px;
	background:url('../img/sprite.png') -19px 0;
	margin-left:10px;
	border:0;
}
ul#top-menu li {
	display:inline;
	position: relative;
	z-index: 9998;
	margin:0px 20px 0px 10px;
	padding:0 26px 0px 0;
	background:url('../img/show.png') no-repeat;
	background-position:right 3px;
	list-style-position: inside; /*Helping IE Bug with background-display? */
}
ul#top-menu li.nodrop {
	background:transparent;
}
ul#top-menu li a {
	font-size:15px;
	font-weight:normal;
	color:#ececec;
	text-decoration:none;
	text-transform: uppercase;
}
ul#top-menu li a:hover { 
	color: #83bf20  !important;
}
ul#top-menu li .sub {
	position: absolute;
	top: 15px;
	left: -10px;
	z-index: 8888;
	padding: 20px 10px 5px 0px;
	display: none;
	border:0;
}
ul#top-menu li .sub-middle {
	position:relative;
	width:200px;
	background: #000;
	z-index: 8888;
	padding: 0px 10px 15px 0px;
}
ul#top-menu li:hover .sub {
	position: absolute;
	display: block;
	z-index: 8888;
}
ul#top-menu li .sub ul {
	margin:0;
	padding:0;
	float: left;
	border:0;
	width:220px;
}
ul#top-menu .sub ul li {
	height: auto;
	width: 185px;
	text-align:left;
	margin:0 0 3px 0;
	padding:5px 0 5px 25px;
	float: left;
	background:transparent;
}
ul#top-menu .sub ul li:hover {
	background:#000;
}
ul#top-menu .sub ul li:hover a {
	color:#83bf20;
}
ul#top-menu .sub ul li h2 {
	padding: 0;
	margin: 0 0 3px 0;
}
ul#top-menu .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 0px 5px 0px 0px;
	display: block;
	text-decoration: none;
	text-transform: UPPERCASE;
	font-weight: normal;
	color: #ececec;
	font-size:12px;
	letter-spacing:0;
}

/*   ============================================================================================================   */
/*   =======   CLIENT LOGOS   =======   */
/*   ============================================================================================================   */

#client-logos {
	height:70px;
	width:650px;
	position:absolute;
	bottom:50px;
	right:0px;
	margin-right:40px;
	text-align:right;
	background:url('../img/sprite.png') 0px -305px;
}

/*   ============================================================================================================   */
/*   =======   RECENT WORK   =======   */
/*   ============================================================================================================   */
  div[rel='projects-container-slide'] { width:400px; height:87%;margin:70px 0 0 0; }
  .projects-container-slide-bar { margin:0;padding:0;width: 10px; background: #333; border-radius: 4px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; }
  .projects-container-slide-drag { background: #83bf20; border-radius: 4px; cursor: pointer; }



#recent-work-overlay-container {
	position: fixed;
	top:0px;
	right:0px;
	margin:0;
	padding:0;
	height:100%;
}
#recent-work-open {
	float:left;
	width:45px;
	height:162px;
	background: url('../img/sprite.png') 0 -138px;
	position:absolute;
	right:0px;
	top:15%;
	z-index:1;
	cursor:pointer;
}
#recent-work-close {
	float:left;
	width:45px;
	height:162px;
	background: url('../img/sprite.png') -44px -138px;
	cursor:pointer;
	position:relative;
	top:15%;
}
#projects-wrapper {
	margin:0;
	padding:0;
	background: #000;
	position:relative;
	z-index:2;
	height:100%;
	float:left;
	overflow:hidden;
}
ul#projects {
	list-style-type:none;
	margin:0;
	padding:0 15px 0 20px;
}
ul#projects li {
	border:0;
	padding:0;
	margin:0 0 20px 0;
}
ul#projects li img {
	border:solid 1px #666;
	float:left;
	margin:0 15px 0 15px;
}
ul#projects li h3 {
	width:160px;
	float:right;
	font-size:18px;
	color:#83bf20;
}
ul#projects li p {
	width:160px;
	float:right;
	clear:right;
	font-size:14px;
	color:#efefef;
}
ul#projects li p a {
	color:#83bf20;
	text-decoration:none;
}




/*   ============================================================================================================   */
/*   =======   PORTFOLIO - LIST   =======   */
/*   ============================================================================================================   */

ul#portfolio-list {
	list-style-type:none !important;
	margin:0 !important;
	padding:0 !important;
}
ul#portfolio-list li {
	width:150px;
	height:250px;
	border:0;
	padding:0;
	margin:0 20px 20px 20px !important;
	float:left;
}
ul#portfolio-list li img {
	display:block;
	margin:0 0 10px 0;
	border: solid 1px #ddd !important;
}
ul#portfolio-list li h3 {
	display:block !important;
	font-size:18px !important;
	color:#83bf20 !important;
}
ul#portfolio-list li p {
	width:160px !important;
	line-height:18px;
	font-size:13px;
	color:#333 !important;
	text-align:left !important;
}
ul#portfolio-list li p a {
	color:#83bf20 !important;

}



/*   ============================================================================================================   */
/*   =======   HOMEPAGE LOGO AND STRAPLINE   =======   */
/*   ============================================================================================================   */

#homepage-titles {
	position:absolute;
	top:50%;
	margin:-200px 0 0 0;
	height:400px;
	left:5%;
	width:550px;
}
a#homepage-logo {
	float:left;
	margin:0px 0 0 25px;
	width:500px;
	height:125px;
	background:url('../img/sprite.png') -118px -182px;
}
ul#homepage-bullets {
	clear:both;
	float:left;
	margin:20px 0 0 25px;
	padding:0;
	list-style-type:none;
}
ul#homepage-bullets li {
	float:left;
	clear:both;
    display:inline;
	margin:10px 0 0 0;
	padding:10px 20px 10px 20px;
	background:#000;
	color:#ececec;
	font-size:30px;
}
ul#homepage-bullets li.green {
	background:#83bf20;
	color:#000;
}
/*   ============================================================================================================   */
/*   =======   PAGE   =======   */
/*   ============================================================================================================   */

#page-container {
	width:900px;
	position:relative;
	top:0px;
	margin:0 auto;
	padding-top:90px;
}
#page {
	width:900px;
	position:relative;
	top:0px;
	margin:0 auto;
	background:#fff;
	padding-bottom:50px;
	min-height:1000px;
}
#page h1 {
	float:left;
	margin:40px 0 20px 50px;
	font-weight:normal;
	letter-spacing:-3px;
	/*text-transform:uppercase;*/
	font-size:45px;
	letter-spacing:-3px !important;
}
a.page-logo {
	float:right;
	margin: 50px 40px 0 0;
	width:186px;
	height:28px;
	background:url('../img/sprite.png') 0 -64px;
}
#page hr {
	clear:both;
	margin:0 0 0 0;
	border-top: solid 1px #ddd;
	border-right: solid 0px #ddd;
	border-bottom: solid 0px #ddd;
	border-left: solid 0px #ddd;
	color:#ccc;
}
#page-left {
	float:left;
	width:580px;
	margin:30px 0 0 50px;
	text-align:justify;
	font-size:14px;
	letter-spacing:0 !important;
	line-height:21px !important;
	border:solid 0px #000;
}
#page-left h2, #page-left h3 {
	display:block;
	margin:20px 0 20px 0;
	padding:0;
	font-size:26px;
	line-height:32px;
	letter-spacing:-1px !important;
	font-weight:normal !important;
}
#page-left h32 {
	display:block;
	margin:20px 0 5px 0;
	padding:0;
	font-size:18px;
	line-height:22px;
	letter-spacing:-1px !important;
}
#page-left p {
	margin:0px 0 25px 0;
}
#page-left a {
	color:#83bf20;
}
#page-left img {
	float:left;
	margin:15px 20px 25px 0;
}
#page-left img.people {
	float:left;
	margin:5px 20px 15px 0;
}
#page-left img.clients {
	float:left;
	margin:15px 5px 0px 0;
}
#page-left img.screenshot {
	float:left;
	width:580px;
	margin:15px 5px 0px 0;
}
#page-left ul {
	list-style-type:square;
	margin: 0px 0 25px 30px;
	padding:0;
	display:inline-block;
}
#page-left ul li {
	font-size:13px;
}
#page-right {
	float:right;
	width:190px;
	height:600px;
	margin:20px 30px 0 0;
}
#page-right ul {
	list-style-type:none !important;
}
p.quote {
	margin:20px 0 0 0;
	padding:10px;
	font-size:15px;
	color:#333;
	background:#fff;
	text-align:right;
}
.open-quote {
	font-family:arial, sans-serif;
	display: inline-block;
	font-size:50px;
	height:12px;
	position:relative;
	top:-15px;
	margin:0 2px 0 0;
}
.close-quote {
	font-family:arial, sans-serif;
	display: inline-block;
	font-size:50px;
	height:12px;
	position:relative;
	top:-10px;
	margin:0 0 0 2px;
}
p.quote .author {
	display:block;
	margin:5px 0 0 0;
	color:#83bf20;
	font-size:12px;
}
.page-right-logos {
	margin:20px 0 0 20px;
}

/*   ============================================================================================================   */
/*   =======   CONTACT FORM   =======   */
/*   ============================================================================================================   */

.contact-form {float:left;width:350px;overflow:hidden;padding:20px 20px 0px 20px;margin:0px 0px 0px 0px;background: #83bf20;}
.contact-form a {font-size:15px;color:#333;font-weight:normal;}
.contact-form-quote {font-size:11px;color:#000;font-weight:normal;line-height:14px;letter-spacing:-1px;}
.contact-form-footer {float:right;width:330px;padding:10px 20px 0px 20px;margin:10px 0px 0px 0px;text-align:left;font-size:12px;color:#333;}
.contact-form-footer td {text-align:left;font-size:12px;color:#333;}
.contact-form-footer h3 {font-size:18px;color:#555;font-weight:normal;text-decoration:none;margin:0;padding:0 0 5px 0;}


/*   ============================================================================================================   */
/*   =======   BOTTOM MENU   =======   */
/*   ============================================================================================================   */

ul#bottom-menu {
	width:100%;
	height:25px;
	padding:6px 0 3px 0;
	margin:0 auto;
	list-style-type: none;
	position:fixed;
	bottom:0px;
	z-index:9999;
	background: #000;
	text-align:right;
}
ul#bottom-menu li {
	display:inline;
	position: relative;
	z-index: 9998;
	margin:0px 20px 0px 10px;
	padding:0 0px 0px 0;
}
ul#bottom-menu li a {
	font-size:14px;
	font-weight:normal;
	color:#ececec;
	text-decoration:none;
	text-transform: uppercase;
}
ul#bottom-menu li a:hover { 
	color: #83bf20  !important;
}
	
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }