/*  
Theme Name: 21 Ruby Lane
Theme URI: http://www.21rubylane.com
Description: This is the custom theme created for 21 Ruby Lane.
Version: 3.0
Author: Valerie Wininger
Author URI: http://www.21rubylane.com/

*/

* { margin:0; padding:0; border:0; }

ul { list-style:none; }
a { color:#EE3524; text-decoration:none; }
h1 { font-size:1.6em; }
code {
	display:block;
	background-color:#ffffff;
	border:1px solid #000000;
	font-family:"Courier New", Courier, monospace;
	font-size:11px;
	padding:5px;
	color:black;
}

body {
	background-image:url(images/floral-pattern.jpg);
	font-size:100%;
	font-family:Arial, Helvetica, sans-serif;
	height:100%;
	color:#42210B;
}

#container {
	background-image:url(images/paper-bg.png);
	background-repeat:repeat-y;
	width:663px;
	margin:0 auto;
}

#header {
	width:643px;
	float:left;
	height:96px;
	margin-left:10px;
	background-image:url(images/header.jpg);
	display:inline;
}

#header img {
	margin:22px 0 0 8px;
}

#navigation {
	width:643px;
	float:left;
	clear:both;
	height:34px;
	background-color:#f8b5b0;
	margin-left:10px;
	display:inline;
}

	#navigation ul {
		width:543px;
		margin:0 auto;
	}

	#navigation li {
		float:left;
		width:auto;
		margin-top:6px;
	}

	#navigation a {
		display:block;
		float:left;
	}
	
	#home-nav {
		background-image:url(images/home-nav.gif);
		width:59px;
		height:22px;
	}
	
	#home-nav:hover {
		background-image:url(images/home-nav-over.gif);
	}
	
	#services-nav {
		background-image:url(images/services-nav.gif);
		width:90px;
		height:22px;
	}
	
	#services-nav:hover {
		background-image:url(images/services-nav-over.gif);
	}
	
	#portfolio-nav {
		background-image:url(images/portfolio-nav.gif);
		width:93px;
		height:22px;
	}
	
	#portfolio-nav:hover {
		background-image:url(images/portfolio-nav-over.gif);
	}
	
	#pricing-nav {
		background-image:url(images/pricing-nav.gif);
		width:82px;
		height:22px;
	}
	
	#pricing-nav:hover {
		background-image:url(images/pricing-nav-over.gif);
	}
	
	#blog-nav {
		background-image:url(images/blog-nav.gif);
		width:65px;
		height:22px;
	}
	
	#blog-nav:hover {
		background-image:url(images/blog-nav-over.gif);
	}
	
	#about-nav {
		background-image:url(images/about-nav.gif);
		width:68px;
		height:22px;
	}
	
	#about-nav:hover {
		background-image:url(images/about-nav-over.gif);
	}
	
	#contact-nav {
		background-image:url(images/contact-nav.gif);
		width:86px;
		height:22px;
	}
	
	#contact-nav:hover {
		background-image:url(images/contact-nav-over.gif);
	}
	
	#Home a#home-nav {
		background-image:url(images/home-nav-over.gif);
	}
	
	#Services a#services-nav {
		background-image:url(images/services-nav-over.gif);
	}
	
	#Portfolio a#portfolio-nav {
		background-image:url(images/portfolio-nav-over.gif);
	}
	
	#Pricing a#pricing-nav {
		background-image:url(images/pricing-nav-over.gif);
	}
	
	#Blog a#blog-nav {
		background-image:url(images/blog-nav-over.gif);
	}
	
	#About a#about-nav {
		background-image:url(images/about-nav-over.gif);
	}
	
	#Contact a#contact-nav {
		background-image:url(images/contact-nav-over.gif);
	}


#content {
	width:643px;
	float:left;
	font-size:.75em;
	color:#5A1400;
	height:100%;
	margin:0 0 50px 10px;
	display:inline;
}

#content-callout {
	height:165px;
	border-top:7px solid #42210B;
	border-bottom:7px solid #42210B;
	background-color:white;
}

#callout-text {
	width:310px;
	height:145px;
	float:left;
	margin:20px 65px 0 22px;
}
	
	.callout {
		margin:0 0 12px;
		line-height:1.2em;
	}

#slider {
	width:200px;
	height:158px;
	background-image:url(images/slider-bg.jpg);
	overflow:hidden;
	margin:3px 0 0 0;
	float:left;
}

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
	
#slider li{ 
	width:179px;
	height:140px;
	margin:8px 11px 8px 10px;
	overflow:hidden; 
	}
	
