
/* Author: Kya
Contact: beehugs@gmail.com
Collective: http://dazzle.nu
Personal Blog: http://kya.nu
Comments: I have spent many hours working on this layout and playing with the CSS so I appreciate that no one directly takes ALL of the design elements in this file. I can't stop you from taking snippets and I guess that is how many of us learn. So if you are here to see how I have created some effects I hope it can help in some way, as long as it's being taken for the right reasons and not just to simply copy one of my designs. */



/* -- BASE STYLES --

Description: These are the general styles that are used around in the design.
Tips: Try and use a font that most people have and have fun. ;D

*/


body
{	color: #4F4F4F;
	font-family: "Trebuchet MS", Arial, Tahoma, Verdana,  Helvetica, Georgia;
	font-size: 13px;
        background: #b4bd90 url(background.png);
	margin: 0px;
	padding: 0px;
        line-height: 25px;
        text-align: justify;}

b, strong
{	color: #4F4F4F;}

a
{	color: #626849;
	border-bottom: 1px dotted #e3ebce;
	text-decoration: none;}

a:hover
{	color: #adb956;
	border-bottom: 1px dotted #e3ebce;
	text-decoration: none;}

fieldset
{	border: 2px dashed #f6f4e1;
	margin: 25px auto;
	background: #FFF;}

legend
{	font-size: 35px;
	color: #15c2fb;}

.input1
{	margin: 10px 20px 10px 20px;
	display: block;}

.input2
{	margin: 0px 10px 0px 10px;}

label
{	width: 100%;
	display: block;}

table
{	margin: 0px auto;
	text-align: center;}

li
{	list-style: url(bullet.png);}


h2
{	color: #d1df58;
	text-shadow: 1px 1px 1px #2c1912;
	font-size: 30px;
	padding: 10px 0px 0px 0px;
	margin: 0px;}


h3
{	color: #b9c294;
	text-shadow: 1px 1px 1px #2c1912;
	font-size: 20px;
	padding: 10px 0px 0px 0px;
	margin: 0px;}

blockquote
{	background: #EFEFEF;
	padding: 15px;
	margin: 30px auto;
	width: 80%;
	font-style: italic;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-webkit-box-shadow: 4px 4px 4px #c6bcc9;
	-moz-box-shadow: 4px 4px 4px #c6bcc9;
	box-shadow: 4px 4px 4px #c6bcc9;}

img
{	background: #d4dcb3;
	padding: 5px;}

a img
{	background: #d4dcb3;
	border: 0px;
	padding: 5px;}	

a:hover img
{	background: #cfe254;}


/* -- LAYOUT STRUCTURE --

Description: Styles used to structure the website.
Tips: Using the wrap styles you can make the layout full page, or you can leave them empty for a smaller layout.

*/


#menuwrap
{	width: 900px;
	overflow: hidden;
	margin: 0px auto;}

	#title
	{	width: 300px;
		height: 100px;
		float: left;}

	#title span
	{	display: none;}

	#title a
	{	width: 300px;
		height: 100px;
		display: block;
		background: url(title.png);}

	#title a:hover
	{	width: 300px;
		height: 100px;
		display: block;
		background: url(titleh.png);}

	#menu
	{	text-align: center;
		width: 490px;
		float: right;
		background: #d0dc54;
		-moz-border-radius: 25px;
		-webkit-border-radius: 25px;
		border: 5px solid #c3cd5f;
		padding: 35px 0px 20px 0px;
		margin: -25px 0px 0px 0px;}

	#menu a
	{	text-decoration: none;
		font-size: 20px;
		text-transform: lowercase;
		padding: 10px 15px 10px 15px;
		color: #FFF;
		border-bottom: 0px;
		text-shadow: 1px 1px 1px #4d511d;}

	#menu a:hover
	{	color: #eff6d5;
		text-shadow: 1px 1px 1px #4d511d;
		border-bottom: 0px;}

#wrap
{	width: 900px;
	background: #fefefc;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border: 10px solid #d6e1a9;
	margin: 30px auto;
	padding: 15px;}

#headwrap
{	width: 100%;}

	#head
	{	height: 200px;
		background: #d9e0bd url(head.png);
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		overflow: hidden;
		margin: 0px auto 0px auto;}

	#head p
	{	width: 500px;
		padding: 20px 0px 0px 370px;
		font-size: 20px;}



#contentwrap
{	width: 100%;}

	#content
	{	margin: 0px auto;
		background: #FFF;
		padding: 20px 0px 0px 0px;}

#sidebar
{	width: 250px;
	float: right;
	font-size: 11px;}

#sidebar p
{	background: #f4f9d8;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	text-shadow: 1px 1px 1px #b7be92;
	letter-spacing: 1px;
	padding: 20px;}

#sidebar hr
{	height: 1px;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 2px dashed #f6f4e1;}

#page
{	width: 630px;
	padding: 10px 20px 10px 0px;}

#footerwarp
{	width: 100%;}

	#footer
	{	margin: 0px auto;
		font-size: 10px;
		overflow: hidden;
		text-align: center;
		letter-spacing: 2px;
		font-style: italic;
		padding: 5px 0px 0px 0px;
		clear: both;}

	#footerone
	{ }

	#footertwo
	{ }

	#footerthree
	{ }

	#footer p
	{	color: #828282;
		padding: 0px;}


/* -- EXTRA STYLES --

Description: Extra styles that have been added.
Tips: More styles that are used and do not fit in with the structure of the site are placed here.

*/



/* 
STYLE: Pretty Forms
EFFECT: Makes forms look very very pretty! :D
Credit: net.tutsplus.com
*/

input, textarea, select {
	padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}

textarea {
	width: 400px;
	max-width: 400px;
	height: 150px;
	line-height: 150%;
	}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: #C9C9C9;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

.form label {
	margin-left: 10px;
	color: #999999;
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
