/*

  Author: Peter Usborne
  Last Updated: 08/01/10

  CONTENTS ----------
  
	  1.0 GENERAL & RESET
	  2.0 STRUCTURAL & NAVIGATION
	  3.0 BODY CONTENT
		  - 3.1 ABOUT ME
		  - 3.2 GENERAL
		  - 3.2.1 BRANDING ALTERNATIVE
		  - 3.2.2 HOMEPAGE THUMBS
		  - 3.3 MAIN PROJECTS
		  - 3.4 PROJECT IMAGES
		  - 3.5 LOGIN
	  4.0 IMAGE CAROUSEL
		  - 4.1 PAGINATION
		  - 4.2 NEXT & BACK
		  - 4.3 HOMEPAGE CAROUSEL
	  5.0 FOOTER

  -------------------
	

/* 1.0 GENERAL & RESET
---------------------------------------------------------------------- */

body { background:#f0f0f0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#a5aaae; padding:60px 0 0 0; margin:0; border-top:6px solid #fff; }
a,input { outline:none; text-decoration:none; }
#content { margin:0px auto; width:780px; }
.project { float:left; width:990px; border-top:1px solid #ccc; margin:0 0 50px 0; position:relative; }
::selection { background: #ec4885; color:#facfdf; /* Ciao, Safari */ }
::-moz-selection { background: #ec4885; color:#facfdf; /* Bonjour, Firefox */ }


/* 2.0 STRUCTURAL & NAVIGATION
---------------------------------------------------------------------- */

h1#logo { float:left; width:534px; height:44px; margin:0 0 50px 0; padding:0; }
h1#logo a { float:left; width:173px; height:44px; text-indent:-9000px; background:url(../gfx/sprite.gif) no-repeat; background-position:0 0; overflow:hidden;  }
h1#logo a:hover { background-position:0 -190px; }
h2#contact { float:right; width:245px; margin:0 0 50px 0; padding:0; height:44px; overflow:hidden; font-size:12px; font-weight:normal; line-height:17px; color:#A5AAAE; text-align:right; }
h2#contact a { color:#A5AAAE; text-decoration:none; border-bottom:1px dotted #A5AAAE; }
h2#contact a:hover { color:#656B71; }
ul#navigation { float:left; width:200px; list-style:none; margin:30px 0 0 0; padding:0; }
ul#navigation li { float:left; width:200px; margin:0 0 10px 0; padding:0; }
ul#navigation li.about { margin:40px 0 0 0; }
ul#navigation li a { float:left; width:171px; margin:0; padding:0 0 0 9px; font-size:11px;  color:#A5AAAE; text-decoration:none; }
ul#navigation li a:hover { color:#3c4045 } 
ul#navigation li a.active { color:#3c4045 }



/* 3.0 BODY CONTENT
---------------------------------------------------------------------- */

#bodyArea { float:left; width:779px; }
.pocket { float:left; width:779px; padding:0 0 150px 0; border-bottom:6px solid #fff; }
.plainImage { float:left; width:779px; padding:0 0 50px 0; }
.pocket.main { padding:0 0 60px 0; }
.pocket.branding.alt.home { padding:0 0 130px 0; }
.pocket.main.home { padding-bottom:50px; }
.pocket.pro { padding-bottom:25px; }
.img_holder { float:left; width:245px; height:147px; background:url(../gfx/loading.gif) center no-repeat #fff; }

	/* 3.1 ABOUT ME */
	.pocket#aboutMe { margin:30px 0 0 0; }
	.pocket#aboutMe h2 { float:left; color:#656b71; margin:0 0 35px 0; padding:0; font-size:11px; text-transform:uppercase; letter-spacing:1px; width:779px; }
	.pocket#aboutMe p { float:left; width:245px; font-size:12px; line-height:17px; color:#a5aaae; padding:0; margin:0; }
	.pocket#aboutMe p.colLeft { margin-right:22px; }
	.pocket#aboutMe p.colLeft .dark { color:#656B71; }
	.pocket#aboutMe p a {  text-decoration:none; color:#a5aaae; border-bottom:1px dotted #a5aaae; }
	.pocket#aboutMe p a:hover { color:#656B71; border-bottom:1px dotted #656B71; }
	
	/* 3.2 GENERAL */
	.pocket.branding { margin:30px 0 0 0; border-bottom:none; }
	.pocket.branding.alt { padding-bottom:140px; border-bottom:6px solid #fff; }
	.pocket.branding h2 { float:left; color:#656b71; margin:0 0 15px 0; padding:0; font-size:11px; text-transform:uppercase; letter-spacing:1px; width:779px; }
	.pocket.branding ul#brands { float:left; list-style:none; width:779px; padding:0; margin:0; position:relative; }
	.pocket.branding ul#brands li { float:left; width:245px; height:147px; background:#fff; position:relative; padding:0; margin:0 0 22px 0; }
	.pocket.branding ul#brands li .load { float:left; width:245px; height:147px; }
	.pocket.branding ul#brands li .load a { }
	.pocket.branding ul#brands li.gap { margin-right:22px; }
	.pocket.branding ul#brands li a.zoom { float:left; width:245px; height:147px; overflow:hidden; text-indent:-9000px; position:absolute; top:0px; left:0px; }
	.pocket.branding ul#brands li a:hover.zoom { background-position:0 -124px; }
	.closeZoom { position:absolute; width:55px; height:316px; text-indent:-9000px; background:url(../gfx/close.png) top left no-repeat; left:-55px; }
	.pocket.branding ul#brands li#zoomWindow { position:absolute; width:779px; height:316px; background:url(../gfx/loading.gif) center no-repeat #fff; z-index:100; border-top:11px solid #f0f0f0; border-right:11px solid #f0f0f0; top:-11px; left:0; }
	.pocket.branding ul#brands li#zoomWindow a.zoom { background-position:0 -146px; z-index:100; }
	.pocket.branding ul#brands li#zoomWindow a:hover.zoom { background-position:0 -168px; }
	.pocket.branding p { line-height:17px; padding:0; margin:0; }
	#topOne.pocket.branding { margin-top:0; padding:0 0 30px 0; }
	#topOne.pocket.branding h2 { padding-top:5px;}
	#topOne.pocket.branding p.left { float:left; width:484px; padding:20px 30px 20px 20px; background:#fff; margin:5px 0 0 0; color:#656B71; font-size:11px; line-height:17px; }
	#topOne.pocket.branding p.right { float:right; width:205px; padding:20px; background:#fff; margin:5px 0 0 0; color:#a5aaae; font-size:11px; line-height:17px; }
	#topOne.pocket.branding p a { text-decoration:none; color:#656B71; border-bottom:1px dotted #656B71; }
	#topOne.pocket.branding p a:hover { color:#656b71; }
	#topOne.pocket.branding p.right a.visit { display:inline-block; border:none; color:#656b71; margin:10px 0 0 0; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
	#topOne.pocket.branding p.right a:hover.visit { color:#3C4045; }
	.bordertop { border-top:6px solid #fff; padding-top:20px; margin-top:60px!important; }
	
	/* 3.2.1 BRANDING ALTERNATIVE */
	ul#brands li#info { float:right; height:316px; background:none; }
	ul#brands li#info p { float:left; padding:0; margin:0; padding:20px; color:#656B71; font-size:11px; line-height:17px; background:white; }
	ul#brands li#info p a:hover { color:#333; border-color:#333; }
	ul#brands li#info blockquote { float:left; margin:0; padding:0 20px 20px 20px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#a5aaae; font-size:13px; line-height:20px; width:205px; background:#fff; }
	ul#brands li#info p.meta { margin-top:20px; font-style:italic; }
	SPAN#award { float:left; width:35px; height:35px; position:absolute; bottom:0; right:0; z-index:98; text-indent:-9000px; background:url(../gfx/medal.png) no-repeat; }
	
	/* 3.2.2 HOMEPAGE THUMBS *//* Check out that completely unnecessary class targeting!! */
	.pocket.branding.alt.home ul#brands li { height:auto; background:none; } 
	.pocket.branding.alt.home ul#brands li a img, .pocket.branding.alt.pro ul#brands li a img  { border:none; }
	.pocket.branding.alt.home SPAN.title, .pocket.branding.alt.pro SPAN.title { float:left; width:245px; color:#656B71; text-transform:uppercase; font-size:9px; font-weight:bold; letter-spacing:2px; padding:5px 0 2px 0; }
	.pocket.branding.alt.home ul#brands li p, .pocket.branding.alt.pro ul#brands li p { font-size:11px; }
	.pocket.branding.alt.pro { border-bottom:none; }
	
	/* 3.3 MAIN PROJECTS */
	.pocket.main { position:relative; overflow:hidden; border:none; }
	.pocket.main h2 { float:left; color:#656B71; margin:23px 0 9px 0; padding:5px 0 0 0; font-size:11px; text-transform:uppercase; letter-spacing:1px; width:779px; }
	h2 a.arrows { float:left; width:7px; height:7px; overflow:hidden; text-indent:-9000px; border:3px solid #f0f0f0; margin:0; }
	h2 a.goright { background:url(../gfx/sprite.gif) no-repeat; background-position:0 -58px; margin:0 21px 0 0; }
	h2 a:hover.goright { background-position:0 -65px;  }
	h2 a.goleft { background:url(../gfx/sprite.gif) no-repeat; background-position:0 -44px;  }
	h2 a:hover.goleft { background-position:0 -51px;  }
	#topOne.pocket.main h2 { margin-top:0; }
	.pocket p.left,.right { float:left; padding:0; margin:25px 0 0 0; color:#a5aaae; font-size:11px; line-height:17px; }
	.pocket.main p.left { width:484px; padding:20px 30px 20px 20px; background:white; color:#656B71; }
	.pocket.main p.right { float:right; width:205px; padding:20px; background:white; }
	.pocket.main p.left a,.right a, DIV.imageArea p a { text-decoration:none; color:#a5aaae; border-bottom:1px dotted #a5aaae; }
	.pocket.main p a:hover, DIV.imageArea p a:hover { color:#656b71; border-color:#656b71; }
	.pocket.main p.right a.visit { display:inline-block; border:none; color:#656b71; margin:10px 0 0 0; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
	.pocket.main p.right a:hover.visit { color:#3C4045; }
	#videoWindow { float:left; width:671px; height:316px; background:url(../gfx/bloading.gif) center no-repeat #000; padding:0 0 0 108px; }
	#videoWindow a.vidclose { position:absolute; display:inline-block; overflow:hidden; text-indent:-9000px; background:url(../gfx/close_black.png) no-repeat; width:48px; height:35px; top:20px; left:20px; z-index:1000; }
	.rounded { -khtml-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
	#buttonbox { float:left; width:779px; background:#fff; font-family:Arial, Helvetica, sans-serif; text-align:center; padding:30px 0; margin:-10px 0 30px 0; }
	#buttonbox a { display:inline-block; background:red; font-size:13px; font-weight:bold; text-decoration:none; padding:12px 0; width:105px; text-align:center; border:1px solid; color:#fff; }
	#buttonbox a.blue { border-color:#0087af; text-shadow:1px 1px #007fcf; background-color:#0097d7; }
		#buttonbox a:hover.blue { border-color:#006694; text-shadow:1px 1px #006694; background-color:#008bd1; }
	#buttonbox a.green { border-color:#83ad21; text-shadow:1px 1px #63a319; background-color:#9cc53b; }
		#buttonbox a:hover.green { border-color:#629306; text-shadow:1px 1px #629306; background-color:#7cb11c; }

	
	/* 3.4 PROJECT IMAGES */
	DIV.imageArea { float:left; width:779px; margin:0 0 30px 0; position:relative; }
	DIV.imageArea p { float:left; position:absolute; bottom:0; right:0; width:205px; padding:20px; color:#a5aaae; font-size:11px; line-height:17px; margin:0; background:white; }

	/* 3.5 LOGIN */
	.login { height:364px; overflow:hidden; }
	.login p { float:left; width:245px; padding:0; margin:143px 0 0 267px; color:#fff; }
	.login #loginForm { float:left; width:245px; margin:143px 0 0 267px; }
	.login #loginForm input#access { float:left; width:231px; padding:10px 7px 10px 7px; background:#fff; border:none; font-family:"Lucida Grande", Arial, Verdana, sans-serif; color:#656B71; margin:0 0 10px 0; }
	.login #loginForm input#access.error { border:1px solid #F92977; width:229px; padding:9px 7px 9px 7px; }
	#gainAccess { float:left; width:100%; background:#fff; position:absolute; top:0; left:0; padding:0; margin:0; z-index:1000; display:none; }
	#accessForm { margin:20px auto; width:779px; }
	#accessForm #userDetails { float:left; width:245px; }
	#accessForm #userDetails label { float:left; width:245px; margin:0 0 10px 0; padding:0; font-size:11px; }
	#accessForm #userDetails input { float:left; width:229px; padding:10px 7px 10px 7px; border:1px solid #a5aaae; margin:2px 0 0 0; color:#656B71; }
	#accessForm #userDetails input.error { border:1px solid #F92977; }
	#accessForm #userDetails input#reqButton { width:auto; padding:0; border:none; margin:10px 0 10px 0; }
	#accessForm #userDetails a.cancel { float:left; color:#bfc3c7; text-decoration:none; font-size:12px; font-weight:bold; padding:9px 0 9px 0; margin:10px 0 0 10px; }
	#accessForm #userDetails a:hover.cancel { color:#656B71; }
	a#homelink { float:left; margin:-50px 0 50px 0; text-decoration:none; border-bottom:1px dotted #656B71; color:#656B71; }
	a:hover#homelink { color:#333; border-color:#333; }



/* 4.0 IMAGE CAROUSEL
---------------------------------------------------------------------- */

.galleryHolder { float:left; position:relative; width:779px; margin:6px 0 0 0; padding:0; background:#fff; padding:0px; }
ul.gallery { position:absolute; float:left; width:4000px; height:364px; list-style:none; padding:0; margin:0; }
ul.gallery li { position:relative; float:left; width:779px; height:364px; margin:0; background:#fff; padding:0px; }

	/* 4.1 PAGINATION • • 0 • */
	DIV.carousel-pagination { position:absolute; top:-29px; right:0; padding:0; margin:0; z-index:200; }
	DIV.carousel-pagination p { padding:0; margin:0; }
	DIV.carousel-pagination p a { float:left; width:10px; height:10px; background:url(../gfx/sprite.gif) no-repeat; background-position:0 -82px; overflow:hidden; text-indent:-9000px; cursor:pointer; margin:0 2px 0 0; padding:0; }
	DIV.carousel-pagination p a:hover { background-position:0 -92px; }
	DIV.carousel-pagination p a.active { background-position:0 -72px; }
	
	/* 4.2 NEXT & BACK */
	SPAN.carousel-previous, SPAN.carousel-next { float:left; position:absolute; overflow:hidden; text-indent:-9000px; cursor:pointer; text-decoration:none; margin:0; padding:0; }
	SPAN.carousel-next { width:719px; z-index:100; top:30px; left:30px; height:314px; }
	SPAN.carousel-previous { display:none; }
	
	/* 4.3 HOMEPAGE CAROUSEL */
	.home SPAN.carousel-next { display:none;}
	.home ul.gallery li img { border:none; }
	
	
/* 5.0 FOOTER
---------------------------------------------------------------------- */

ul#footer { float:left; width:779px; list-style:none; padding:0 0 80px 0; margin:0; }
ul#footer li { float:left; width:245px; margin:0 22px 5px 0; }
ul#footer li.homelink { width:779px; border-bottom:3px solid #fff; margin:0 0 30px 0; padding:0 0 10px 0; }
ul#footer li.copyJunk { width:779px; margin:30px 0 0 0; font-size:11px; }
ul#footer li.homelink a { font-size:12px; color:#656B71; } ul#footer li.homelink a:hover { color:#333; }
ul#footer li.wrap { margin-right:0; }
ul#footer li a { float:left; width:245px; font-size:11px; color:#A5AAAE; }
ul#footer li a.active { color:#656B71; }
ul#footer li a:hover { color:#656B71; }