/****************************************
/* CSS
/****************************************/

body {
	background-image : url('/images/background.png');
	font-family : Verdana, Arial;
	color : #8C702C;
	font-size : 13px;
}

.lefty {
	float : left;
	margin : 10px;
}

.clearboth {
	clear : both;
}

#main-content {
	width : 900px; 
	margin-left : auto; 
	margin-right : auto;
}

#katigori {
	position : relative; 
	top : 50px; 
	margin-left : 20px;
}

#navigation {
	float : right; 
	margin-top : 93px; 
	margin-right : 25px;
}

#navigation ul li {
	float : left; 
	margin-right : 10px;
	width : 118px;
	height : 30px;
	padding-top : 2px;
	background-image : url('/images/tab.png');
	text-align : center;
}

#navigation li h2 a {
	color : white;
	font-size : 28px;
	text-decoration : none;
}

#content-top {
	width : 100%; 
	height : 40px; 
	background-image : url('/images/content-top.png');
}

#content {
	width : 858px;
	background-color : white;
	padding : 20px 20px 100px 20px;
	margin-left : 1px;
}
#content h1 {
	font-size : 30px;
	color : #C40061;
}
#content h2 {
	font-size : 24px;
}

#content h2 a, 
#content h2 a:link, 
#content h2 a:visited, 
#content h2 a:hover, 
#content h2 a:active {
	color : #8C702C;
	text-decoration : none;
	font-size : 24px;
}

#content p {
	line-height : 120%;
	padding-top : 5px;
	padding-bottom : 5px;
}

#content p a, 
#content p a:link,
#content p a:visited,
#content p a:hover,
#content p a:active {
	color : #C40061;
	text-decoration : none;
}

#content-base {
	width : 100%; 
	height : 40px; 
	background-image : url('/images/content-bottom.png');
}

#wrapfoot {
	background-position : top; 
	margin-top : -140px;
}

#grass {
	width : 100%; 
	height : 326px; 
	background-image : url('/images/grass.png'); 
	position : top left;
}
#soil {
	width : 100%; 
	height : 84px; 
	background-image : url('/images/soil.jpg');
}
#ground {
	width : 100%; 
	background-color : #a18032;
}
#footwrap {
	margin-left : auto; 
	margin-right : auto; 
	width : 900px;
}
#social {
	width : 434px; 
	float : left;
}
#social .soilpocket-back {
	min-height : 260px;
}
#twitter {
	width : 434px; 
	float : right;
}
.soilpocket-top {
	width : 100%; 
	height : 34px; 
	background-image : url('/images/foot-top.jpg'); 
	display:block;
}
.soilpocket-back {
	background-color : #8c702c; 
	width : 394px;
	color : white;
	padding : 0px 20px 0px 20px;
}
.soilpocket-back h1 {
	font-size : 24px;
}
.soilpocket-back a, 
.soilpocket-back a:link,
.soilpocket-back a:visited,
.soilpocket-back a:hover,
.soilpocket-back a:active {
	color : white;
	text-decoration : none;
}
.soilpocket-back ul {
	list-style-type : disc;
}
.soilpocket-base {
	width : 100%; 
	height : 34px; 
	background-image : url('/images/foot-base.jpg');
	display:block;
}

.feature-work {
			width : 800px;
			border : 2px solid #B8065D;
			-moz-border-radius : 7px;
			-webkit-border-radius : 7px;
			border-radius : 7px;
			margin-left : auto;
			margin-right : auto;
			margin-top : 20px;
			margin-bottom : 20px;
			padding : 20px;
			background-image : url('/images/cornerstars.jpg');
			background-repeat : no-repeat;
			background-position : bottom right;
}

/********************
 * Feature Box
 */

 feature_list h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
			margin-left : auto;
			margin-right : auto;
			/*border : 2px solid #B8065D;
			-moz-border-radius : 7px;
			-webkit-border-radius : 7px;
			border-radius : 7px; */
			margin-top : 20px;
			margin-bottom : 20px;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a:hover {
			text-decoration: underline;
		}

		ul#tabs li a.current {
			background:  url('/images/feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}