/*
SITE: dudeyjon.com 
TYPE: css 
MEDIA: screen
*/

/* ----- FOUNDATIONS ----- */

html {
	height: 100%;
	padding: 0;
	margin: 0;
}

body { 
	background-color: rgb(47,47,35); 
	padding: 0;
	min-width: 800px;
	background: url(images/loop.jpg) rgb(0,0,0) 0% 0% repeat;
	margin: 0px 4% 0px 4%;
}

* html body {
	border-right: 800px solid rgb(10,10,10);
}

#maincontainer{
	margin: -10px 0 0 0;
	background-color: rgb(24,24,24);
	padding: 0px 15px 0px 10px;
	border-right: 5px solid rgb(141,137,100);
	border-left: 5px ridge rgb(10,10,10);
	border-left: 5px solid rgb(141,137,100);
}

* html #maincontainer {
	display: inline-block; 
	position: relative; 
	margin-right: -800px;
	margin-top: 0px;
}

.cleaner{
	clear: both;
	position: relative;
	display: block;
}


/* ----- HEADER ----- */

#headercontainer{
	width: 100%;
    padding: 0;
	margin: 0;
}

#header{
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(images/bkhead.gif) rgb(149,141,100) 0% 100% repeat-x;
	float: left;
}

#logo{
	border: none;
	display: inline;
	float: left;
	margin: 0px 20px 0px 0px;
	padding: 0;
}

#header h1{
	margin: 0px 0px -30px 0px;
	padding: 20px 0px 0px 50px;
	text-align: left;
	font:  bold 2em "century gothic", sans-serif;
	color: white;
	float: left;
	display: inline;
	position: relative;
}

#header h2{
	margin: 80px 0px 0px 0px;
	padding: 0px 60px 0px 0px;
	text-align: right;
	font: 0.8em verdana, "century gothic", sans-serif;
	color: rgb(16,16,16);
	font-variant: small-caps;
}

#header p{
	margin: 0px 20px 0px 0px;
	padding: 0px 0px 0px 63px;
	text-align: left;
	font: 0.8em "century gothic", sans-serif;
	color: white;
	float: right;
	vertical-align: bottom;
}


/* HEADER - NAVIGATION */

#headernav{
	padding: 0px 50px 0px 40px;
	margin: 20px 0px 0px 0px;
	list-style: none;
	text-align: center;
	border: none;
	float: right;
	display: block;
	min-width: 400px;
	clear: both;
}
	
#headernav li{
	margin: 0px 0px 4px 15px;
	padding: 0px 0px 15px 0px;
	float: right;
	list-style: none;
	text-align: center;
	display: inline;
}
	
#headernav li a{
	padding: 0px 20px 20px 20px;
	margin: 10px 0px 0px -12px;
	list-style: none;
	text-align: center;
	font:  0.8em Verdana, sans-serif;
	text-decoration: none;
	color: white;
color: rgb(141, 137, 100);
	display: inline;
	font-variant: small-caps;
	border-left: 1px solid rgb(0,0,0);
	border-right: 1px solid rgb(0,0,0);
	background: url(images/bkbutton.jpg) rgb(16,16,16) 0% 100% repeat-x;
}

#headernav a:hover{
	color: rgb(42,55,55);
	background: rgb(16,16,16);
}

#headernav .headselected{
	background: url(images/bkbuttonover.jpg) rgb(16,16,16) 0% 100% repeat-x;
	font:  small-caps  0.8em Verdana, sans-serif;
color:white;
}
#headernav .headselected:hover{
	background: url(images/bkbuttonover.jpg) rgb(16,16,16) 0% 100% repeat-x;
	color: rgb(16,16,16);
}

/* ----- CONTENT ----- */

#contentcontainer{
	background: rgb(24,24,24) 0% 0% repeat-x;
	margin: 10px 0% 0px 10px;
	padding: 0;
	position: relative;
}
	
#content{
	width: 74%;
	min-width: 325px;
	float: left;
	clear: left;
	margin: 18px 0% 150px 0%;
	padding: 0;	
	color: white;
	position: relative;
	display: block;
}

.contentlight{
	background: url(images/shadow.gif) rgb(136,133,100) 0% 100% repeat-x;
}

.contentdark{
	background: url(images/shadow.gif) rgb(49,49,41) 0% 100% repeat-x;
}

#contentarea
{
	border-left: 5px solid rgb(8,8,8);
	padding-bottom: 15px;
	margin: 0px;
	position:relative;
		
}

