/*
Stylesheet for rareview.com.
Designed & Built by Rareview.
Copyright 2010. All Rights Reserved.
*/

/* =Imports
============================================================================== */

	@import url("resets.css");
	

/* =Structural
============================================================================== */

	body {
		background: #dbe1e3 url(../images/bg-body.jpg) no-repeat 50% 0;
		}
		
	#homePage, #noGraphic {
		min-width: 960px; /* cannot have for scaleImg */
		}
		
	#workPage {
		margin: 0 20px; /* need for scalewidth to add padding around scaled image */
		}
		
	#workPage, #workPage #header, #noGraphic, #noGraphic #header {
		background: #dbe1e3 url(../images/bg-body-work.jpg) no-repeat 50% 0;
		}
		
	.wrapper {
		max-width: 960px; /* need for scaleImg */
		margin: 0 auto;
		overflow: hidden; /* works like clearfix to clear floats */
		}
		
	.scaleImg {
		width: 100%;
		min-height: 75px;
		background: url(../images/ajax-loader-alt.gif) center center no-repeat;
		clear: both;
		}
		
	.scaleImg img {
		max-width: 100%;
		}
		
	.copyright {
		color: #505353;
		text-align: center;
		font-size: 1.1em;
		padding: 60px 0 0;
		line-height: 1.7em;
		border-top: 1px solid #fff;
		} 
		
	#workPage .copyright {
		border-top: none;
		}
		
	.copyright a:link, .copyright a:visited {
		text-decoration: none;
		font-weight: bold;
		color: #444647;
		border-bottom: 1px dotted #6f7576;
		padding-top: 13px;
		}
		
	.copyright a:hover, .copyright a:focus, .copyright a:active {
		border-bottom: none;
		} 
		
	.flickr { background: url(../images/icon-flickr.gif) no-repeat 50% 0; }
	.dribbble { background: url(../images/icon-dribbble.gif) no-repeat 50% 0; }
		
	a.top:link, a.top:visited {
		width: 200px;
		height: 11px;
		background: url(../images/top.gif) no-repeat 50% 0;
		text-indent: -9000px;
		overflow: hidden;
		display: block;
		margin: 40px auto 0;
		border: none;
		padding: 0 !important;
		}
		
	a.top:hover, a.top:focus, a.top:active {
		background: url(../images/top.gif) no-repeat 50% -11px;
		}
		
	
