/*------------------------------------
RBDesigns
Master Stylesheet

Version /  1.0
Author / Ryan Bruce & Terry Smith
email / ryan@rbdesigns.ca
website / www.rbdesigns.ca
-------------------------------------*/
body{
	font-family: "Trebuchet MS", Georgia, Arial, sans-serif;
	color:#502259;
	text-align:center;
	margin: 0;
	padding: 0;
	background: #000;
	height: 100%;
	width: 100%;
	}
#wrap{
	margin: 0 auto;
	width:100%;
	float: left;
	background: #fafafa;
	text-align: left;
	position: relative;
	}

/* Project Header
-------------------------------------*/

#navwrap {
	width: 100%;
	height: 75px;
	background: #000;
	float: left;
}	

#navigation {margin: 0 auto;
			background: #000;
			position: relative;
			height: 55px;
			width:880px;
			padding:10px;
			}

#headerwrap {
	margin:0px;
		height: 93px;
		width: 100%;
		background:url('images/header.jpg') repeat-x;
		float: left;
}	
		
#header{
		margin:0px auto;
		height: 93px;
		width: 900px;
		background:url('images/header.jpg') repeat-x;
		position: relative;
		}
		
#identity{position: relative;
		margin:0px 0px 0px 10px;
		background:url('images/identity.jpg') no-repeat;
		width:275px;
		height:93px;
		}
#maincontent{
	margin:0 auto;
	position: relative;
	overflow: hidden;
	width:900px;
	background: #fafafa;
		}
#content{
		margin:30px 0 0 0;
		padding:0;
		width:636px;
		height:100%;
		background: #fafafa;
		float:left;
		}
#sidebar{
		margin:30px 0 0 0;
		padding:0;
		width: 264px;
		height:423px;
		background: #fafafa url('images/divider.jpg') no-repeat;
		float:left;
		}

#foractualcontent{
	width:636px;
	height:100%;
	background:#fafafa;
	float:left;
	margin:0;
	padding-bottom:30px;
}

#indentcontent{margin:0 0 0 70px;}

		
/* Content Pages
-------------------------------------*/
#slider {
  width: 620px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 400px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: #fafafa;
}

.scrollContainer div.panel {
  padding: 0;
  height: 210px;
  width: 636px; /* change to 560px if not using JS to remove rh.scroll */
}

.scrollButtons {
  position: relative;
float:right;
  cursor: pointer;
}

.scrollButtons.left {
}

.scrollButtons.right {margin:0 10px 0 0;
}


.projectthumb{
	display: block;
	border: 6px solid #ccc;
	padding: 4px;
	background-color: #fff;
	float: left;
}
.projectdetails{
	float: left;
	display: block;
	width:300px;
	margin:0 0 0 15px;
}
ol,ul{
	list-style:none;
	margin-left:0;
	padding-left:0;
	}
