/*------------------------------------------------------------------
Project:		Lonely Cloud
Version:		2.0
Last change:	11/05/09
Copyright:		Christopher Leckie

Fancy seeing you here! Feel free to have a nosey at my code.

Table of contents:
	*Body & Typography
	*Navigation
	*Index Content
	*About Content
	*Portfolio Content
	*Contact Content
-------------------------------------------------------------------*/


/* Body & Typography
-------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

body {
	background: #999999 url(../images/bg.jpg) repeat;
	font: 12px "helvetica neue", "lucida grande", helvetica, arial, sans-serif;
	color: #3c494b;
	margin: 0 auto;
	line-height: 1.5em;
	}
	
a {
	color: #6699cc;
	text-decoration: none;
	outline: none;
	}
	
a:hover {
	color: #336699;
	text-decoration: underline;
	}
	
ul {
	list-style: none;
	}

	
#header {
	background: white url(../images/header_bg.jpg) repeat-x;
	margin: 30px auto;
	width: 970px;
	height: 80px;
	}
	
#header .left {
	float: left;
	width: 15px;
	height: 80px;
	}
	
#header .right {
	float: right;
	width: 15px;
	height: 80px;
	}
	
#header #logo {
	float: left;
	width: 144px;
	height: 36px;
	margin: 20px 0 0 20px;
	}
	
#body {
	background: white url(../images/body_bg.jpg) repeat-y;
	margin: 0 auto;
	width: 970px;
	}
	
#body .topbot {
	width: 970px;
	height: 35px;
	}
	
#body #content {
	margin: 0 35px;
	overflow: hidden;
	}
	
	
#body #content h6 {
	clear: both;
	float: left;
	font: 1.8em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	margin: 0 0 30px 0;
	}

#body #content h4 {
	clear: both;
	float: left;
	font: 1.5em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	margin-top: 30px;
	}
	
#body #content .left {
	width: 550px;
	margin: 0 30px 0 0;
	float: left;
	}
	
#body #content .right {
	width: 320px;
	float: right;
	}
	
#footer {
	background: white url(../images/footer_bg.jpg) repeat-x;
	margin: 30px auto;
	width: 970px;
	height: 80px;
	}
	
#footer .left {
	float: left;
	width: 15px;
	height: 80px;
	}
	
#footer .right {
	float: right;
	width: 15px;
	height: 80px;
	}
	
#footer #copyright {
	float: left;
	width: 150px;
	margin: 14px 0 0 30px;
	}
	
#footer #copyright h2{
	font-size: 12px;
	margin: 0;
	padding: 0;
	}
	
#footer #copyright p{
	font-size: 10px;
	line-height: 1.5em;
	}
	
#footer a#smalllogo {
	background: url(../images/footer_logo.jpg) no-repeat;
	margin: 14px 20px 0 15px;
	float: left;
	display: block;
	text-indent: -9999px;
	width: 105px;
	height: 50px;
	}
	
#footer a#smalllogo:hover {
	background: url(../images/footer_logo.jpg) 0 -50px no-repeat;
	width: 105px;
	height: 50px;
	}
	
#footer #flickr {
	float: left;
	width: 600px;
	height: 50px;
	margin: 14px 10px 0 5px;
	}
	
#footer #flickr li {
	float: left;
	display: block;
	text-indent: -9999px;
	}
	
#footer #flickr li a {
	display: block;
	text-indent: -9999px;
	}
	
#footer #flickr li a#flickone {
	background: url(../images/footer_flickr.png) no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickone:hover {
	background: url(../images/footer_flickr.png) 0 -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flicktwo {
	background: url(../images/footer_flickr.png) -75px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flicktwo:hover {
	background: url(../images/footer_flickr.png) -75px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickthree {
	background: url(../images/footer_flickr.png) -150px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickthree:hover {
	background: url(../images/footer_flickr.png) -150px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickfour {
	background: url(../images/footer_flickr.png) -225px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickfour:hover {
	background: url(../images/footer_flickr.png) -225px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickfive {
	background: url(../images/footer_flickr.png) -300px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickfive:hover {
	background: url(../images/footer_flickr.png) -300px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flicksix {
	background: url(../images/footer_flickr.png) -375px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flicksix:hover {
	background: url(../images/footer_flickr.png) -375px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickseven {
	background: url(../images/footer_flickr.png) -450px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickseven:hover {
	background: url(../images/footer_flickr.png) -450px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickeight {
	background: url(../images/footer_flickr.png) -525px 0 no-repeat;
	width: 75px;
	height: 50px;
	}
	
#footer #flickr li a#flickeight:hover {
	background: url(../images/footer_flickr.png) -525px -50px no-repeat;
	width: 75px;
	height: 50px;
	}
	
/* Navigation
-------------------------------------------------------------------*/