#recentposts .excerpt {
	float:left;
	clear:both;
	display:block;
	margin:0 0 9px 0;
	position:relative;
}

#recentposts .date-time {
	margin:0 5px 0 0;
	float:left;
}

#recentposts .odd .recent-content {
	display:block;
	float:left;
	background-color:#F3776F;
	width:254px;
	padding:7px;
}

#recentposts .even .recent-content {
	display:block;
	float:left;
	background-color:#F69D9A;
	width:254px;
	padding:7px;
}


.recent-content a {
	color:#FFEFEF;
}

.recent-content a.more-link {
	position:absolute;
	bottom:5px;
	right:5px;
}

#recentposts a:hover {
	text-decoration:underline;
}

#lower-content #search-form {
	margin:0 0 0 60px;
}

#lower-content #search-form .submit-button {
	width:auto;
	padding:0;
	margin:2px 0 0 5px;
}


#project-highlight {
	float:left;
	margin:15px 0 30px 42px;
	display:inline;
}
	
	#project-highlight img {
		float:left;
		clear:left;
	}
	
	#project-highlight img.proj-highlight-image {
		margin-top:8px;
	}
	
	#proj-highlight-detail {
		float:left;
		margin:52px 0 0 37px;
		width:170px;
		font-size:.9em;
	}
	
	#proj-highlight-detail ul {
		margin:15px 0 0 0;
	}
	
		#proj-highlight-detail ul li {
			font-weight:bold;
			margin:0 0 3px 1em;
			text-indent:-.6em;
		}
	
	#proj-highlight-detail a.rollover:hover {
		text-decoration:underline;
	}

#home-bottom-section {
	float:left;
	clear:both;
	margin:0 0 20px 42px;
	width:556px;
	display:inline;
}

	img.heading {
		margin-bottom:8px;
	}

	#recent-posts {
		width:328px;
		float:left;
		display:inline;
	}
	
	#spotlight {
		float:left;
		width:187px;
		margin-left:41px;
		display:inline;
	}
	
	#lower-content a:hover {
		text-decoration:underline;
	}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// SERVICES PAGE STYLES ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#Services h2 {
	margin:23px 0 27px 40px;
}

.services-table {
	width:482px;
	float:left;
	margin:0 0 0 50px;
	display:inline;
}

.services-label {
	text-transform:uppercase;
	color:#EE3524;
	font-size:1em;
	width:140px;
	font-weight:bold;
	vertical-align:top;
}

.services-list {
	font-style:italic;
	width:339px;
	float:left;
	margin-bottom:15px;
	vertical-align:top;
}

#lower-content p {
	float:left;
	clear:both;
	margin-bottom:10px;
	width:503px;
	margin-left:55px;
	display:inline;
}


/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// PRICING PAGE STYLES ////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#pricing-buttons {
	width:550px;
	margin:15px 0 15px 50px;
	float:left;
	display:inline;
}

#pricing-buttons li {
	display:inline;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

#pricing-buttons a {
	display:block;
}

#basic-button {
	background-image:url(images/services/basic-website-off.gif);
	width:100px;
	height:24px;
}

#basic-button:hover {
	background-image:url(images/services/basic-website-on.gif);
}

#blog-button-pricing {
	background-image:url(images/services/blog-website-off.gif);
	width:94px;
	height:24px;
}

#blog-button-pricing:hover {
	background-image:url(images/services/blog-website-on.gif);
}

#port-button {
	background-image:url(images/services/portfolio-site-off.gif);
	width:98px;
	height:24px;
}

#port-button:hover {
	background-image:url(images/services/portfolio-site-on.gif);
}

#cms-button {
	background-image:url(images/services/cms-website-off.gif);
	width:94px;
	height:24px;
}

#cms-button:hover {
	background-image:url(images/services/cms-website-on.gif);
}

#ecommerce-button {
	background-image:url(images/services/ecommerce-site-off.gif);
	width:114px;
	height:24px;
}

#ecommerce-button:hover {
	background-image:url(images/services/ecommerce-site-on.gif);
}

#extras-button {
	background-image:url(images/services/web-extras-off.gif);
	width:86px;
	height:24px;
}

#extras-button:hover {
	background-image:url(images/services/web-extras-on.gif);
}

#illustration-button {
	background-image:url(images/services/illustration-off.gif);
	width:89px;
	height:23px;
}

#illustration-button:hover {
	background-image:url(images/services/illustration-on.gif);
}

#printing-button {
	background-image:url(images/services/printing-off.gif);
	width:74px;
	height:23px;
}