a{
	text-decoration: underline;
	color: rgb(132,149,139);
}

#content h1{
	display: block;
	margin: 0 0 5px 0;
	padding: 10px 0px 10px 25px;
	font: small-caps bold 1em VERDANA, "Century Gothic", sans-serif;
	color: white;
	border-bottom: 1px solid  rgb(184,186,164);
	border-top: 1px solid  rgb(60,60,60);
	border-bottom: 1px solid  rgb(60,60,60);
	background: url(images/headgrad.jpg) rgb(31,34,28) 0% 0% repeat-x;
}

#content h2{
margin: 0px 25px 5px 25px;
padding: 20px 0px 8px 0px;
font:  1.1em georgia, serif;
color: rgb(14, 159, 239);
border-bottom: 1px solid white;
color: rgb(107, 142, 35);
}

#content h3{
margin: 0px 25px 0px 25px;
padding: 20px 0px 5px 0px;
font:  italic 1em georgia, serif;
color: white;
}

#content p{
	margin: 0;
	padding: 10px 25px 5px 25px;
	font: 0.8em Verdana, "Century Gothic", sans-serif;
	display: block;
}

#content ul{
	list-style: square;
font: 0.8em verdana, "century gothic", sans-serif;

margin-left: 20px;
}

.attribhead{
	font: small-caps bold 1em VERDANA, "Century Gothic", sans-serif;
	padding: 0px 10px 0px 0PX;
}

#content .sig{
	font: bold italic 1.5em Georgia, sans-serif;
	border-bottom: 1px solid white;
	display: inline;
	margin: 0px 0 0 30px;
	padding: 0px 30px 0px 5px;
}


/* CONTENT - NAVIGATION */

#contentnav {
	padding:0;
	margin: 0;
	background: url(images/bkcontainer.jpg)  rgb(136,133,100) 0% 0% repeat-x;
	position: relative;
	display: block;
}
#contentnav ul{
	padding:0;
	margin: 0;
}
#contentnav li{
	display:inline;
	padding: 10px;
}

#contentnav li a{
	font: small-caps bold 1.2em verdana, 'century gothic', sans-serif;
	padding: 10px 5px 0px 5px;
	text-decoration: none;
	
}

#contentnav .contentselected{
	color: rgb(10,10,10);
}

#contentnav a:hover{
	color: white;
}


/* CONTENT - IMAGEBOXES */

.contentimg {
	position: relative;
	float: left;
	margin: 20px 20px 20px 25px;
	padding: 0px;
}

.contentimg img {
	display: block;
	border: none;
	border-left: 5px solid rgb(24,33,24);
	border-bottom: 5px solid rgb(24,33,24);
}




/* CONTENT - INSETBOXES */

.insetbox{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	clear: both;
position: relative;
height: 1%;

}

#content .insetbox p{
	margin: 0 0 0 190px;
}

#content .insetbox h2{
	display: block;
	margin: 0 0 10px 0;
	padding: 12px 0px 10px 25px;
	font: small-caps bold 0.9em VERDANA, "Century Gothic", sans-serif;
	color: white;
	background:  rgb(141,137,100)  0% 0% repeat-x;
	border-bottom: 1px solid  rgb(184,186,164);
	border-top: 1px solid  rgb(10,10,10);
	border-bottom: 1px solid  rgb(100,100,100);
	border: 1px solid  rgb(100,100,100);
	color: rgb(10,10,10);
background: url(images/headgrad2.jpg) rgb(136,133,100)  0% 0% repeat-x;
border: 1px solid rgb(36, 37, 31);
	border-top: 1px solid rgb(20,20,20);
}
#content .insetbox h1{
margin: 0 0 10px 0;
}

/* ----- SIDEBAR ----- */

.sidebar{
	width: 22%;
	float: left;
	margin: 80px 1% 0px 0%;
	padding: 0;
	text-align: left;
	background-color: rgb(136,133,100);
}

#sidebarheaderborder{
border-top: 1px solid rgb(10,10,10);	
}

.sidebarbot{
	background: url(images/leftshadow.jpg) rgb(31,34,28) 0% 0% repeat-y;
}

.sidebarheader {
	background: url(images/bkcontainer.jpg) rgb(136,133,100)  0% 0% repeat-x;
	padding: 0;
	margin: 0;
}
		
.sidebarheaderleft {
	background: url(images/bklcontainer.jpg)   0px 0px repeat-y;
	padding: 0;
	margin: 0;
}

