/*
-----------------------------------------------
Version:  2.0
Albertlo.co.uk portfolio 2009
Author:   Albert Lo
Website: albertlo.com
----------------------------------------------- */


/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

html, body {
	font: 85% Helvetica, Arial, Sans-Serif; /* renders 11px */ 
	line-height: 1.5em;
	text-align: left;
	background: #fff url(../images/body_bg.jpg) no-repeat;
	}

img {border: none;} /* default all images borders set to none */

.hide {display: none;} /* hide class */

p {margin: 1em 0 1em 0;}

strong {font-weight: bold;}

a[class ="newBrowser"] {
	padding: 7px 15px 0 0;
	background: transparent url(../images/icon_external.gif) right no-repeat;
	}

.more {
	background: transparent url(../images/bullet.gif) 0 2px no-repeat; 
	padding-left: 10px;
	}	
		
a:link, a:visited, a:active {color: #5089b1; text-decoration: none;} /* generic site links */
a:hover {color: #c21e9e; text-decoration: none;}

/*  text styles */
h1 {font-size: 197%;}  /* displayed at 26px */
h2 {font-size: 146.5%; color: #c21e9e;}  /* displayed at 19px */
h3 {font-size: 116%;}  /* displayed at 15px */
h4 {font-size: 93%;}  /* displayed at 12px */

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/

#twitters { 
	float: left;
	background: #000 url(../images/twitter.gif) 10px no-repeat;	
	padding: 15px 10px 8px 100px;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 93%;
	/* min-height: 22px; */
	color: #fff;
	font-weight: bold;
	width: 349px;
	}

	#twitters a.twitterTime {color: #a4f1c7;}       
	#twitters a:hover {color: #c21e9e;}                                                           
						
/* -----------------------------------*/
/* ------>>> PAGE STRUCTURE <<<-------*/
/* -----------------------------------*/

#container {
	background-color: #000;
	width: 960px;
	margin: 0 auto;
	margin-top: 30px;
	}
	
	#containerContent {
		background: #fff url(../images/mainBg.jpg) bottom left no-repeat;
		float: left;
		}	
		
#header {
	background: #fff url(../images/header.jpg) no-repeat;
	float: left;
	height: 290px;
	width: 960px;
	overflow: hidden;
	}

#sideContent { 
	padding: 10px;
	width: 169px;
	float: left;
	overflow: hidden;
	}
	
	#sideContent li {margin-top: 10px;}

#primaryContent { 
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	margin-bottom: 50px;
	float: left;
	margin-right: 30px;
	width: 741px;
	}
		
#footer {
	position: relative;
	width: 960px;
	margin: 0 auto;
	height: 326px;
	clear: both;
	background: #000 url(../images/footer_bg.jpg) 0 0 no-repeat;
	color: #92918d;
	overflow: hidden;
	}

/* Footer information */
#footer_info {
	width: 950px;
	margin: 0 auto;
	background: #384140 url(../images/mt.gif) 820px 15px no-repeat;
	text-align: left;
	padding: 15px 0 0 10px;
	min-height: 50px;
	position: relative;
	overflow: hidden;
	}
		
	#footer_info ul {font-size: 85%; overflow: hidden; width: auto;}
	
		#footer_info li {display: inline;}

			#footer_info li a {
				color: #b9d0e0;
				text-decoration: none;
				float: left;
				line-height: 1em;
				padding: 0 10px 0 10px;
				border-left: 1px solid #92918d;
				}
							
				#footer_info li a:hover {color: #118cca;}
							
			#footer_info p {
				color: #7a7976;
				font-size: 9px;
				line-height: 2em;
				}
	
				#footer_info p a {color: #b9d0e0; text-decoration: none;}
					#footer_info p a:hover {color: #118cca;}
						#footer_info .first {border-left: medium none; padding-left: 0;}
						#footer_info .end {border-left: medium none; padding-left: 0;}
						#footer_info a#rss {background: url(../images/rss.gif) no-repeat 100% 0; padding-right: 11px;}
					
/* Footer individual columns */
.footerSection {
	margin-left: 10px;
	float: left;
	width: 32%;
	display: inline; /* Double Margin Bug Fix IE6 */
	}
					