#printing-button:hover {
	background-image:url(images/services/printing-on.gif);
}

#branding-button {
	background-image:url(images/services/branding-off.gif);
	width:74px;
	height:23px;
}

#branding-button:hover {
	background-image:url(images/services/branding-on.gif);
}

#lower-content p.pricing-info {
	font-style:italic;
	display:inline;
}

#lower-content h1 {
	text-transform:uppercase;
	font-size:12px;
	width:100%;
	clear:both;
	float:left;
	margin:10px 0 6px 55px;
	display:inline;
}

ul.services-pricing {
	list-style:disc;
	margin:0 0 12px 70px;
	padding-left:10px;
	clear:both;
	font-style:italic;
	width:450px;
}


/*///////////////////////////////////////////////////////////////////////////////////
//////////////////      PORTFOLIO STYLES     ////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////*/
	
	#Portfolio #lower-content p {
		width:auto;
	}
	
	#Portfolio .port-entry {
		background-image:url(images/port-frame.png);
		background-repeat:no-repeat;
		width:255px;
		height:115px;
		display:inline;
		float:left;
		margin:0 7px 20px;
	}
	
	#Portfolio h2.main-heading {
		clear:both;
		margin:15px 0 10px 50px;
		width:100%;
		display:inline;
	}
	
	#Portfolio .port-section {
		width:538px;
		clear:both;
		margin:10px auto 20px;
	}
	
	#Portfolio .port-thumb {
		float:left;
		margin:10px 0 0 9px;
	}

	#lower-content div.port-info-container {
		width:110px;
		height:115px;
		float:left;
		position:relative;
		display:inline;
	}
	
		#lower-content .port-title {
			color:#42210B;
			font-size:12px;
			font-weight:bold;
			margin:8px 0 2px 5px;
			width:auto;
			clear:none;
		}
		
		#lower-content p.port-descrip {
			font-size:10px;
			color:#F69D9A;
			width:auto;
			clear:both;
			float:left;
			margin:4px 0 0 7px;
			display:inline;
		}
		
		#lower-content p.port-larger-image {
			text-align:right;
			font-size:8px;
			position:absolute;
			bottom:9px;
			right:0;
			margin:0;
		}
		
			.port-larger-image a {
				color:#EE3524;
				text-transform:uppercase;
				font-weight:bold;
			}
		
		#Portfolio #lower-content p.port-view-live {
			text-align:right;
			font-size:8px;
			position:absolute;
			bottom:10px;
			right:0;
			clear:none;
			width:100%;
		}
		
			.port-view-live a {
				color:#EE3524;
				text-transform:uppercase;
				font-weight:bold;
				
			}
			
			.port-view-live img, .port-larger-image img {
				vertical-align:middle;
				margin-left:2px;
			}
		#Portfolio img, #id-port p.port-larger-image img, #web-port p.port-larger-image img, #print-port p.port-larger-image img {
			border:none;
			vertical-align:middle;
			margin-left:2px;
		}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// CONTACT PAGE STYLES ////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

h2 {
	margin:23px 0 0 40px;
	clear:both;
	float:left;
	display:inline;
}

.contact-table {
	width:328px;
	float:left;
	clear:both;
	margin:27px 0 0 50px;
	display:inline;
}

.contact-label {
	text-transform:uppercase;
	color:#EE3524;
	font-size:1em;
	width:180px;
	font-weight:bold;
	vertical-align:top;
}

.contact-table a {
	color:#5A1400;
}

.contact-list {
	font-style:italic;
	width:135px;
	float:left;
	margin-bottom:15px;
	vertical-align:top;
}

#contact-form {
	float:left;
	clear:both;
	margin:10px 0 0 60px;
	width:440px;
	display:inline;
}

.cf_hidden { display:none; }

input {
	background-image:url(images/input-bg.gif);
	background-repeat:no-repeat;
	width:200px;
	height:22px;
	float:left;
	clear:none;
	padding:4px 4px 0;
}

#contact-form ol {
	list-style:none;
}

#contact-form li {
	display:inline;
	float:left;
}

#contact-form input#cf_field_2, #contact-form input#cf_field_4 {
	margin-right:18px;
}

#contact-form label {
	text-transform:uppercase;
	color:#EE3524;
	font-size:11px;
	display:block;
	margin: 10px 0 2px;
	font-weight:bold;
}

#contact-form textarea {
	background-image:url(images/contact-textarea.gif);
	width:434px;
	height:140px;
	margin-top:2px;
}

#contact-form br {
	display:none;
}

#contact-form input#cforms_captcha {
	margin-right:7px;
}