.sidebar ul ,ol{
	padding: 15px 0px 0px 0px;
	margin: 0;
	list-style: none;
}

.sidebar li{
	padding:0px 0px 0px 0px;
	margin: 0;
	list-style: none;
	font: 0.7em Verdana, "Century Gothic", sans-serif;
	text-decoration: none;
	color:rgb(118,130,123);
}

.sidebar li a{
	text-decoration: none;
	color: rgb(42,55,55);
}

.sidebar a {
	text-decoration: underline;
	border: none;
	margin: 0;
	padding: 0;
	display: inline;
	color: rgb(132,149,139);
}

.sidebar a:hover {
	color: rgb(42,55,55);
}

.sidebar h1{
	margin: 0;
	padding: 0;
	font:  bold 1em Verdana, "Century Gothic", sans-serif;
	color: rgb(32,34,28);
	text-align: center;
	color: rgb(10,10,10);
	font-variant: small-caps;
}

.sidebar h2{
	margin: 0px 10px 0px 10px;
	padding: 20px 0px 0px 0px;
	background-color: rgb(31,34,28);
	color: white;
	font: small-caps 0.8em VERDANA, "century gothic", sans-serif;
	text-align: left;
	border-bottom: 1px solid white;
}

.sidebar p {
	margin: 0px 0px 0px 0px;
	padding: 15px 10px 15px 10px;
	font: 0.7em Verdana, "Century Gothic", sans-serif;
	color: WHITE;
	background-color: rgb(31,34,28);
	text-align: left;
}
	
#socialnet .delicious-network-username{
	margin: 0px 0px 0px 0px;
	padding: 15px 10px 15px 0px;
	font: 0.7em Verdana, "Century Gothic", sans-serif;
	color: WHITE;
	background-color: rgb(31,34,28);
	text-align: left;
}

.sidebarcontent{
	padding: 0px 5px 0px 20px;
	margin: 0px 14px 0px 0px;
	border: 1px solid black;
	border: none;
	background: url(images/leftshadow.jpg)  rgb(31,34,28) 0% 0% repeat-y;
	border-bottom: 5px solid rgb(10,10,10);
	
}


.sidebar img{
	margin: 0px;
	padding: 20px;
	font: 0.7em Verdana, "Century Gothic", sans-serif;
	color: black;
	text-align: center;
	padding: 0px;
	display: inline;
	border: 1px solid rgb(10, 10, 10);
}

a.FB_Link img{
border: 1px solid rgb(10, 10, 10) !important;
}

#socialnet {
margin: 15px 10px 0px 10px;
}

#lastfmrecords {
	margin: 0 0 0 10px;
}

#lastfmrecords li a{
	margin: 0 10px 10px 0;
	display: block;
	float: left;
}

img.lastfmcover {
margin: 0px;
}

/* ----- FOOTER -----*/

#footer{
	position: relative;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
	background: url(images/bkcontainer.jpg)  rgb(136,133,100) 0% 0% repeat-x;
}

#footer ul{
	list-style: none;
	padding: 0px 0px 15px 0px;
	margin: 0px;
}

#footer li{
	display: inline;
}

#footer a{
	color: black;
	font: 0.6em "Verdana", sans-serif;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
	text-decoration:underline;
	display:inline;
}

#footer p{
	color: black;
	font: 0.6em "Verdana", sans-serif;
	padding: 15px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
}

.validation{
	float:right;
	position:relative;
}

.validation img{
	border: none;
}



/* ----- CORNERS ----- */

/* CORNERS - SECTIONS */

.trsection{
	margin: 0;
	padding: 12px 0px 12px 0px;
	background: url(images/trdark.gif) transparent 100% 0% no-repeat;
}

.tlsection{
	margin: 0;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 12px;
	background: url(images/tldark.gif) transparent 0% 0% no-repeat;
}

