/*  

Author: Kya
Contact: kyaish@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. 

*/


/* Basic Layout Structure */

body
{	color: #000;
	font-family: Helvetica, Georgia, "Trebuchet MS", Arial, Tahoma, Verdana,  Georgia;
	font-size: 11pt;
        background: #f4f4f4 url(background.jpg);
	margin: 0px;
	padding: 0px;
        line-height: 25px;
        text-align: justify;}

#header
{	width: 800px;
	overflow: hidden;
	margin: 30px auto 30px auto;}

#name
{	width: 300px;
	text-align: left;
	font-size: 20pt;
	color: #3f758c;
	font-weight: bold;
	padding: 10px 0px 10px 0px;
	overflow: hidden;
	float: left;}

	#name a
	{	color: #3f758c;}

#stats
{	width: 500px;
	text-align: right;
	font-weight: bold;
	color: #FFF;
	padding: 10px 0px 10px 0px;
	float: right;}

#head
{	width: 800px;
	color: #FFF;
	border: 1px solid #6cb5d5;
	clear: both;
	overflow: hidden;
	margin: 0px auto;}

	#headtitle
	{	width: 800px;
		padding: 0px 0px 0px 0px;
		float: left;
 		background: #9db8b1 url(title.jpg); 
		height: 200px; 
		width: 800px;}

	#headtitle h2
	{	font-size: 40pt;
		padding: 50px 0px 0px 350px;
		color: #e2e2e2;}


	#menu
	{	width: 800px;
		height: 75px;
		background: #3f484d url(menu.jpg);
		padding: 0px 0px 0px 0px;
		margin: 0px auto 0px auto;
		text-align: center;
		clear: both;
		overflow: hidden;
		word-spacing: 4px;
		border: 1px solid #3f484d;
		font-size: 13pt;
		font-family: "Trebuchet MS";}

	#menu a
	{	padding: 25px 33px 25px 33px;
		margin: 0px 2px 30px 2px;
		color: #9fb6c2;
		float: left;
		border-right: 1px solid #3f484d;
		text-decoration: none;}

	#menu a:hover
	{	color: #b42a28;
	text-decoration: none;}


#menu a.end
	{ border-right: 0px solid #43454c;}



#wrapper
{	width: 800px;
	clear: both;
	overflow: hidden;
	background: #FFF url(wrap.jpg) 0 0 repeat-x;
	margin: 0px auto;}
#wrap
{	width: 800px;
	overflow: hidden;
	border-left: 1px solid #bebebe;
	border-right: 1px solid #bebebe;
	margin: 0px auto;}

#sidebar
{	width: 180px;
	float: right;
	padding: 20px 20px 20px 0px;
	font-size: 9pt;}

	#sidebar p
	{	background: #efefef;
		padding: 10px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border: 1px solid #e2e3e3;}

	#sidebar a
	{	color: #9c9c9c;}

	#sidebar a:hover
	{	color: #ab6b6b;}

#content
{	width: 560px;
	padding: 20px 20px 20px 20px;}

#foot
{	width: 800px;
	background: #92aeaf url(footer.jpg);
	clear: both;
	color: #e7eaea;
	border: 1px solid #92aeaf;
	text-align: center;
	font-size: 10pt;
	padding: 15px 0px 15px 0px;
	margin: 0px auto 30px auto;}

#foot a
{	color: #cad4d4;}

/* Basic Style Elements */

a
{	color: #5da5a5;
	text-decoration: none;}

a:hover
{	color: #cb6085;
	text-decoration: underline;}


h2
{	color: #95aab5;}

blockquote
{	font-size: 10pt;
	color: #7b7b7b;}

ul
{	list-style-image: url(bullet.png);}

table
{	margin: 0px auto;}

.sweet td
{	border-bottom: 1px dotted #E3E5E2;
	padding: 0px 20px 0px 20px;}

/* My IDs and Classes */

.pad
{ 	border: 5px solid #abcac2;
	margin: 5px;
	background: #abcac2;}

.codes
{	text-align: center;}

.codes img
{ 	border: 5px solid #abcac2;
	margin: 3px;
	background: #abcac2;}

.codes a img
{ 	border: 5px solid #abcac2; 
	background: #abcac2;}

.codes a:hover img
{	border: 5px solid #59b7d9;
	background: #59b7d9;}

.sidebarcode
{ 	border: 5px solid #abcac2;
	background: #abcac2;
	margin: 5px 0px 0px 0px;}




.codesort img
{ 	border: 5px solid #abcac2;
	margin: 3px;
	background: #abcac2;}

.codesort a img
{ 	border: 5px solid #abcac2; 
	background: #abcac2;}

.codesort a:hover img
{	border: 5px solid #59b7d9;
	background: #59b7d9;}