#navigation {
	float: right;
	width: 435px;
	height: 70px;
	margin: 3px 10px 0 0;
	}
	
#navigation li {
	float: left;
	display: block;
	text-indent: -9999px;
	}
	
#navigation li a {
	display: block;
	text-indent: -9999px;
	}
	
#navigation li a#home {
	background: url(../images/navigation.png) no-repeat;
	width: 100px;
	height: 70px;
	}
	
#navigation li a#home:hover {
	background: url(../images/navigation.png) 0 -70px no-repeat;
	}
	
#navigation li a#home.current {
	background: url(../images/navigation.png) 0 -70px no-repeat;
	cursor: default;
	}
	
#navigation li a#about {
	background: url(../images/navigation.png) -100px 0 no-repeat;
	width: 100px;
	height: 70px;
	}
	
#navigation li a#about:hover {
	background: url(../images/navigation.png) -100px -70px no-repeat;
	}
	
#navigation li a#about.current {
	background: url(../images/navigation.png) -100px -70px no-repeat;
	cursor: default;
	}
	
#navigation li a#portfolio {
	background: url(../images/navigation.png) -200px 0 no-repeat;
	width: 120px;
	height: 70px;
	}
	
#navigation li a#portfolio:hover {
	background: url(../images/navigation.png) -200px -70px no-repeat;
	}
	
#navigation li a#portfolio.current {
	background: url(../images/navigation.png) -200px -70px no-repeat;
	cursor: default;
	}
	
#navigation li a#contact {
	background: url(../images/navigation.png) -320px 0 no-repeat;
	width: 115px;
	height: 70px;
	}
	
#navigation li a#contact:hover {
	background: url(../images/navigation.png) -320px -70px no-repeat;
	}
	
#navigation li a#contact.current {
	background: url(../images/navigation.png) -320px -70px no-repeat;
	cursor: default;
	}
	
/* Index Content
-------------------------------------------------------------------*/
	
#blurb {
	background: url(../images/index_blurb.jpg) no-repeat;
	width: 550px;
	height: 240px;
	margin: 0 0 30px 0;
	text-indent: -9999px;
	}
	
#blurb #link a {
	background: url(../images/index_blurb_link.png) no-repeat;
	float: right;
	margin: 165px 40px 0 0;
	width: 195px;
	height: 30px;
	}
	
#blurb #link a:hover {
	background: url(../images/index_blurb_link.png) 0 -30px no-repeat;
	width: 195px;
	height: 30px;
	}
	
#thumbnail {
	width: 550px;
	height: 260px;
	}
	
#thumbnail li  {
	float: left;
	display: block;
	text-indent: -9999px;
	}
	
#thumbnail li a {
	display: block;
	text-indent: -9999px;
	}
	
#thumbnail li a#one {
	background: url(../images/thumbnail_lonelycloud.jpg) no-repeat;
	width: 260px;
	height: 260px;
	}
	
#thumbnail li a#one:hover {
	background: url(../images/thumbnail_lonelycloud.jpg) 0 -260px no-repeat;
	}
	
#thumbnail li a#two {
	background: url(../images/thumbnail_straumnes.jpg) no-repeat;
	width: 260px;
	height: 260px;
	margin: 0 0 0 30px;
	}
	
#thumbnail li a#two:hover {
	background: url(../images/thumbnail_straumnes.jpg) 0 -260px no-repeat;
	}
	
#twitter {
	background: url(../images/twitter_bird.jpg) no-repeat;
	min-height: 40px;
	width: 320px;
	}

	
#twitter #twitter_update_list {
	margin: 0 0 0 80px;
	}
	
#twitter #twitter_update_list li {
	background: #f2f2f2;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 15px 10px 0 0;
	}
	
