@charset "utf-8";
/* CSS Document */
/* This css document and all web pages associated with it were designed and written by Red Pearl Design Company. Using these works without the consent of Red Pearl Design Company is strictly prohibited. If you would like to use any of this content in your own work or if you would like to have work created for you, please visit http://redpearldesigncompany.com and contact us via email. Have a great day */

/* ------------------------- General styles site wide go here ------------------------- */

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/backgrounds/website_background_circles.png);
	background-position: center top;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
a {
	color: #000000; 
}
.zero {
	margin: 0;
	padding: 0;
}
.redtext {
	color: #9E0B0F
}
.centertext {
	text-align: center;
}
p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11pt;
}
.services li { 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11pt;
}
h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15pt;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:17pt;
}

/* ------------------------- End of general styles site wide  ------------------------- */

/* ------------------------- Container styles site wide go here ------------------------- */
#container-wrapper {
	width: 1250px;
	margin: 40px auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.container-top {
	background-image: url(../images/backgrounds/rounded_edges_top3.png);
	background-repeat: no-repeat;
	height: 20px;
	margin: 0;
	padding: 0;
}
.container-bottom {
	background-image: url(../images/backgrounds/rounded_edges_bottom3.png);
	height: 20px;
	clear: both;
}
#container { 
	background: #000000;
	margin: 0;
	padding: 0;
} 

/* ------------------------- End of container styles site wide  ------------------------- */

/* ------------------------- Header styles site wide go here ------------------------- */

#header { 
	background: #000000; 
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin: 0;
} 
#logo h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-indent: -1000em;
}
#logo a {
	display: block;
	line-height: 200px;
	width: 246px;
}
#logo {
	background-image: url(../images/redpearl_logo.png);
	background-repeat: no-repeat;
	margin: 0 0 0 10px;
	padding: 0;
	height: 200px;
	width: 246px;
	float: left;
	display: inline;
}
#header-image { 
	margin: 0 0 0 320px;
	padding: 0;
	width: 850px;
	height: 200px;
}

/* ------------------------- End of header styles site wide ------------------------- */

/* ------------------------- Main-wrapper styles site wide go here ------------------------- */

#main-wrapper {
	margin: 20px 0 0 0;
	padding: 0;
}

/* ------------------------- End of main-wrapper styles site wide ------------------------- */

/* ------------------------- Sidebar styles site wide go here ------------------------- */

#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #000000; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0;
	margin: 0;
	color: #FFFFFF;
}

/* ------------------------- Navlinks text styles site wide go here ------------------------- */

#navlinks {
	margin: 0 0 0 10px;
	padding: 0;
}
#navlinks a {
	line-height: 95px;
	margin: 0; 
	padding: 0;
	width: 190px;
	display: block;
	text-indent: -1000em;
}	 
#navlinks li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------- End of navlinks text styles site wide ------------------------- */

/* ------------------------- Navlinks image button styles site wide go here ------------------------- */

/* ---Note: Navlinks are made from a single background image that is 380px wide x 75px high. 
On current state the background image shifts 190px to the left to reveal the current state. 
There is "a" text for each link that shifts 1000em to the left to become invisible for typical screen view. --- */

#navlinks li#index {
	background-image:url(../images/navlinks_icons/philosophy.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 190px;
	line-height: 75px;
}
#navlinks li#portfolio {
	background-image:url(../images/navlinks_icons/portfolio.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 190px;
	line-height: 75px;
}
#navlinks li#services {
	background-image:url(../images/navlinks_icons/services.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 190px;
	line-height: 75px;
}
#navlinks li#bio {
	background-image:url(../images/navlinks_icons/bio.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 190px;
	line-height: 75px;
}
#navlinks li#contact {
	background-image:url(../images/navlinks_icons/connect.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 190px;
	line-height: 75px;
}
#navlinks li#index.current {
	background-position: -190px;
}
#navlinks li#portfolio.current {
	background-position: -190px;
}
#navlinks li#services.current {
	background-position: -190px;
}
#navlinks li#bio.current {
	background-position: -190px;
}
#navlinks li#contact.current {
	background-position: -190px;
}
/* ------------------------- End of navlinks image button styles site wide ------------------------- */

/* ------------------------- End of sidebar styles site wide ------------------------- */

/* ------------------------- Main Content styles site wide go here ------------------------- */

#mainContent { 
	margin: 0 20px 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #000000;
}
.content-top {
	background-image: url(../images/backgrounds/rounded_edges_top2.png);
	height: 20px;
	margin: 0;
	padding: 0;
}
.content-bottom {
	background-image: url(../images/backgrounds/rounded_edges_bottom2.png);
	height: 20px;
	clear: right;
}
#content-bkg {
	margin: 0;
	padding: 20px;
	background-color: #CCCCCC;
} 
.content-box {
	margin: 0 0 20px 0;
	padding: 0;
}
.content-box .boxes-top {
	background-image: url(../images/backgrounds/rounded_edges_top_line.png);
	height: 20px;
	margin: 0;
	padding: 0;
}
.content-box .boxes-center {
	background-color: #FFFFFF;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
	margin: 0;
	padding: 10px 20px;
}
.content-box .boxes-center h2 {
	margin: 0;
	padding: 10px 0;
}
.content-box .boxes-center .image {
	margin: 35px 0 0 18px;
}
.content-box .boxes-bottom {
	background-image: url(../images/backgrounds/rounded_edges_bottom_line.png);
	height: 20px;
	margin: 0;
	padding: 0;
}

	/* ***** ------------------------- content styles for index go here ------------------------- ***** */