/* Footer back to top link */
a.top-btn {
	margin-top: -20px;
	position: relative;
	left: 94%;
	display: block;
	width: 24px;
	text-indent: -3000px;
	background: url(../images/top.gif) no-repeat;
	}

	a.top-btn:hover { background: url(../images/top_hover.gif) no-repeat; text-decoration: none;}


/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/

#mainNav {
	float: right;
	margin: 13px 30px 0 0;
	font-size: 1.2em;
	font-weight: bold;
	}

	#mainNav li {display: inline;}
	
	#mainNav a {
		color: #fff;
		padding: 5px 13px 5px 13px;
		text-decoration: none;
		outline: none;
		}
		
		#mainNav a:hover, #mainNav a.selected {
			color: #000;
			background-color: #fff;
			text-decoration: none;
			outline: none;
			}

/* Underlines first letter in navigation when rolled-over */
.accesskey {
	border-bottom: 1px solid #fff;
	text-decoration: none;
	}

/* Hidden accessibility navigation */
.navExtra{
	position: absolute;
	left: 0;
	top: -500px;
	width: 1px; 
	height: 1px; 
	overflow: hidden; 
	}


/* -----------------------------------*/
/* ------->>> FEATURED WORK <<<-------*/
/* -----------------------------------*/

.featureSection, .featureSection_new {
	background: url(../images/boundingBox.png) 7px 97px no-repeat;
	float: left;
	margin-bottom: 30px;
	padding: 15px;
	width: 213px;
	position: relative;
	}

	.featureSection_new span {
		z-index: 2;
		width: 52px;
		height: 51px;
		display: block;
		position: absolute;
		top: 105px;
		left: 15px;
		background: url(../images/new.png) no-repeat;
		}

.recentPosts {
	float: left;
	padding: 15px 15px 0 15px;
	width: 213px;
	position: relative;
	margin: 0 0 -10px 0;
	}
		
/*preload classes*/ 
.svw {margin: 10px 0 47px 0; width: 212px; height: 297px;} 
	.svw ul {position: relative; left: -999em;} 

/*core classes*/ 
.stripViewer {  
	position: relative; 
	overflow: hidden;  
	margin: 10px 0 10px 0; 
	} 

	.stripViewer ul { /* this is your UL of images */ 
		position: relative; 
		left: 0; 
		top: 0; 
		width: 1%; 
		list-style-type: none; 
		}
		 
		.stripViewer ul li {float: left;}