li.branding {
	background: url(images/icon-branding.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
li.design {
	background: url(images/icon-design.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
li.xhtml {
	background: url(images/icon-xhtml.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
li.wordpress {
	background: url(images/icon-wordpress.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
li.strategy {
	background: url(images/icon-strategy.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
li.copywriting {
	background: url(images/icon-copywriting.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin:0;
	height:20px;
}
li.hosting {
	background: url(images/icon-hosting.jpg) no-repeat left 3px;
	padding:2px 0 2px 40px;
	margin-left:0;
	height:20px;
}
		
/* Project Footer
-------------------------------------*/

#footerwrap {
	width: 100%;
	height: 241px;
	float: left;
	background:#000 url('images/footer.jpg') repeat-x;
}
		
#footer{
		margin:0px auto;
		position: relative;
		width:900px;
		height:241px;
		background:#000 url('images/footer.jpg') repeat-x;
		overflow:hidden;
		text-align:left;
		}
.footerlist{
				margin:0;
				width:300px;
				padding:40px 0 0 0;
				float:left;
				}
img{border:0;}
strong{font-weight:900;font-style:italic;}
img.leftimg{padding:0 0 0 20px;}
img.viewmore{padding:0 0 0 430px;}
h1.contenttitle{font-size:50px;color:#38183d;display:inline;font-weight:lighter;padding:0 0 0 20px;}
p.maintext{color:#38183d;font-weight:lighter;font-size:18px;padding:0 0 0 20px;width:550px;}

p.navtext{font-size:12px;color:#c1c1c1;text-align:right;text-transform:uppercase;padding:20px 0px 0 0;margin:0;font-weight:100;letter-spacing:3px;}
h1.sidetitle{font-size:25px;color:#38183d; font-weight:bolder;display:inline;padding:0 0 0 60px;}
h1.sidetitle2{font-size:25px;color:#38183d; font-weight:bolder;display:inline;padding:0;}
p.sidetext{font-size:18px;color:#38183d;padding:0 0 0 60px;}
p.foot{color:#c1c1c1;width:215px;font-size:14px;font-weight:100;}
p.whatwedid{display:inline; color: #38183d;}
a.white,a:hover.white,a:visited.white{color:#c1c1c1; text-decoration:none;}
a:hover.white{color:#c1c1c1; text-decoration:underline;}
a.whitenav,a:hover.whitenav,a:visited.whitenav{color:#c1c1c1; text-decoration:none;padding-bottom:5px;}
a:hover.whitenav{color:#c1c1c1; text-decoration:none;background: center url(images/navunderline.jpg) no-repeat; padding-bottom:5px; text-align:center;}


/* Lightbox Styling
-------------------------------------*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }

/*** START : next / previous text links ***/
#nextLinkText, #prevLinkText{
color: #FF9834;
font-weight:bold;
text-decoration: none;
}
#nextLinkText{
padding-left: 20px;
}
#prevLinkText{
padding-right: 20px;
}
/*** END : next / previous text links ***/
/*** START : added padding when navbar is on top ***/

.ontop #imageData {
    padding-top: 5px;
}

/*** END : added padding when navbar is on top ***/

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}
#imageData #helpDisplay {clear: left; float: left; display: block; }

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	display: none;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	

#lightboxIframe {
	display: none;
}	


/* Contact Form Styling
-------------------------------------*/

p#success{color:#000; padding:20px;}
p#bademail{border:1px #38183d solid; background:#e1d5e3; width:450px;padding:10px; text-align:center;}
input#nameinput,input#emailinput{width:200px; height:30px;font-size:16px; border:1px #38183d solid;color:#fff; background:#38183d;padding: 5px;}
textarea{width:450px;height:200px;font-size:16px; border:1px #38183d solid;color:#fff; background:#38183d; padding:5px;}
input#submitinput{width:200px; height:30px;font-size:16px; border:1px #38183d solid;color:#fff; background:#38183d;cursor:pointer;}

/* Portfolio Styling
-------------------------------------*/

p.portdesign{width: 400px; padding: 10px 0 10px 0; text-align:center; color:#38183d; border:1px solid #38183d;margin:0 auto;}
p.portdesign:hover{background:#38183d;color:#fff;border:1px #38183d;}
p.portbranding{}
p.portadvertising{}
p.portphotography{}
img.thumbpadding{border: 4px solid #ccc;
	padding: 5px;
	margin:8px;
	background-color: #fff;
}
span.goback{border:1px #38183d solid; background:#fff; padding:5px;text-align:center;}
span.goback:hover{border:1px #38183d solid; background:#38183d;padding:5px;text-align:center;}
a.purple,a:hover.purple,a:visited.purple{color:#38183d; text-decoration:none;font-size:12px; text-align:center;}
a:hover.purple{color:#fafafa;text-decoration:none;}

/* Horizontal Rule Styling
-------------------------------------*/
hr { color: #cccccc;
	background-color: #cccccc;
	height:1px;
	width:500px;
	text-align:left;
}
p.maindetailstext2{
	color:#38183d;font-weight:lighter;font-size:16px;width:500px;
}