/* =Header
============================================================================== */
	
	#header {
		margin: 0 auto;
		background: url('../images/bg-body.jpg') no-repeat 50% 0;
		min-height: 667px;
		max-width: 960px;
		position: relative;
		}
		
	
	/* =Logo
	-------------------------------------------------------------------------- */
		
		/* #header img {
			margin: 60px auto 0;
			display: block;
			} */
			
		.logo {
			width: 121px;
			height: 121px;
			background: url(../images/rareview-logo.png) no-repeat 0 0;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			margin: 60px 0 0 419px;
			}
			
		.logo:hover, .logo:focus, .logo:active {
			background: url(../images/rareview-logo.png) no-repeat 0 100%;
			}
			
		#homePage .logo:hover {
			background: url(../images/rareview-logo.png) no-repeat 0 0;
			} 
			
			
	/* =Contact Links
	-------------------------------------------------------------------------- */
		
		#header ol {
			position: absolute;
			top: 50px;
			right: 10px;
			}
			
		#header ol li {
			float: left;
			margin-left: 2px;
			}
			
		#header ol li a {
			display: block;
			}
			
		#header h2 {
			float: left;
			color: #8c8f8f;
			font-size: 1.2em;
			text-align: right;
			margin: 0 10px 0 0;
			font-weight: normal;
			line-height: 38px;
			}
			
		a.contactPhone:link, a.contactPhone:visited {
		    background: url(../images/contactlinks.gif) no-repeat 100% -36px;
		    height: 36px;
		    text-indent: -9000px;
		    overflow: hidden;
		    cursor: default;
		    }
		    
		a.contactPhone:link span, a.contactPhone:visited span {
		    display:block;
		    background: url(../images/contactlinks.gif) no-repeat 0 0;
		    height: 36px;
		    width: 32px;
		    padding-right: 6px;
		    }
		    
		a.contactPhone:hover, a.contactPhone:focus, a.contactPhone:active {
		 	background: url(../images/contactlinks.gif) no-repeat 100% -108px;
		 	}
		 	
		a.contactPhone:hover span, a.contactPhone:focus span, a.contactPhone:active span {
		 	background: url(../images/contactlinks.gif) no-repeat 0 -72px;
		 	}

		a.contactEmail:link, a.contactEmail:visited {
		    background: url(../images/contactlinks.gif) no-repeat 0 -144px;
		    height: 36px;
		    width: 38px;
		    text-indent: -9000px;
		    overflow: hidden;
		    display: block;
		    }
		    
		 a.contactEmail:hover, a.contactEmail:focus, a.contactEmail:active {
		 	background: url(../images/contactlinks.gif) no-repeat 0 -180px;
		 	}
	
	
	/* =Buckets
	-------------------------------------------------------------------------- */
	
		#header ul {
			margin: 100px 0 0 10px;
			}
			
		#header ul li h1 {
			font-size: 3.6em;
			color: #464a4a;
			font-weight: normal;
			margin-bottom: 15px;
			letter-spacing: -1px;
			width: 240px;
			height: 35px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}
			
		#header ul li p {
			color: #505353;
			font-size: 1.4em;
			line-height: 1.4em;
			padding: 0 20px 23px 0;
			}
			
		.leftBucket, .rightBucket {
			float: left;
			width: 240px;
			}
			
		.rightBucket {
			margin-left: 470px;
			}
			
		.leftBucket h1 { background: url(../images/headers.png) no-repeat 0 0; }
		.rightBucket h1 { background: url(../images/headers.png) no-repeat 0 -35px; }
			
		.leftBucket a, .rightBucket a {
			width: 220px;
			height: 38px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}
			
		.leftBucket a:link, .leftBucket a:visited {
			background: url(../images/links.png) no-repeat 0 0;
			}
		
		.leftBucket a:hover, .leftBucket a:focus, .leftBucket a:active {
			background: url(../images/links.png) no-repeat -220px 0;
			}
			
		.rightBucket a:link, .rightBucket a:visited {
			background: url(../images/links.png) no-repeat 0 -38px;
			}
		
		.rightBucket a:hover, .rightBucket a:focus, .rightBucket a:active {
			background: url(../images/links.png) no-repeat -220px -38px;
			}
			
		.leftBucket p a:link, .leftBucket p a:visited, .rightBucket p a:link, .rightBucket p a:visited {
			background: none;
			width: auto;
			height: auto;
			text-indent: inherit;
			overflow: auto;
			display: inline;
			text-decoration: none;
			/* color: #363636;
			border-bottom: 1px dotted #929292; */
			font-weight: bold;
			color: #008fbd;
			border-bottom: 1px dotted #02b1e9;
			}
		
		.leftBucket p a:hover, .leftBucket p a:focus, .leftBucket p a:active, .rightBucket p a:hover, .rightBucket p a:focus, .rightBucket p a:active {
			border-bottom: none;
			}
			
			
