
/*  

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. 

*/


/* [ THE BASIC WEBSITE ELEMENTS ]

These are basic elements that are featured throughout my website such as links, bold text, block quotes and the like.  */


body
{	color: #565656;
	font-family: Verdana,  Tahoma,  arial, 'Trebuchet MS', georgia, verdana;
	font-size: 10pt;
        background: #FFF url(main.jpg) 0 0 repeat-x;;
	margin: 0px;
	padding: 0px;
        line-height: 25px;
        text-align: justify;}


b, strong 
{       color: #EE1644;
        font-weight:bold;}


a 
{	color: #949494; 
	text-decoration: none;
	border-bottom: 0px solid #FFF;}


a:hover
{       color: #5593AA;
	text-decoration: none;
	border-bottom: 1px dotted #FF6000;}


ul
{	list-style-image: url(bullet.png);}


ol
{	list-style: lower-roman;}


input, textarea, select 
{;	margin: 0px;
	padding: 5px;
	font-weight: normal;}


input:focus, textarea:focus, option:focus, select:focus 
{	font-weight: normal;}


h2
{       color: #54E737; 
        font-size: 20pt;
	font-family: "Trebuchet MS", georgia, verdana;
	font-weight: bold;
	margin: 0px;
        padding: 0px;}


blockquote
{       display: block;
	background: #6CC0D2 url(blockq.jpg);
        padding: 20px;
	line-height: 30px;
	border-left: 10px solid #19C3E7;
        font-weight: normal;}


blockquote a
{	color: #2D93AD;}



/* [ HEADER STYLES ]

These are the classes and style IDs that are featured in the header document of my website. */


#content
{       background: #FFF;
	overflow: hidden;
	margin: 15px auto;
	width: 800px;}


#page
{	padding: 10px;
	width: 790px;
	background: #FFF;
	margin: 15px auto;}


#page h2
{	background: url(h2.jpg);
	height: 45px;
	padding: 12px 0px 0px 55px;}


#title
{	width: 100%;
	height: 130px;
	background: #DAD9BE url(tback.jpg);
	border-bottom: 5px solid #D6C89B;
	padding: 0px 0px 0px 0px;
	margin: 0px auto;
	overflow: hidden;}


#title .t1
{	font-size: 25pt;
	padding: 20px 5px 5px 30px;
	color: #BE4A1C;
	margin: 0px;}


#title .t2
{	font-size: 15pt;
	font-family: 'Trebuchet MS';
	padding: 2px 5px 20px 50px;
	color: #8D8D8D;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0px;}


#sidebar
{	width: 470px;
	float: right;
	margin: -180px 0px 0px 270px;
	background: url(pz.gif);
	border: 2px solid #B2F0A6;
	padding: 10px;}


#sidebar p
{	background: #DDF8D8;
	border: 1px solid #B1EBA5;
	padding: 10px;}


#sidebar h2
{	color: #4C902A;
	font-size: 16pt;}


#head
{       background: #73B2B9 url(main.jpg);
	height: 300px;
	margin: 0px auto;
	width: 100%;}


#dwap {
	width: 800px;
	margin: 0px auto;}


#nav
{	margin: 0px auto;
	clear: both;
	width: 800px;
	padding: 0px;}


#nav a:hover
{	border-bottom: 0px;}


a#xmain
{ 	background: url(xmain.jpg); 
	height: 300px; 
	width: 300px;
	float:left;
	display:inline-block;}


a#xmain span
{ 	display: none; }


a#xmain:hover 
{ 	background: url(xmainh.jpg);}


a#xhome
{ 	background: url(xh.jpg); 
	height: 300px; 
	width: 100px;
	float:left;
	display:inline-block;}


a#xhome span
{ 	display: none; }


#xhome .select
{	background: url(xhh.jpg);}


a#xhome:hover 
{ 	background: url(xhh.jpg);}


a#xcreate 
{ 	background-image: url(xc.jpg); 
	height: 300px; 
	width: 100px;
	margin: 0px;
	float:left;
	display:inline-block;}


a#xcreate span 
{ 	display: none; }


a#xcreate:hover 
{ 	background-image: url(xch.jpg);}


a#xfanlisting
{ 	background-image: url(xf.jpg); 
	height: 300px; 
	width: 100px;
	margin: 0px;
	float:left;
	display:inline-block;}


a#xfanlisting span 
{ 	display: none; }


a#xfanlisting:hover 
{ 	background-image: url(xfh.jpg);}


a#xwebsite
{ 	background-image: url(xw.jpg); 
	height: 300px; 
	width: 100px;
	margin: 0px;
	float:left;
	display:inline-block;}


a#xwebsite span 
{ 	display: none; }


a#xwebsite:hover 
{ 	background-image: url(xwh.jpg);}


a#xlinks
{ 	background-image: url(xa.jpg); 
	height: 300px; 
	width: 100px;
	margin: 0px;
	float:left;
	display:inline-block;}


a#xlinks span 
{ 	display: none; }


a#xlinks:hover 
{ 	background-image: url(xah.jpg);}



/* [ GENERAL WEBSITE STYLES ]

These are the classes and style IDs that are featured in the various pages of my website. */


.pad
{	background: #FFF;
	padding: 10px;
	margin: 15px;}


.codes
{	background: #F2AB00;
	padding: 10px;
	text-align: center;}


.ownco
{	margin: 0px;
	border: 0px;}


.owned
{	text-align: center;}


.owned a:hover 
{	border-bottom: 0px;}


.owned a img 
{ 	border: 10px solid #59C723; }


.owned a:hover img 
{	border: 10px solid #6CE232; }


.affle
{	margin: 2px;
	border: 0px;}


.affiliates
{	text-align: center;}


.affiliates a:hover 
{	border-bottom: 0px;}


.affiliates a img 
{ 	border: 5px solid #F2AB00; }


.affiliates a:hover img 
{	border: 5px solid #F44500; }


.codesort label {
	float: left;
	width: 12em;
	text-align: right;
	margin: 0 0.5em 0 0;}


.codesort img 
{ 	border: 7px solid #F2AB00; }


.codesort a img 
{ 	border: 7px solid #F2AB00; }


.codesort a:hover img 
{	border: 7px solid #F44500;}


.codesort a:hover
{	border-bottom: 0px;}


/* [ FOOTER STYLES ]

These are the classes and style IDs that are featured in the footer document of my website. */


#dazzle
{	width: 100%;
	background: #6BD238 url(dzback.jpg) 0 0 repeat-x;
	color: #CBFFB1;
	font-size: 8pt;
	overflow: hidden;
	margin: 0px auto;
	padding: 55px 0px 10px 0px;
	clear: both;}

#dazzle b
{	color: #CDF8B8;}

#dazzle h2
{	color: #FFF;
	text-align: center;}

#dazzle a
{	color: #A3FA78;
	border-bottom: 1px dotted #5CAA36;}

#dazzle a:hover
{	border-bottom: 1px dotted #ECF410;}

#dazzle .owned a
{	border-bottom: 0px;}

#dazzle .owned a:hover
{	border-bottom: 0px;}

#dazzle .one
{	width: 226px;
	padding: 0px 20px 0px 20px;
	background: url(d.jpg);
	float: left;}

#dazzle .two
{	width: 226px;
	padding: 0px 20px 0px 20px;
	background: url(ss.jpg);
	float: right;}

#dazzle .three
{	width: 226px;
	padding: 0px 20px 0px 20px;
	background: url(s.jpg);
	float: right}

#footer 
{	clear: both;
        background: #5FC22E;
	font-size: 8pt;
	width: 100%;
	color: #2F4E20;
	padding: 1px 0px 1px 0px;
	margin: 0px auto;
	text-align: center;}

#footer p
{	padding: 5px;}

#footer a
{	color: #407626;
	border-bottom: 1px dotted #3E9214;}

#footer a:hover
{	border-bottom: 1px dotted #ECF410;}

#foot
{	text-align: center;
	font-size: 8pt;}



/* Say goodnight to times well lived and smile as the setting suns dips its glowing brow. */