.index .content-box #content-left {
	float: left;
	width: 285px;
	margin: 0 5px;
	display: inline;
}
.index .content-box #content-center {
	float: left;
	width: 285px;
	margin: 0 5px;
	border-left: 1px solid #666666;
}
.index .content-box #content-right {
	float: left;
	width: 285px;
	margin: 0 5px;
	border-left: 1px solid #666666;
}
.index .content-box .boxes-center p {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
}
.index .content-box .boxes-center h3 {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
}
	/* ***** ------------------------- End of content styles for index ------------------------- ***** */
	
	/* ***** ------------------------- content styles for portfolio go here ------------------------- ***** */
	
.portfolio .content-box #content-left {
	float: left;
	width: 285px;
	margin: 0 5px;
	display: inline;
}
.portfolio .content-box #content-center, .portfolio .content-box #content-bottomcenter {
	float: left;
	width: 285px;
	margin: 0 5px;
	border-left: 1px solid #666666;
}
.portfolio .content-box #content-right, .portfolio .content-box #content-bottomright {
	float: left;
	width: 285px;
	margin: 0 5px;
	border-left: 1px solid #666666;
}
.portfolio .content-box #content-bottomleft {
	float: left;
	width: 285px;
	margin: 0 5px;
	display: inline;
}
.portfolio .content-box #content-linebreak {
	height: 1px;
	border-top: 1px solid black;
	margin: 0 0 20px 0;
}
.portfolio .content-box .boxes-center p {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
}
.portfolio .content-box .boxes-center h2 {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
}
.portfolio .content-box .boxes-center h3 {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
}
.portfolio .content-box .boxes-center img {
	margin: 0 0 1em 0;
	padding: 0 0 0 10px;
	border: 0px;
}
.portfolio .content-box #content-top {
	height: 340px; /* A height rule should only be given to this element if you have removed the <br class="clearfloat" /> element from the #content-top div in the portfolio.html document.
						  This clearing rule is in place to properly align the content divs. It should only be removed if it is causing white space problems.
						  If the clearing element is removed, the height rule in this css should be un-commented and given a pixel height appropriate to the layout. */
}	
	/* ***** ------------------------- End of content styles for portfolio ------------------------- ***** */
	
.brand #goback { 
	padding: 0 0 10px 0;
}	
.motiongraphics #goback { 
	padding: 0 0 10px 0;
}	
.print #goback { 
	padding: 0 0 10px 0;
}
.event #goback { 
	padding: 0 0 10px 0;
}
.web #goback { 
	padding: 0 0 10px 0;
}
	
	/* ***** ------------------------- content styles for services go here ------------------------- ***** */

.first {
}
.services .left-column {
	float: left;
	width: 300px;
}
.services .right-column {
	margin: 0 0 0 320px;
}
.services .icon {
	float: left;
	width: 100px;
	margin: 0 10px 10px 0;
}

	/* ***** ------------------------- End of content styles for services ------------------------- ***** */

	/* ***** ------------------------- content styles for bio go here ------------------------- ***** */

.bio .content-box .boxes-center {}	
	
	/* ***** ------------------------- End of content styles for bio ------------------------- ***** */
	
	/* ***** ------------------------- content styles for contact go here ------------------------- ***** */
	
.contact .content-box .boxes-center h3 {
	color: #9E0B0F;
}
#contact-watermark {
	background: url(../images/icons/contact_icon_lg.png) no-repeat;
	width: 350px;
	height: 250px;
	float: right;
	margin: 200px 0 0 0;
	padding: 0;
}

	/* ***** ------------------------- End of content styles for contact ------------------------- ***** */

	/* ***** ------------------------- content styles for flash video player go here ------------------------- ***** */
		
#webstunning_video_player, #webstunning_playlist {
	width: 640px;
	margin: 0 auto;
}

	/* ***** ------------------------- End of content styles for flash video player ------------------------- ***** */
	
/* ------------------------- End of main content styles site wide ------------------------- */

/* ------------------------- Footer styles site wide go here ------------------------- */

#footer { 
	padding: 0;
	background:#000000;
	text-align: center; 
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-size: 9pt;
	color: #FFFFFF;
}

/* ------------------------- End of footer styles site wide ------------------------- */

/* ------------------------- Clear element styles site wide go here ------------------------- */

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.clearleft {
	clear: left;
}
.clearright {
	clear: right;
}
.clearboth {
	clear: both;
}

/* ------------------------- End of clear element styles site wide ------------------------- */

/* ------------------------- These are unused styles. They can be used anywhere you want. ------------------------- */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}


/* ------------------------- End of unused styles ------------------------- */