/* =Clients
============================================================================== */
	
	#clients {
		background: #383939;
		height: 136px;
		}
		
	
	/* =Left Column
	-------------------------------------------------------------------------- */
		
		#clients h2 {
			color: #dbe1e3;
			font-size: 1.4em;
			line-height: 136px;
			text-align: right;
			float: left;
			width: 210px;
			background: url(../images/bg-clients-leftCol.gif) no-repeat 100% 0;
			display: block;
			font-weight: normal;
			padding: 0 30px 0 0;
			}
	
	
	/* =Logos
	-------------------------------------------------------------------------- */
		
		#clients ul {
			float: left;
			height: 136px;
			background: url(../images/bg-clients-rightCol.gif) no-repeat 0 0;
			width: 720px;
			position: relative;
			}
			
		#clients ul li {
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}
			
		#clients ul li a {
			display: block;
			}
			
		li.ora a {
			width: 173px;
			height: 72px;
			background: url(../images/clients.gif) no-repeat 0 0;
			position: absolute;
			top: 0;
			left: 0;
			}
			
		li.pmd a {
			width: 173px;
			height: 64px;
			background: url(../images/clients.gif) no-repeat 0 -72px;
			position: absolute;
			top: 72px;
			left: 0;
			}
			
		li.gra a {
			width: 121px;
			height: 136px;
			background: url(../images/clients.gif) no-repeat -173px 0;
			position: absolute;
			top: 0;
			left: 173px;
			}
			
		li.lmu a {
			width: 134px;
			height: 72px;
			background: url(../images/clients.gif) no-repeat -294px 0;
			position: absolute;
			top: 0;
			left: 294px;
			}
			
		li.meo a {
			width: 134px;
			height: 64px;
			background: url(../images/clients.gif) no-repeat -294px -72px;
			position: absolute;
			top: 72px;
			left: 294px;
			}
			
		li.pt a {
			width: 98px;
			height: 136px;
			background: url(../images/clients.gif) no-repeat -428px 0;
			position: absolute;
			top: 0;
			left: 428px;
			}
			
		li.car a {
			width: 194px;
			height: 72px;
			background: url(../images/clients.gif) no-repeat -526px 0;
			position: absolute;
			top: 0;
			left: 526px;
			}
			
		li.tlc a {
			width: 194px;
			height: 64px;
			background: url(../images/clients.gif) no-repeat -526px -72px;
			position: absolute;
			top: 72px;
			left: 526px;
			}
			
			
/* =About
============================================================================== */
	
	#about {
		height: 540px;
		}
		
	#about .tileLeft div { height: 540px; }
	#about .tileRight div { height: 540px; }
		
	#about .wrapper, #stats .wrapper {
		background: url(../images/bg-tile-long.gif) repeat-y 0 0;
		height: 100%;
		width: 960px;
		float: left;
		position: relative;
		/* z-index: 10; */
		}

	.tileLeft {
		width: 50%;
		float: left;
		margin-right: -480px;
		}

	.tileLeft div {
		margin-right: 480px;
		background: url(../images/bg-tile.gif) repeat 100% 0;
		}

	.tileRight {
		width: 50%;
		float: right;
		margin-left: -481px;
		}

	.tileRight div {
		margin-left: 480px;
		background: url(../images/bg-tile.gif) repeat 0 0;
		}
		
	.shadow {
		background: url(../images/shadow-about.png) repeat-x 0 0;
		height: 19px;
		margin-top: -19px;
		position: relative;
		}
		
	
	/* =Facts
	-------------------------------------------------------------------------- */
	
		#about ul {
			width: 659px;
			margin: 60px 0 0 151px;
			}
			
		#about ul li, #about ul li a {
			width: 659px;
			height: 60px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}
			
		li.ux { background: url(../images/facts.gif) no-repeat 0 0; }
		li.hc { background: url(../images/facts.gif) no-repeat 0 -60px; }
		li.di { background: url(../images/facts.gif) no-repeat 0 -120px; }
		li.pp { background: url(../images/facts.gif) no-repeat 0 -180px; }
		li.qu { background: url(../images/facts.gif) no-repeat 0 -360px; }
		li.dp { background: url(../images/facts.gif) no-repeat 0 -420px; }
			
		li.rr a:link, li.rr a:visited {
			background: url(../images/facts.gif) no-repeat 0 -240px;
			}
			
		li.rr a:hover, li.rr a:focus, li.rr a:active {
			background: url(../images/facts.gif) no-repeat 0 -300px;
			}
			
			
/* =Skills
============================================================================== */
	
	#skills {
		background: #f1f5f6;
		}
		
	#skills .wrapper {
		padding: 35px 0 30px 0;
		}
		
	
	/* =Columns
	-------------------------------------------------------------------------- */
	
		#skills h3 {
			width: 300px;
			height: 24px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}	
			
		.into h3 { background: url(../images/headers.png) no-repeat 0 -70px; }	
		.not h3 { background: url(../images/headers.png) no-repeat 0 -94px; }	
		.getting h3 { background: url(../images/headers.png) no-repeat 0 -118px; }
		
		#skills .wrapper div {
			float: left;
			width: 310px;
			margin-left: 10px;
			}	
			
		#skills ul {
			margin-top: 10px;
			border-top: 1px solid #dbe1e3;
			}			
			
		#skills li {
			color: #505353;
			font-size: 1.4em;
			display: block;
			border-bottom: 1px solid #dbe1e3;
			line-height: 32px;
			height: 30px;
			padding-left: 30px;
			}
			
		.into li { background: url(../images/icons.png) no-repeat 0 0; }
		.not li { background: url(../images/icons.png) no-repeat 0 -30px; }
		.getting li { background: url(../images/icons.png) no-repeat 0 -60px; }	
		.noBullet { background: none !important; }
		
		