.stripTransmitter {overflow: auto; width: 1%; }
	.stripTransmitter ul { position: relative; list-style-type: none;} 

		.stripTransmitter ul li{ 
			width: 20px; 
			float: left; 
			margin: 5px 1px 10px 0; 
			}
	 
	.stripTransmitter a { 
		text-align: center; 
		line-height: 22px; 
		background: #5089b1; 
		color: #fff; 
		text-decoration: none; 
		display: block; 
		} 

		.stripTransmitter a:hover {background: #000; color: #fff;}

		.stripTransmitter a.current {
			background: #b5cddd; 
			color: #000;
			font-weight: bold;
			}

.moreInfo {
	position: absolute;
	display: block;
	height: 19px;
	z-index: 2;
	margin: 288px 0 0 93px;
	overflow: hidden;
	}

a.srollover {
	display: block;
	width: 119px;
	height: 19px;
	background: url(../images/more_info.gif) 0 0 no-repeat;
	text-decoration: none;
	text-indent: -5000px;
	}

    a:hover.srollover {background-position: -119px 0;}

.anyClass li {
	overflow: hidden;
	float: left;
	width: 300px;
	height: 210px;	
	}

	.prev, .next {
	  width: 9px;
	  height: 7px;
	  margin: 10px 10px 0 0;
	  padding: 0;
	  border: 0;
	  text-indent: -1000em;
	  cursor: pointer; /* hand-shaped cursor */
	}

	.prev {background: transparent url(../images/backB.gif) no-repeat bottom;}
	.next {background: transparent url(../images/forwardB.gif) no-repeat bottom;}
	
 
.work_nav {margin: 0;}

	.work_nav ul{
		float: right;
		width: 100%;
		margin: 5px 0 35px 0;
		list-style-type: none;
		line-height: 20px;
		font-size: 93%;
		}

	.work_nav li {float: left; list-style-type: none;}

	.work_nav a {
		border-left: 1px solid #C8C5BB;
		display: block;
		padding: 5px 0px 5px 10px;
		width: 170px;
		}

		.work_nav a:link,.work_nav a:visited  {
			border-left: 1px solid #C8C5BB;
			text-decoration: none;
			font-weight: bold;
			}

		.work_nav a:hover  {
			border-left: 1px solid #9D9B93;
			text-decoration: none;
			color: #c21e9e;
			font-weight: bold;
			padding: 5px 0px 5px 10px;
			}

		.work_nav a:active, .work_nav a.selected  {
			border-left: 1px solid #9D9B93;
			text-decoration: none;
			color: #000;
			font-weight: bold;
			}

			.work_nav a:link span,.work_nav a:visited span  {
				border-left: none;
				text-decoration: none;
				color: #7C7B79;
				font-weight: normal;
				font-size: 93%;
				}

				.work_nav a:hover span{
					border-left: none;
					text-decoration: none;
					color: #5A5A58;
					font-weight: normal;
					font-size: 93%;
					}


/* -----------------------------------*/
/* ----------->>> LINKS <<<-----------*/
/* -----------------------------------*/

#sideContent a{font-size: 131%; text-decoration: none;}

#footer a:link {color: #b9d0e0; text-decoration: none;}
#footer a:active {color: #b9d0e0; text-decoration: none;}
#footer a:visited {color: #b9d0e0; text-decoration: none;}
#footer a:hover {color: #118cca; text-decoration: none;}
										
/* -----------------------------------*/
/* ------------>>> MISC <<<-----------*/
/* -----------------------------------*/

div.hr {background: #F8F8F1 url(../images/footer_detail.gif) repeat-x; height: 5px;} /* horizontal rule style */	
	div.hr hr {display: none;}

.flickr_badge {left; width: 100%;} /* flickr */
	.flickr_badge a img {width: auto; height: 60px; padding: 4px; margin: 0 30px 30px 0; border: 1px solid #666; background: #fff; float: left;}
		.flickr_badge_image a:hover img {border-color: #b4cddd; background: #fff;}
		
img.floatLeft { float: left; margin: 3px 8px 0 0;}
img.floatRight { float: right; margin: 3px 0 20px 20px;}

.recentArticles {margin: 5px 0px 5px 0;}

	.recentArticles li {
		list-style: none;
		border-top: 1px dotted #fff;
		padding-top: 5px;
		padding-bottom: 5px;
		}

.last {float: right; width: 50px; margin-top: -12px;}
.last li {margin-top: -50px; margin-right: 0; margin-left: 225px}	

h1.big {font-size: 285%; font-weight: bold; line-height:1.2em; margin: 30px 0 15px 0;}

h2.work {font-size: 189%; color: #000; font-weight: bold; margin: 40px 0 10px 0;}

h1#lodesign a {
	background: transparent url(../images/albertlo_design.gif) no-repeat; 
	clear: both;
	display: block;
	margin: 20px 0 0 20px;
	width: 276px;
	height: 52px;
	float: left;
	text-indent: -5000px;
	}

	h1#lodesign a:hover {background-position: -276px 0;}
	
h2#lodesign a {
	background: transparent url(../images/albertlo_design.gif) no-repeat; 
	clear: both;
	display: block;
	margin: 20px 0 0 20px;
	width: 276px;
	height: 52px;
	float: left;
	text-indent: -5000px;
	}

	h2#lodesign a:hover {background-position: -276px 0;}
		
h2#services {
	margin: 107px 0 0 394px;
	clear: both;
	padding: 82px 0 0 0;
	overflow: hidden;
	background: url(../images/services.gif) no-repeat; 
	height: 0px !important; /* for most browsers */
	height /**/:82px; /* for IE5.5's bad box model */
	}

h3#siteSynopsis {
	background: url(../images/synopsis.png) no-repeat;
	margin: 20px 0 0 394px;
	clear: both;
	padding: 53px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:53px; /* for IE5.5's bad box model */
	}

html>body h2#about {background: url(../images/aboutLodesign.png) no-repeat;}

h2#about {
	margin: 30px 0 30px 0;
	clear: both;
	padding: 21px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:21px; /* for IE5.5's bad box model */
	}

html>body h2#flickr {background: url(../images/myflickr.png) no-repeat;}

h2#flickr {
	margin: 30px 0 30px 0;
	clear: both;
	padding: 22px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:22px; /* for IE5.5's bad box model */
	}