#twitter #title {
	background: url(../images/twitter_title.jpg) no-repeat;
	width: 240px;
	height: 50px;
	margin: 0 0 0 80px;
	text-indent: -9999px;
	}
	
#twitter a#follow {
	margin: 15px 0 0 80px;
	display: block;
	text-indent: -9999px;
	background: url(../images/twitter_follow.jpg) no-repeat;
	width: 240px;
	height: 40px;
	}
	
#twitter a#follow:hover {
	background: url(../images/twitter_follow.jpg) 0 -40px no-repeat;
	width: 240px;
	height: 40px;
	}
	
/* About Content
-------------------------------------------------------------------*/
	
#bullets {
	width: 400px;
	float: left;
	}
	
#bullets li {
	background: url(../images/bullet.jpg) no-repeat;
	font-size: 1.3em;
	color: #627477;
	margin: 19px 0 0 0;
	padding: 5px 0 5px 40px;
	}
	
#bullets li:hover {
	cursor: default;
	color: #3c494b;
	}
	
#bullets h2 {
	font: 1.5em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	line-height: 1.5em;
	color: #3c494b;
	margin: 0 0 15px 0;
	}

#body #content .bio_break {
	width: 220px;
	float: right;
	margin: 0 30px 0 0;
	}
	
#body #content .bio_break p {
	font-size: 14px;
	}
	
#body #content .bio {
	width: 220px;
	float: right;
	}
	
#body #content .bio p {
	font-size: 14px;
	}
	
#body #content h3 {
	color: #336699;
	font: 1.3em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	margin: 0 0 5px 0;
	}
	
#body #content small {
	color: #627477;
	font-size: 14px;
	}
	
#body #content p {
	margin: 5px 0 0 0;
	}
	
#process {
	float: left;
	width: 900px;
	height: 50px;
	background: url(../images/process_bg.jpg) no-repeat;
	margin: 30px 0 0 0;
	}
	
#process li {
	float: left;
	width: 225px;
	height: 50px;
	text-indent: -9999px;
	}
	
#process li.plan {
	background: url(../images/plan.png);
	}
	
#process li.design {
	background: url(../images/design.png);
	}
	
#process li.build {
	background: url(../images/build.png);
	}
	
#process li.expand {
	background: url(../images/expand.png);
	}
	
/* Portfolio Content
-------------------------------------------------------------------*/

#ulportfolio {
	width: 550px;
	}
	
#ulportfolio li {
	color: white;
	font: 1.4em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	text-align: center;
	float: left;
	display: block;
	margin: 0 30px 30px 0;
	width: 260px;
	height: 200px;
	background: url(../images/portfolio_bg.jpg) no-repeat;
	}
	
#ulportfolio li:hover {
	background: url(../images/portfolio_bg.jpg) 0 -200px no-repeat;
	}
	
#ulportfolio li a {
	color: white;
	display: block;
	}
	
#ulportfolio li a:hover {
	text-decoration: none;
	}
	
#ulportfolio li img {
	margin: 10px 0 0 0;
	}
	
#ulportfolio li.end {
	margin: 0;
	}
	
#portfolio_contact {
	background: url(../images/portfolio_check.jpg) no-repeat;
	min-height: 40px;
	width: 320px;
	}
	
#portfolio_contact h2 {
	font: 1.8em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	margin: 0 0 0 80px;
	}
	
#portfolio_contact p {
	padding: 0 0 0 80px;
	line-height: 1.5em;
	font-size: 1.2em;
	color: #627477;
	cursor: default;
	}
	
#portfolio_contact p:hover {
	color: #3c494b;
	}
	
#portfolio_contact #title {
	background: url(../images/twitter_title.jpg) no-repeat;
	width: 240px;
	height: 50px;
	margin: 0 0 0 80px;
	text-indent: -9999px;
	}
	
#portfolio_contact a#contact_button {
	margin: 15px 0 0 80px;
	display: block;
	text-indent: -9999px;
	background: url(../images/contact.jpg) no-repeat;
	width: 240px;
	height: 40px;
	}
	
#portfolio_contact a#contact_button:hover {
	background: url(../images/contact.jpg) 0 -40px no-repeat;
	width: 240px;
	height: 40px;
	}
	