/* =Work
============================================================================== */
	
	#work {
		background: #393a3a url(../images/bg-work.gif) repeat-x 0 0;
		}
		
	#work .glow {
		background: url(../images/bg-work-glow.gif) no-repeat 50% 0;
		}
		
	#work .wrapper {
		padding: 35px 0 30px 0;
		position: relative;
		}
		
	#work h2 {
		font-size: 3.1em;
    	color: #dbe1e3;
    	font-weight: bold;
    	text-align: center;
    	margin: 0 auto 32px;
    	letter-spacing: -1px;
    	width: 197px;
    	height: 31px;
    	text-indent: -9000px;
    	overflow: hidden;
    	display: block;
    	background: url(../images/headers.png) no-repeat 0 -142px;
    	}
		
	/* see more work */
	
	a#seeMoreWork, a#seeMoreWork:visited {
		height: 28px;
		text-decoration: none;
		background: url(../images/work-see-more.png) top left no-repeat;
		display: block;
		position: absolute;
		top: 35px;
		right: 15px;
		}
		
	a#seeMoreWork strong, a#seeMoreWork:visited strong {
		padding-right: 35px;
		height: 28px;
		line-height: 28px;
		font-size: 12px;
    	color: #d4dbdd;
    	-webkit-transition: color 0.2s ease-out;
		background: url(../images/work-see-more.png) top right no-repeat;
		display: block;
		position: relative;
		left: 15px;
		}
	
	a#seeMoreWork:hover {
		text-decoration: none;
    	background: url(../images/work-see-more.png) bottom left no-repeat;
    	}
		
	a#seeMoreWork:hover strong {
    	color: #fff;
    	background: url(../images/work-see-more.png) bottom right no-repeat;
    	cursor: pointer;
    	}
			
	/* =Carousel
	-------------------------------------------------------------------------- */
	
		/* carousel containers and items */
		
		.carousel {
			padding-bottom: 25px;
			position: relative;
			background: url(../images/ajax-loader.gif) center center no-repeat;
			float: left;
			}
			
		.carousel-container, .jcarousel-item-placeholder {
		    width: 960px;
		    height: 585px;
		    }
		
		.carousel ul { 
			width: 960px;
			height: 585px;
			overflow: hidden;
			}

		.carousel .jcarousel-container-horizontal {
		    width: 960px;
		    }
		
		.carousel .jcarousel-clip-horizontal {
		    width:  960px;
		    height: 585px;
		    }
		
		.carousel .jcarousel-list li, .carousel .jcarousel-item {
		    width: 960px;
		    height: 585px; 
		    text-align: center;
		    }

		/* give images pointer cursor since they can be clicked to advance */

		.jcarousel-next {
			cursor: pointer;
			}
			
		/* individual circle links in the middle below the large image previews */
		
		.jcarousel-control {
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			}
		
		.jcarousel-control a, .jcarousel-control a:visited {
			margin: 0 -3px 0 4px;
			height: 12px;
			width: 14px;
			background: url(../images/carousel-image-circles.jpg) 0 1px no-repeat;
			display: block;
			float: left;
			position: relative;
			left: -50%;
			text-indent: -9999px;
			overflow: hidden;
			}
			
		.jcarousel-control a:hover, .jcarousel-control a.selected {
			background-position: 0 -10px;
			}
			
		/* project descriptions and links */
		
		.projectLink {
			padding: 5px 25px 5px 0;
			font-size: 12px;
			color: #969a9b;
			text-decoration: none;
			-webkit-transition: color 0.2s ease-out;
			background: url(../images/external-link.png) 100% 3px no-repeat;
			position: relative;
			top: 17px;
			}
		
		.projectLink strong {
			color: #d4dbdd;
			}
			
		.projectLink:hover, .projectLink:hover strong {
			color: #fff;
			}
			