html>body h2#ways_to_contact {background: url(../images/get_in_contact.png) no-repeat;}
		
h2#ways_to_contact {
	margin: 30px 0 35px 0;
	clear: both;
	padding: 16px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:16px; /* for IE5.5's bad box model */
	}

html>body h2#recent {background: url(../images/recent_posts.png) no-repeat;}

h2#recent {
	margin: 30px 0 30px 0;
	clear: both;
	padding: 21px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:21px; /* for IE5.5's bad box model */
	}
		
html>body h2#testimonials {background: url(../images/what_others_say.png) no-repeat;}

h2#testimonials {
	margin: 30px 0 30px 0;
	clear: both;
	padding: 21px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:21px; /* for IE5.5's bad box model */
	}

html>body h2#linkedin {background: url(../images/linkedin.png) no-repeat;}
	
h2#linkedin {
	margin: 35px 0 30px 0;
	clear: both;
	padding: 17px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:17px; /* for IE5.5's bad box model */
	}

html>body h2#client {background: url(../images/client_list.png) no-repeat;}
		
h2#client {
	margin: 30px 0 35px 0;
	clear: both;
	padding: 17px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:17px; /* for IE5.5's bad box model */
	}

html>body h2#featuredWork {background: url(../images/featured_work.png) no-repeat;}			

h2#featuredWork {
	margin: 20px 0 10px 0;
	padding: 18px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:18px; /* for IE5.5's bad box model */
	}

html>body h2#featuredPost {background: url(../images/newest_posts.png) no-repeat;}			

h2#featuredPost {
	margin: 558px 0 10px 0;
	padding: 20px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:20px; /* for IE5.5's bad box model */
	}
		
html>body h2#next {background: url(../images/nextSteps.png) no-repeat;}
	
h2#next {
	margin: 20px 0 10px 0;
	padding: 20px 0 0 0;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:20px; /* for IE5.5's bad box model */
	}
		
h3#tmobile {
	padding: 80px 0 0 0;
	overflow: hidden;
	background: url(../images/logos/tmobile.gif) center no-repeat; 
	height: 0px !important; /* for most browsers */
	height /**/:80px; /* for IE5.5's bad box model */
	}
		
h3#BMW {
	padding: 80px 0 0 0;
	overflow: hidden;
	background: url(../images/logos/bmw.gif) center no-repeat; 
	height: 0px !important; /* for most browsers */
	height /**/:80px; /* for IE5.5's bad box model */
	}
			
h3#nikon {
	padding: 80px 0 0 0;
	overflow: hidden;
	background: url(../images/logos/nikon.gif) center no-repeat; 
	height: 0px !important; /* for most browsers */
	height /**/:80px; /* for IE5.5's bad box model */
	}
	
/* Footer testimonial quotes */
.quote {
	background: transparent url(../images/open-quote.png) left 0 no-repeat;
	padding-left: 30px;
	font-style: italic;
	}

	.quote span {
		background: transparent url(../images/close-quote.png) right bottom no-repeat;
		display: block;
		padding-right: 30px;
		margin: 10px 0 0 0;
		}

cite { 
	font-size: 116%;
	font-style: italic;
	color: #fff;
	}		

/* definition list for footer */
dl#network {margin: 10px 0 10px 0;}
	dl#network dt {margin: 10px 0 3px 0;}

		dl#network dd a {
			display: block;
			width: 100px;
			text-indent: 20px;
			}		

			dl#network dd a.ico_twi {background: url(../images/icon_twitter.jpg) 0px 2px no-repeat;}
			dl#network dd a.ico_fli {background: url(../images/icon_flickr.jpg) 0px 2px no-repeat;}
			dl#network dd a.ico_las {background: url(../images/icon_lastfm.jpg) 0px 2px no-repeat;}
			dl#network dd a.ico_lin {background: url(../images/icon_linkedin.jpg) 0px 2px no-repeat;}
			dl#network dd a.ico_del {background: url(../images/icon_delicious.jpg) 0px 2px no-repeat;}

.published {
	margin-top: 5px;
	color: #878787;	
	}

div.hr_blog {
	margin: 0 0 30px 0;
	background-color: #000;
	height: 2px;
	clear: both;
	}
	
	div.hr_blog hr {display: none;}

p.companyNumber {
	margin-top: 0;
	padding-top: 10px;
	background-color: #fff;
	font-size: 85%;
	}