#contact-form input#sendbutton {
	width:68px;
	height:29px;
	background-image:url(images/submit-button.gif);
	float:right;
	margin-right:5px;
	margin-top:-30px;
}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// QUOTE PAGE STYLES //////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#quoteform {
	float:left;
	clear:both;
	margin:10px 0 0 60px;
	width:440px;
	display:inline;
}

#quoteform ol {
	list-style:none;
}

#quoteform li {
	display:inline;
	float:left;
	clear:both;
	margin-bottom:10px;
}

#quoteform li#li-2-2, #quoteform li#li-2-4, #quoteform li#li-2-6 {
	clear:none;
	margin-left:24px;
}

#quoteform select {
	height:25px;
	width:205px;
	padding-top:5px;
}

#quoteform input.cf-box-b {
	width:auto;
	height:auto;
	margin:0 5px 0 0;
}

#quoteform label.cf-group-after {
	float:left;
	color:#5A1400;
	font-weight:normal;
	margin:0 8px 0 0;
	text-transform:none;
	font-size:12px;
}

#quoteform label {
	text-transform:uppercase;
	color:#EE3524;
	font-size:11px;
	display:block;
	margin: 10px 0 2px;
	font-weight:bold;
}

#quoteform .cf-box-title {
	text-transform:uppercase;
	color:#EE3524;
	font-size:11px;
	display:block;
	font-weight:bold;
	margin:0 0 2px 0;
}

#quoteform fieldset {
	clear:both;
	border:1px dashed;
	padding:10px;
	margin-bottom:10px;
}

#quoteform legend {
	font-size:12px;
	padding:0 7px;
	font-style:italic;
}

#quoteform textarea {
	background-image:url(images/contact-textarea.gif);
	width:434px;
	height:140px;
	margin-top:2px;
}

#quoteform br {
	display:none;
}

#quoteform input#cforms_captcha2 {
	margin-right:7px;
}

#quoteform input#sendbutton2 {
	width:68px;
	height:29px;
	background-image:url(images/submit-button.gif);
	float:right;
	margin-right:5px;
	margin-top:8px;
}

#quoteform .success, #quoteform .success2 {
	clear:both;
}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// BLOG PAGE STYLES ///////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


#Blog #lower-content {
	width:467px;
	float:left;
	display:inline;
}

.post h2 {
	text-indent:-9999px;
	height:0;
	width:0;
	margin:0;
	clear:none;
}

.entry {
	float:left;
	clear:none;
	background-color:#F3776F;
	width:340px;
	padding:10px;
	margin-top:15px;
	color:white;
	display:inline;
}

.entry a {
	color:#42210B;
}

.entry a:hover {
	text-decoration:underline;
}

#lower-content .entry p {
	margin:0 0 10px 0;
	width:100%;
	line-height:1.3;
}

.date-time {
		background-image:url(images/blog-date.png);
		background-repeat:no-repeat;
		float:left;
		display:inline;
		width:54px;
		height:55px;
		color:#591F00;
		text-transform:uppercase;
		text-align:center;
		clear:both;
		margin:10px 3px 0 40px;
	}
	
		.month, .day, .year {
			margin-left:18px;
		}
		
		.month {
			margin-top:8px;
			font-size:10px;
		}
		
		.day {
			font-size:24px;
			line-height:.7em;
			color:#F3776F;
		}
		
		.year {
			font-size:10px;
		}
		
	.bottom-post {
		float:left;
		clear:both;
		margin:7px 0 0 50px;
		display:inline;
		width:407px;
	}
	
	.navigation {
		clear:both;
		margin:0 auto;
		padding-top:30px;
		width:200px;
	}
	
	#lower-content p.postmetadata {
		width:auto;
		display:inline;
	}
	
	/*///// COMMENTS SECTION ///////////*/
	
	.comments-template h3 { 
		clear:both;
		float:left;
		margin:23px 0 0 40px;
	}
	
	.commentlist {
		clear:both;
		float:left;
		margin:23px 0 0 60px;
		display:inline;
	}
	
	.commentlist li {
		float:left;
		clear:both;
	}
	
	#lower-content .commentlist p {
		width:350px;
		float:left;
		margin:5px 0 15px 0;
	}
	
	#commentform {
		margin-top:15px;
		float:left;
		display:inline;
	}
	
	#commentform label {
		text-transform:uppercase;
		color:#EE3524;
		font-size:11px;
		display:block;
		margin: 0 0 2px;
		font-weight:bold;
	}
	
	#commentform .subscribe-to-comments label {
		margin:5px 0 0 8px;
		float:left;
	}
	
	.comments-navigation {
		clear:both;
		float:none;
		text-align:center;
	}
	
	#commentform #submit {
		width:68px;
		height:29px;
		background-image:url(images/submit-button.gif);
	}
	
	#comment {
		background-image:url(images/contact-textarea.gif);
		width:434px;
		height:140px;
		margin-top:2px;
	}
	