/* Portfolio Seclected
-------------------------------------------------------------------*/

#portitemleft {
	float: left;
	width: 300px;
	height: 380px;
	margin: 0 30px 0 0;
	}
	
	
#portitemleft .selected_thumb {
	width: 300px;
	height: 290px;
	margin: 0 0 30px 0;
	}
	
#portitemleft #selected_view {
	width: 300px;
	height: 60px;
	display: block;
	text-indent: -9999px;
	background: url(../images/portfolio/selected_view.jpg) no-repeat;
	}
	
#portitemleft #selected_view:hover {
	width: 300px;
	height: 60px;
	background: url(../images/portfolio/selected_view.jpg) 0 -60px no-repeat;
	}
	
#portitemright {
	float: right;
	width: 570px;
	height: 380px;
	}
	
#portitemright .selected_content {
	width: 570px;
	height: 290px;
	margin: 0 0 30px 0;
	}
	
#portitemright .selected_content p {
	font-size: 1.2em;
	color: #627477;
	line-height: 1.4em;
	padding: 5px 0 0 0;
	}
	
#portitemright h2 {
	font: 2.4em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	}
	
#portitemright #selected_attributes {
	width: 570px;
	height: 40px;
	}
	
#portitemright #selected_attributes li {
	width: 120px;
	height: 40px;
	float: left;
	margin: 20px 30px 0 0;
	cursor: help;
	}
	
#portitemright #selected_attributes li.end {
	margin: 20px 0 0 0;
	}
	
#backbutton{
	font: 1.2em "Trebuchet MS", helvetica neue, helvetica, arial, sans-serif;
	color: white;
	cursor: pointer;
	margin: 10px 0 0 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 5px;  
     background-color: #3c494b;  
     border: 0;
     outline: none;
	}
	
#backbutton:hover {
	background-color: #4a5456;
	}
	
/* Colorbox
-------------------------------------------------------------------*/

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between all ColorBox themes
*/
#colorbox, #cboxOverlay, #cboxWrapper{
	position:absolute; 
	top:0; 
	left:0; 
	z-index:9999; 
	overflow:hidden;
	}

#cboxOverlay{
	position:fixed; 
	width:100%; 
	height:100%;
	}

#cboxMiddleLeft, #cboxBottomLeft{
	clear:left;
	}

#cboxContent{
	position:relative; 
	overflow:visible;
	}

#cboxLoadedContent{
	overflow:auto;
	}

#cboxLoadedContent iframe{
	display:block; 
	width:100%; 
	height:100%; 
	border:0;
	}

#cboxTitle{
	margin:0;
	}

#cboxLoadingOverlay, #cboxLoadingGraphic{
	position:absolute; 
	top:0; 
	left:0; 
	width:100%;
	}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
	cursor:pointer;
	}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
    in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
*/
#cboxOverlay{
	background:url(../images/colorbox/overlay.png) 0 0 repeat;
	}