/* =Company
============================================================================== */
	
	#company {
		background: #f1f5f6;
		}
		
	#company .wrapper {
		padding: 35px 0 30px 0;
		}
	
	/* =Samples
	-------------------------------------------------------------------------- */
			
		#company h2 {
			font-size: 3.1em;
			color: #2789cf;
			font-weight: bold;
			text-align: center;
			margin: 0 auto 32px;
			letter-spacing: -1px;
			width: 213px;
			height: 31px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			background: url(../images/headers.png) no-repeat 0 -173px;
			}
			
		#company ul {
			margin: 0 0 0 38px;
			}
			
		#company ul li {
			float: left;
			text-align: center;
			}
			
		#company h3 {
			font-size: 1.6em;
			color: #000000;
			padding: 240px 0 5px;
			}
			
		#company h4 {
			font-size: 1.2em;
			color: #505353;
			font-weight: normal;
			padding-bottom: 20px;
			}
			
		#company a:link, #company a:visited {
			font-size: 1.2em;
			font-weight: normal;
			text-decoration: none;
			font-weight: bold;
			color: #008fbd;
			border-bottom: 1px dotted #02b1e9;
			}
		
		#company a:hover, #company a:focus, #company a:active {
			border-bottom: none;
			}
			
		.chuck { background: url(../images/portraits.gif) no-repeat 0 0; width: 166px; }
		.andrew { background: url(../images/portraits.gif) no-repeat -166px 0; width: 180px; }
		.lance { background: url(../images/portraits.gif) no-repeat -346px 0; width: 188px; }
		.adrian { background: url(../images/portraits.gif) no-repeat -534px 0; width: 168px; }
		.resumes { background: url(../images/portraits.gif) no-repeat -702px 0; width: 187px; }
			
			
/* =Stats
============================================================================== */
	
	#stats {
		height: 480px;
		}
		
	#stats .tileLeft div { height: 480px; }
	#stats .tileRight div { height: 480px; }
	
	.shadowTop {
		background: url(../images/shadow-stats.png) repeat-x 0 0;
		height: 7px;
		margin-top: -480px;
		position: relative;
		}
		
	
	/* =Panels
	-------------------------------------------------------------------------- */
			
		#stats ul {
			margin: 60px 0 0;
			}
			
		#stats ul li {
			background: url(../images/stats-panel.png) no-repeat 0 0;
			width: 480px;
			height: 180px;
			float: left;
			}
			
		#stats h2 {
			font-size: 2.8em;
			color: #525454;
			font-weight: bold;
			text-align: center;
			margin: 10px auto 8px;
			width: 450px;
			height: 128px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			}
			
		.stat-cash h2 { background: url(../images/stats.gif) no-repeat 0 0; }
		.stat-pt h2 { background: url(../images/stats.gif) no-repeat 0 -128px; margin-top: 25px !important; }
		.stat-meo h2 { background: url(../images/stats.gif) no-repeat 0 -256px; }
		.stat-awards h2 { background: url(../images/stats.gif) no-repeat 0 -384px; }
		
		#stats .stat-pt p {
			color: #a5a8a8;
			font-size: 1.1em;
			text-align: left;
			margin: -15px 0 0 193px;
			}
			
		#stats .stat-awards p {
			color: #a5a8a8;
			font-size: 1.1em;
			text-align: left;
			margin: -14px auto 0;
			line-height: 1.5em;
			width: 300px;
			text-align: center;
			}
				
		#stats p {
			color: #a5a8a8;
			font-size: 1.1em;
			text-align: center;
			line-height: 2.0em; /* for IE7 to show dotted underline */
			}
			
		#stats p a:link, #stats p a:visited {
			color: #5d5f5f;
			text-decoration: none;
			border-bottom: 1px dotted #939393;
			}
		
		#stats p a:hover, #stats p a:focus, #stats p a:active {
			border-bottom: none;
			}
		
			