.brsection{
	background: url(images/brdark.gif) transparent 100% 100% no-repeat;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.blsection{
	background: url(images/bldark.gif) transparent 0 100% no-repeat;
	padding-bottom: 15px;
	position: relative;
}


/* CORNERS - HEADER */

.brhead{
	background: url(images/brhead.gif) transparent 100% 100% no-repeat;
	padding-bottom: 0%;
	float: right;
	width: 100%;
}

.blhead{
	background: url(images/blhead.gif) transparent 0% 100% no-repeat;
	padding-bottom: 0;
	margin: 0;
	float: left;
	width: 100%;
}


/* CORNERS - BUTTONS */

.trbutton{
	margin: 0;
	margin: 0px 0px 0px 12px;
	padding: 12px 0px 6px 0px;
	background: url(images/trbutton.gif) transparent 100% 0% no-repeat;
}

.tlbutton{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(images/tlbutton.gif) transparent  0% 0% no-repeat;
}


/* CORNERS - INSETBOXES */

.inset span {
	width: 16px;
	height: 16px;
	font-size: 0;
	background-image: url(images/cornerslight.gif);
	position: absolute;
}

.tlinset {
	top: 0;
	left: 0;
}

.trinset {
	top: 0;
	right: 0;
	background-position: 16px 0;
}

.blinset {
	bottom: 0;
	left: 0;
	background-position: 0 16px;
}

.brinset {
	bottom: 0;
	right: 0;
	background-position: 16px 16px;
}

* html .trinset {
	right: -1px;
}

* html .blinset {
	bottom: -1px;
}

* html .brinset {
	bottom: -1px;
	right: -1px;
}


/* CORNERS - GENERIC */

.contentimg span {
	width: 16px;
	height: 16px;
	font-size: 0;
	background-image: url(images/cornersdark.gif);
	position: absolute;
}

.tl {
	top: 0;
	left: 0;
}

.tr {
	top: 0;
	right: 0;
	background-position: 16px 0;
}

.bl {
	bottom: 0;
	left: 0;
	background-position: 0 16px;
}

.br {
	bottom: 0;
	right: 0;
	background-position: 16px 16px;
}

* html .tr {
	right: -1px;
}

* html .bl {
	bottom: -1px;
}

* html .br {
	bottom: -1px;
	right: -1px;
}




table{
margin: 10px 25px;
background-color: rgb(31, 34, 28);
font: 0.8em VERDANA, "Century Gothic", sans-serif;
border: 1px solid rgb(136, 133, 100);
}

th{
font-variant: small-caps;
background-color: rgb(136, 133, 100);
border: none;
color: rgb(24, 24, 24);
}

td{
border: 1px solid rgb(136, 133, 100);
}


/* ----- ACCESSIBILITY ----- */

#skip a, #skip a:hover, #skip a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip a:active
{
position:static;
width:auto;
height:auto;
} 







#contactform {
	width: 520px;
	margin-top: 5px;
}

#contactform input, #contactform textarea {
width: 320px;
font: 0.9em Verdana, sans-serif;
margin: 0px 0px 10px 0px;
color: rgb(132, 149, 139);
background-color:  rgb(141,137,100);
color: rgb(24, 24, 24);
border-top: 1px solid  rgb(20,20,20);
border-left: 1px solid  rgb(20,20,20);
border-bottom: 1px solid  rgb(60,60,60);
border-right:  1px solid  rgb(60,60,60);
padding: 3px;
	
	color: rgb(10,10,10);
background: url(images/headgrad2.jpg) white  0% 0 repeat-x;


}

#contactform textarea {
	height: 90px;
}

#contactform textarea:focus, #contactform input:focus {

background:  rgb(136,133,100)  0% -4px repeat-x;
}

#contactform input.submit-button {
	width: 100px;
	margin: 5px 0px 5px 340px;
	padding: 5px 10px 5px 10px;
	font: small-caps 0.9em verdana, "CENTURY GOTHIC", Verdana, sans-serif;
	border:none;
	color: white;
	background: rgb(31, 34, 28);
	
border-bottom: 1px solid  rgb(10,10,10);
border-right: 1px solid  rgb(10,10,10);
border-top: 1px solid  rgb(60,60,60);
border-left:  1px solid  rgb(60,60,60);
padding: 2px 5px 2px 5px;
}


#contactform label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font: small-caps 0.8em "Verdana", sans-serif;
	color: rgb(132, 149, 139);
}

form #msgcontainer {
padding: 0 0 10px 115px
}
form #msg{
font: small-caps 0.8em "Verdana", sans-serif;
padding: 0;
margin: 0;
}

.cleaner {
	clear: both;
}

#contentcontainer p.articleinfo{
padding: 5px 25px;
margin: 0;
background-color: rgb(107, 142, 35);
color: rgb(5,5,5);
font: 0.7em verdana;
border-top: 1px solid rgb(25, 25, 25);
}

#contentcontainer p.articleinfo span.author{
	float: right;
}