#colorbox{}

	#cboxTopLeft{
		width:21px; 
		height:21px; 
		background:url(../images/colorbox/borderTopLeft.png) 0 0 no-repeat;
		}
	
	#cboxTopCenter{
		height:21px; 
		background:url(../images/colorbox/borderTopCenter.png) 0 0 repeat-x;
		}
	
	#cboxTopRight{
		width:21px; 
		height:21px; 
		background:url(../images/colorbox/borderTopRight.png) 0 0 no-repeat;
		}
	
	#cboxBottomLeft{
		width:21px; 
		height:21px; 
		background:url(../images/colorbox/borderBottomLeft.png) 0 0 no-repeat;
		}
	
	#cboxBottomCenter{
		height:21px; 
		background:url(../images/colorbox/borderBottomCenter.png) 0 0 repeat-x;
		}
	
	#cboxBottomRight{
		width:21px; 
		height:21px; 
		background:url(../images/colorbox/borderBottomRight.png) 0 0 no-repeat;
		}
	
	#cboxMiddleLeft{
		width:21px; 
		background:url(../images/colorbox/borderMiddleLeft.png) 0 0 repeat-y;
		}
	
	#cboxMiddleRight{
		width:21px; 
		background:url(../images/colorbox/borderMiddleRight.png) 0 0 repeat-y;
		}
	
	#cboxContent{
		background:#fff;
		}
	
		#cboxLoadedContent{
			margin-bottom:28px;
			}
		
                #cboxTitle{
                	position:absolute; 
                	bottom:3px; 
                	left:0; 
                	text-align:center; 
                	width:100%; 
                	color:#949494;
                	}
                
                #cboxCurrent{
                	position:absolute; 
                	bottom:3px; 
                	left:58px; 
                	color:#949494;
                	}
                
                #cboxSlideshow{
                	position:absolute; 
                	bottom:3px; 
                	right:30px; 
                	color:#0092ef;
                	}
                
                #cboxPrevious{
                	position:absolute; 
                	bottom:0; 
                	left:0px; 
                	background:url(../images/colorbox/controls.png) -25px 0px no-repeat; 
                	width:25px; 
                	height:25px; 
                	text-indent:-9999px;
                	}
                
                #cboxPrevious.hover{
                	background-position:-25px -25px;
                	}
                
                #cboxNext{
                	position:absolute; 
                	bottom:0; 
                	left:27px; 
                	background:url(../images/colorbox/controls.png) 0px 0px no-repeat; 
                	width:25px; 
                	height:25px; 
                	text-indent:-9999px;
                	}
                
                #cboxNext.hover{
                	background-position:0px -25px;
                	}
                
		#cboxLoadingOverlay{
			background:url(../images/colorbox/loading_background.png) center center no-repeat;
			}
		
                #cboxLoadingGraphic{
                	background:url(../images/colorbox/loading.gif) center center no-repeat;
                	}
                
		#cboxClose{
			position:absolute; 
			bottom:0; 
			right:0; 
			background:url(../images/colorbox/controls.png) -50px 0px no-repeat; 
			width:25px; 
			height:25px; 
			text-indent:-9999px;
			}
		
		#cboxClose.hover{
			background-position:-50px -25px;
			}

	
/* Contact Content
-------------------------------------------------------------------*/

#contactform{
	width: 600px;
	float: left;
	}
	
#contactform input{  
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 9px;  
     background-color: #e3e3e3;  
     border: 0;
     outline: none;
     } 
     
#contactform textarea{  
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 9px;  
     background-color: #e3e3e3;  
     border: 0;
     outline: none;
     } 
	
#contactform .labelbgname{
	background: url(../images/contact/name.jpg) no-repeat;
	float: left;
	margin: 0 0 30px 0;
	}
	
#contactform .labelbgemail{
	background: url(../images/contact/email.jpg) no-repeat;
	float: left;
	margin: 0 0 30px 0;
	}
	
#contactform .labelbgtext{
	background: url(../images/contact/text.jpg) no-repeat;
	float: left;
	margin: 0;
	}
	
#contactform .contactname{
	margin: 0 0 0 130px;
	width: 250px;
	float: left;
	}
	
#contactform .contactemail{
	margin: 0 0 0 130px;
	width: 250px;
	float: left;
	}
	
#contactform .contactbutton{
	font-size: 1.2em;
	margin: 0 30px 0 0;
	color: white;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 9px;  
     background-color: #3c494b;  
     border: 0;
     outline: none;
     float: left;
	}
	
#contactform .contactbutton:hover {
	background-color: #4a5456;
	}
	
.messagesent {
	width: 882px;
	text-align: center;
	font-size: 1.2em;
	margin: 0 0 30px 0;
	color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 9px;  
     background-color: #45834e;  
     border: 0;
     outline: none;
     float: left;
	}
	
.invalid {
	font-size: 1.2em;
	margin: 0 30px 30px 0;
	color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
     padding: 9px;  
     background-color: #834545;  
     border: 0;
     outline: none;
     float: left;
	}
	
#contactform .contactbuttondiv{
	float: left;
	margin: 30px 0 0 130px;
	}
	
#contactform .contacttext{
	font: 11px "lucida grande", "helvetica neue", helvetica, arial, sans-serif;
	margin: 0 0 0 130px;
	width: 452px;
	height: 120px;
	float: left;
	}
	
#contactmap{
	width: 270px;
	height: 260px;
	float: right;
	margin: 0 0 0 30px;
	background: url(../images/contact/map.jpg) no-repeat;
	text-indent: -9999px;
	}

.label_indent {
	text-indent: -9999px;
	float: left;
	}