/* =Recap
============================================================================== */
	
	#recap {
		margin-top: 473px; /* reverse .shadowTop negative margin */
		background: #393a3a url(../images/bg-work.gif) repeat-x 0 0;
		}
		
	#recap .wrapper {
		padding: 35px 0 40px 0;
		position: relative;
		overflow: visible;
		}
		
	#recap img {
		position: absolute;
		bottom: -40px; 
		right: 120px;
		}
		
	
	/* =Text
	-------------------------------------------------------------------------- */
			
		#recap h3 {
			font-size: 3.1em;
			color: #dbe1e3;
			font-weight: bold;
			text-align: center;
			margin: 0 auto 22px;
			letter-spacing: -1px;
			width: 246px;
			height: 31px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			background: url(../images/headers.png) no-repeat 0 -204px;
			}
			
		#recap p {
			color: #a4a9ab;
			font-size: 1.3em;
			width: 450px;
			line-height: 1.7em;
			padding-bottom: 25px;
			margin: 0 auto;
			text-align: center;
			}
			
		#recap p strong {
			color: #d4dbdd;
			}
			
		a.phone {
			background: url(../images/links.png) no-repeat 0 -76px;
			width: 168px;
			height: 38px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			float: left;
			margin: 0 4px 0 288px;
			}
			
		a.phone:hover {
			background: url(../images/links.png) no-repeat 0 -76px;
			}
			
		a.email:link, a.email:visited {
			background: url(../images/links.png) no-repeat 0 -114px;
			width: 213px;
			height: 38px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			float: left;
			}
		
		a.email:hover, a.email:focus, a.email:active {
			background: url(../images/links.png) no-repeat -213px -114px;
			}
			
			
/* =Work Page
============================================================================== */
	
	#screenshots, #screenshots div {
		position: inherit !important;
		}
		
	#screenshots {
		margin-top: 80px;
		}
		
	#screenshots img {
		margin: 0 0 30px;
		}
		
	
	/* =Headers and links
	-------------------------------------------------------------------------- */
		
		.workHeader {
			overflow: hidden;
			padding-top: 20px;
			margin-bottom: 30px;
			}
						
		.screens {
			margin-bottom: 60px !important;
			}
		
		#screenshots h3 {
			font-size: 3.6em;
			color: #464a4a;
			font-weight: normal;
			letter-spacing: -1px;
			width: 400px;
			height: 32px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			float: left;
			background-image: url(../images/headers-work.png);
			background-repeat: no-repeat;
			}
			
		.hour { background-position: 0 0; }
		.advanced { background-position: 0 -32px; }
		.ajungo { background-position: 0 -64px; }
		.alcaeus { background-position: 0 -96px; }
		.basic { background-position: 0 -128px; }
		.cashcrate { background-position: 0 -160px; }
		.aethercomm { background-position: 0 -192px; }
		.carsdirect { background-position: 0 -224px; }
		.contently { background-position: 0 -256px; }
		.culver { background-position: 0 -288px; }
		.cynara { background-position: 0 -320px; }
		.drive { background-position: 0 -352px; }
		.church { background-position: 0 -384px; }
		.energy { background-position: 0 -416px; }
		.fitscore { background-position: 0 -448px; }
		.forest { background-position: 0 -480px; }
		.game { background-position: 0 -512px; }
		.gracie { background-position: 0 -544px; }
		.jhliving { background-position: 0 -576px; }
		.jobberwoky { background-position: 0 -608px; }
		.juridiko { background-position: 0 -640px; }
		.legal { background-position: 0 -672px; }
		.lmubell { background-position: 0 -704px; }
		.lmubiz { background-position: 0 -736px; }
		.marble { background-position: 0 -768px; }
		.mealeo { background-position: 0 -800px; }
		.murgence { background-position: 0 -832px; }
		.neptune { background-position: 0 -864px; }
		.outfront { background-position: 0 -896px; }
		.plastics { background-position: 0 -928px; }
		.ppmnet { background-position: 0 -960px; }
		.postmaster { background-position: 0 -992px; }
		.projecturf { background-position: 0 -1024px; }
		.roinetworks { background-position: 0 -1056px; }
		.start { background-position: 0 -1088px; }
		.read { background-position: 0 -1120px; }
		.contently { background-position: 0 -1152px; }
		.lmutv { background-position: 0 -1184px; }

		.workHeader a:link, .workHeader a:visited {
			color: #363636;
			text-decoration: none;
			border-bottom: 1px dotted #929292;
			float: right;
			font-size: 1.5em;
			margin: 8px 0 0;
			background: none !important;
			padding: 0 !important;
			}
		
		.workHeader a:hover, .workHeader a:focus, .workHeader a:active {
			border-bottom: none;
			}
			
		#screenshots p {
			font-size: 1.4em;
			color: #636363;
			margin: -25px 0 15px;
			}
			
		#screenshots p strong {
			color: #363636;
			}
			
		#screenshots span {
			display: block;
			padding: 20px 0 10px;
			margin-top: -30px;
			text-align: center;
			}
			
		#screenshots a:link, #screenshots a:visited {
			color: #696969;
			text-decoration: none;
			font-size: 1.5em;
			background: url(../images/toggle.png) no-repeat 0 0;
			padding-left: 20px;
			}
		
		#screenshots a:hover, #screenshots a:focus, #screenshots a:active {
			color: #363636;
			}
			
		.arrowUp, .showLess a {
			background: url(../images/toggle.png) no-repeat 0 100% !important;
			}
			
		.extraWork {
			display: none;
			}
			
		#screenshots .showLess {
			width: 100%;
			padding: 20px 0 10px;
			margin-top: -30px;
			text-align: center;
			display: none;
			}
			
			