#sidebar {
	float:left;
	clear:none;
	width:80px;
	font-size:11px;
	text-align:right;
	margin:50px 0 0 70px;
	display:inline;
}

#sidebar h2 {
	margin:15px 0 5px 0;
	text-align:right;
	float:right;
}

#sidebar a {
	color:#42210B;
	float:right;
	clear:both;
	line-height:1.3;
}

#sidebar a:hover {
	color:#F3776F;
}

/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////// ABOUT PAGE STYLES //////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#lower-content .about-img {
	float:left;
	clear:both;
	margin-right:15px;
	margin-left:60px;
}

#About #lower-content h2 {
	width:100%;
	margin-bottom:20px;
}

#About #lower-content h3 {
	text-transform:uppercase;
	color:#EE3524;
	font-size:12px;
	float:left;
	width:400px;
	margin-bottom:6px;
}

#About #lower-content p {
	width:460px;
	float:left;
	clear:none;
	margin-left:0;
	display:inline;
}
	
#footer {
	width:643px;
	height:100%;
	clear:both;
	background-color:#f9b6b0;
	margin-left:10px;
	border-top:7px solid #42210B;
	position:relative;
}
	
#footer-about {
	width:auto;
	float:left;
	margin:14px 0 0 42px;
	font-size:.7em;
	line-height:1.8em;
	display:inline;
}

	#footer-about p {
		line-height:1.5em;
		float:left;
		clear:both;
		width:100%;
	}
	
	#footer-about h3 {
		font-size:1.8em;
		float:left;
		margin-bottom:3px;
		width:100%;
	}
	
	a.footer-link {
		color:#E50E63;
	}
	
		#footer-badges-contact {
		width:170px;
		height:122px;
		float:right;
		margin:85px 32px 0 0;
		position:relative;
		display:inline;
	}
	
		#footer-links {
			position:absolute;
			top:50px;
			right:45px;
			font-size:11px;
		}
	
		#footer-links li {
			display:inline;
			float:left;
			width:auto;
		}
		
		#footer-links a {
			color:#42210B;
		}
		
		#footer-links a:hover {
			text-decoration:underline;
		}
		
		#footer-links .divider {
			margin:0 4px;
		}
	
		#footer-badges-contact ul.contact {
			margin-top:15px;
		}
		
		#footer-badges-contact li {
			font-weight:bold;
			text-align:right;
			vertical-align:middle;
			font-size:.625em;
		}
		
		#footer-badges-contact a {
			text-decoration:none;
			color:#42210b;
		}
		
		#footer-badges-contact li.phone-contact {
			margin-right:49px;
		}
		
		.phone-contact img {
			position:absolute;
			right:0;
			top:28px;
		}
		
		.contact li {
			margin:7px 0;
		}
		
		li.email-address {margin-top:6px;}
		li.rss-feed img { padding-left:19px; }
		.contact img {
			margin-right:10px;
			vertical-align:bottom;
			padding-left:17px;
		}
		
		.badges {margin-right:2px;}
		.badges img {
			margin:7px 3px 0 0;
		}
		
		#Contact form#searchform {
			width:170px;
			margin-top:0;
		}
	
		#footer-badges-contact input {
			background-color: white; 
			width: 110px;
			height:19px;
			border:0;
			vertical-align:top;
			padding:0;
			margin-right:0;
		}
		
		#footer-badges-contact .submit-button {
			background-image:url(images/search-button.gif);
			background-repeat:no-repeat;
			width:48px;
			height:19px;
			margin-right:9px;
			float:right;
		}
		
		.contact {
			float:right;
		}
		
		.badges li {
			display:inline;
			float:left;
		}
		
		#footer span.copyright {
			text-transform:uppercase; 
			font-size:11px; 
			float:left;
			clear:left;
			padding-top:15px;
			width:300px;
		}

	.clear-both-footer { clear:both; padding-bottom:10px; }
	*:first-child+html .clear-both-footer { float:left; }
	.footer-divider { margin-left:5px; }
	.float-left { float:left; }
	.float-right { float:right; }
	.secret { display:block; width:5px; height:5px; float:left; }
	.highlight { color:#F3776F; }