/* 	CSS Document for dar-cee.co.uk
	Created by WSD Computing
	Copyright 2008
 */

body	{
	background-image: url(images/bg.gif);
	font-family: Arial, Helvetica, sans-serif;
}


/* main container used to house all contents */
#main	{
	width: 907px;
	position: relative;
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3px;
}

/* the IDs for the white container */
#outerTop	{
	width: 907px;
	background: url(images/outer_top.png) no-repeat;
	height: 8px;
}

#outerMiddle	{
	float: left;
	width: 907px;
	background: url(images/outer_middle.png) repeat-y;
}

#outerBottom	{
	float: left;
	width: 907px;
	background: url(images/outer_bottom.png) no-repeat;
	height: 28px;
}


/* the IDs for the inner container (the one which will hold all the content) */
#inner	{
	position: relative;
	padding: 0;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

#innerBG	{
	position: relative;
	width:892px;
	vertical-align: bottom;
	min-height: 700px;
	margin-left: 9px;
	background: url(images/inner_bg.jpg) repeat-y;
}

#innerPicDJ	{
	position: relative;
	width:892px;
	min-height: 640px;
	background: url(images/dj_bg.jpg) no-repeat;	
}

/* inner footer image */
#innerFooter	{
	float: left;
	border: 10px solid black;
	background: transparent url(images/footer1.png) no-repeat;
	background-position: bottom;
}


/* now IDs for the content containers */
#title	{
	float: left;
	width: 352px;
	padding: 0;
	margin: 0;
}

#content	{
	float: left;
	margin-left: 360px;
	margin-top: -250px;
}

#contentTop	{
	float: left;
	width: 523px;
	height: 60px;
	background: url(images/content_top.png) no-repeat;
}

#contentBox	{
	float: left;
	text-align: justify;
	width: 480px;
	min-height: 500px;
	background: url(images/content_middle.png) repeat-y;
	padding-left: 25px;
	padding-right: 25px;
}

#contentBottom	{
	float: left;
	width: 523px;
	height: 42px;
	background: url(images/content_bottom.png) no-repeat;
}

#contentBottom p {
	color: #eeeeee;
	margin-top: -1px;
}


/* navigation menu styling - thanks to Raphaël GOETTER www.alsacreations.com */
#navBox	{
	position: absolute;
	top: 300px;
	left: 15px;
	width: 350px;
	height: 300px;
	background: transparent url(images/nav_bg.png) top left no-repeat; /* general background for the menu */
}

ul, ul li	{ /* using a list for menu */
	list-style-type: none;  /* cleaning up the list */
	margin:0;
	padding:0;
}

ul	{
	position: absolute; /* positionning for IE5 et IE5.5 */
	height: 300px;
	width: 350px;
}

ul li	{
	display: inline; /* correction for IE5 and IE5.5 */
}

ul li a	{ /* buttons dimensions and definition */
	display: block;  /* block for <a> to give it its dimensions */
	height: 40px;
	width: 338px;
	line-height: 40px;  /* height of line to avoid paddings */
	color: #000000;
	font-size: 18px;
	font-weight: 900;
	text-decoration: none;
	text-align: right;
}

ul li a:hover	{
	color: #FF9900;
	background: transparent url(images/nav_bg.png) top left no-repeat;
}

a#button1:hover	{
	background-position: 0% -300px; /* move of background for each button */
}
a#button2:hover	{
	background-position: 0% -340px;
}
a#button3:hover	{
	background-position: 0% -380px;
}
a#button4:hover	{
	background-position: 0% -420px;
}
a#button5:hover	{
	background-position: 0% -460px;
}
a#button6:hover	{
	background-position: 0% -500px;
}
a#button7:hover	{
	background-position: 0% -540px;
}

/*	styling for the current page link (when body id = hyperlink id) */
body#menu1 a#button1,
body#menu2 a#button2,
body#menu3 a#button3,
body#menu4 a#button4,
body#menu5 a#button5,
body#menu6 a#button6,
body#menu7 a#button7
{
	color: #FF9900;
	background: transparent url(images/nav_bg.png) top left no-repeat;
}

/* now move the background image accordingly */
body#menu1 a#button1	{
	background-position: 0% -300px;
}
body#menu2 a#button2	{
	background-position: 0% -340px;
}
body#menu3 a#button3	{
	background-position: 0% -380px;
}
body#menu4 a#button4	{
	background-position: 0% -420px;
}
body#menu5 a#button5	{
	background-position: 0% -460px;
}
body#menu6 a#button6	{
	background-position: 0% -500px;
}
body#menu7 a#button7	{
	background-position: 0% -540px;
}

/* remove normal hyperlink hover styling, to also show this is the current page */
body#menu1 a#button1,
body#menu2 a#button2,
body#menu3 a#button3,
body#menu4 a#button4,
body#menu5 a#button5,
body#menu6 a#button6,
body#menu7 a#button7
 {
	/* use default cursor so link does not appear to be an active hyperlink (as it's the current page) */
	cursor: default;
}

/* end of navigation styling */

#tracklisting1,
#tracklisting2,
#tracklisting3,
#tracklisting4,
#tracklisting5,
#tracklisting6,
#tracklisting7,
#tracklisting8,
#tracklisting9
{
	float: left;
	width: 100%;
}


/*  Text & Content Styling */
h1	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 1000;
	color: #000066;
}

p	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
}

ol li	{
	list-style-type: decimal;
	font-size: 10px;
	font-weight: 800;
	color: #ffffff;
}

a.tracklink	{
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: underline;
}

a.tracklink:hover	{
	color: #CCCCCC;
	background-color: #993300;
}

a img {
	border: none;
}