/* =404 & IE6 pages
============================================================================== */
	
	#otherPages {
		width: 600px;
		height: 300px;
		margin: -350px auto 0;
		}
		
	#otherPages .wrapper {
		position: relative;
		overflow: visible;
		}
		
	
	/* =Text
	-------------------------------------------------------------------------- */
			
		.outdated {
			font-size: 3.1em;
			color: #dbe1e3;
			font-weight: bold;
			text-align: center;
			margin: 0 auto;
			letter-spacing: -1px;
			width: 600px;
			height: 55px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			background: url(../images/headers-other.gif) no-repeat 0 0;
			}
			
		.shit {
			font-size: 3.1em;
			color: #dbe1e3;
			font-weight: bold;
			text-align: center;
			margin: 0 auto;
			letter-spacing: -1px;
			width: 600px;
			height: 55px;
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			background: url(../images/headers-other.gif) no-repeat 0 -55px;
			}
			
		#otherPages p {
			color: #505353;
			font-size: 1.3em;
			line-height: 1.5em;
			text-align: center;
			padding: 10px 30px 10px;
			}
			
		#otherPages p a:link, #otherPages p a:visited {
			font-weight: bold !important;
			color: #008fbd;
			font-weight: normal;
			text-decoration: none;
			border-bottom: 1px dotted #02b1e9;
			}
		
		#otherPages p a:hover, #otherPages p a:focus, #otherPages p a:active {
			border-bottom: none;
			}			
			
		.error {
			background: url(../images/browsers.jpg) no-repeat 0 0;
			height: 152px;
			width: 600px;
			}
			
		.error li {
			text-indent: -9000px;
			overflow: hidden;
			display: block;
			float: left;
			}
			
		.error li a, .error li a:active {
			display: block;
			height: 100px;
			background: url(../images/browsers.jpg) no-repeat;
			}

		.error li.safari a, .error li.safari a:visited { background-position: -108px 0; width: 97px; margin-left: 108px; }
		.error li.firefox a, .error li.firefox a:visited { background-position: -205px 0; width: 95px; }
		.error li.chrome a, .error li.chrome a:visited { background-position: -300px 0; width: 100px; }
		.error li.ie a, .error li.ie a:visited { background-position: -400px 0; width: 97px; }

		.error li.safari a:hover { background-position: -108px -152px; }
		.error li.firefox a:hover { background-position: -205px -152px; }
		.error li.chrome a:hover { background-position: -300px -152px; }
		.error li.ie a:hover { background-position: -400px -152px; }