/*
Title:		10 CSS3 Features You Will Love and Want to Use
Author:		Cody Robertson - TutToaster.com
*/

/* -- BASICS -- */

body {
	background:#fafafa;
	color: #444;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 12px;
}
		
h1 {
	font-size: 34px;
	letter-spacing: -2px;
	line-height: 34px;			
}
		
.right {
	float: right;
	font-size: 14px;
	line-height: 18px;
	width: 500px;
}
		
#read-more {
	border-width: 0 10px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	-moz-border-image: url(../images/GRButtons.png) 0 12 0 12 stretch stretch;
	-webkit-border-image: url(../images/GRButtons.png) 0 12 0 12 stretch stretch;
	padding: 20px;
	text-align: center;
	text-shadow: 1px 1px 1px #48680a;
}
		
#read-more a{
	color: #fff;
}		
		
a {
	color: #444;
	text-decoration: none;
	margin-left: 5px;
}
		
a:hover {
	color: #4b0a03;
	text-decoration: none;
}
		
.container {
	background: #fff;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-moz-box-shadow: 0 0 10px rgba(173, 173, 173, 0.75);
	-webkit-box-shadow: 0 0 10px rgba(173, 173, 173, 0.75);
	width: 800px;
	margin:50px auto;
	padding: 30px;
}
		
ul.no-image {
	list-style: none;
	font-size: 12px;
	padding-bottom: 30px;	
}
		
li {
	margin-bottom: 5px;
	list-style: none;
	padding: 5px;
}

/* -- HERE BEGINS THE STYLING OF THE CSS3 FUNCTIONS -- */
		
/* -- Border Radius -- */	
		
		#border_radius {
			background-color: #4b0a03; 
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			color: #fff;
			font-weight: bold;
			padding: 15px; 
			text-align: center;
			text-shadow: 1px 1px 1px #000;
		}
		
/* -- Border Image -- */	
		
		#border_image {
			border-width: 0 10px;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			-moz-border-image: url(../images/RButton.png) 0 12 0 12 stretch stretch;
			-webkit-border-image: url(../images/RButton.png) 0 12 0 12 stretch stretch;
			padding: 18px;
			text-align: center;
			text-shadow: 1px 1px 1px #000;
		}
		
/* -- Box Shadow -- */	
		
		#box_shadow {
			background-color: #fff; 
			border: 1px solid #eee;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			-moz-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
			-webkit-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
			padding: 15px;
			text-align: center;
		}
		
/* -- Multi Column -- */	
		
		#multi-column {
			background-color: #fff; 
			border: 1px solid #eee;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px;
			/* For Mozilla: */
			-moz-column-gap: 1em;
			-moz-column-rule: 1px solid #000;
			-moz-column-count: 3;
			/* For WebKit: */
			-webkit-column-gap: 1em;
			-webkitcolumn-rule: 1px solid #000;
			-webkit-column-count: 3;
			padding: 15px;
		}
		
/* -- Multiple Backgrounds -- */	
		
		#multiple_backgrounds {
			background: url(../images/bottom.png) bottom 117px no-repeat, url(../images/top.png) top left no-repeat;
			margin-bottom: 10px;
			height: 47px;
			width: 254px;
		}
		
/* -- Font Face -- */
		
		@font-face {
			font-family: "MarketingScript";
			src: url(../font/MarketingScript.ttf) format("opentype");
		}

		#font-face {
			font-size: 34px;
			font-family: "MarketingScript", sans-serif;
		}
		
/* -- Attribute Selectors -- */
		
		li[title^=a] {
			background: #4b0a03;
			color: #fff;
			list-style: none;
		}

		li[title^=b] {
			background: #fff;
			color: #333;
			list-style: none;
		}
		
/* -- :nth-child() and :nth-of-type() -- */
		
		#nth-child li:nth-child(2n+1) {
			background: #4b0a03;
			color: #fff;
		}
		
/* -- Opacity and RGBA	-- */
	
		#opacity-RGBA {
			background: rgba(000, 000, 000, 0.7);
			padding: 20px;
			color:#fff;
		}