/* CSS Document - drobig. the sites */



/* basic styles */


body {		
			background-color: #000000;		
}


h1 {
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 12px;
			font-style: normal;
			font-weight: bold;
			font-variant:;
			color: #999999;
			text-transform: uppercase;
}

p {			
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			color: #666666;
			
}

#p1 {
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			line-height: normal;
			font-weight: bold;
			color: #999999;
}


a {			outline-style: none;
			border: none;
}

a:link {
			color: #666666;
			text-decoration: underline;
}

a:hover {
			color: #FFFFFF !important;
}

a:active {
			color: #CCCCCC;
}

a:visited {
			color: #666666;
}


#backimg {	background-image: url(http://christophdrobig.com/img/back_img.png);
			background-position: center 0;
			background-repeat: no-repeat;
			border: none;
}

img {
			border: none;
}





/* splash page */

#enterbox {		width: 330px;
				height: 60px;
				position: relative;
				left: 290px;
				top: 50px;
				z-index: 1;
}

#enterbox ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

#enterbox li { 
	float: left; 
	margin: 0; 
	padding: 0; 
	text-indent: 0; 
}

#enterbox li a, #enterbox li div { 
	float: left; 
	height: 60px; 
	line-height: 60px; 
	width: 330px; 
	overflow: hidden; 
	text-indent: -999em; 	
	background-image: url(http://christophdrobig.com/img/enter.png); 
	background-repeat: no-repeat;	
}


#enterbox #btn div { background-position: 0 0px; }

#enterbox #btn a 			{ background-position: 0 0; width: 330px; }
#enterbox #btn a:hover 	{ background-position: 0 -61px; }
#enterbox #btn a:active 	{ background-position: 0 -122px; }
#enterbox a.active 		{ cursor: default; }
#enterbox #btn a.active 	{ background-position: 0 -183px; !important}






/* navmain */

#navmain {  
	width: 574px; 
	height: 36px; 
	margin: 0px 0px; 
	position: relative;
	left: 325px;
	top: 150px; 
	text-align: left; 
	height: 36px !important;
}


#navmain ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

#navmain li { 
	float: left; 
	margin: 0; 
	padding: 0; 
	text-indent: 0; 
}

#navmain li a, #navmain li div { 
	float: left; 
	height: 36px; 
	line-height: 36px; 
	width: 220px; 
	overflow: hidden; 
	text-indent: -999em; 	
	background-image: url(http://christophdrobig.com/img/nav_main.png);
	background-repeat: no-repeat;	
}

#navmain li div {
	display:none;	
	position:absolute;
}

#navmain #mp1 div { background-position: 0 0px; }


/* global navi buttons */
#navmain #mp1 a { background-position: 0 0; width: 198px; }
#navmain #mp2 a { background-position: -198px 0; width: 51px; }
#navmain #mp3 a { background-position: -249px 0; width: 43px; }
#navmain #mp4 a { background-position: -292px 0; width: 72px; }
#navmain #mp5 a { background-position: -364px 0; width: 34px; }
#navmain #mp6 a { background-position: -398px 0; width: 59px; }
#navmain #mp7 a { background-position: -457px 0; width: 42px; }
#navmain #mp8 a { background-position: -499px 0; width: 52px; }


/* mouseover */
#navmain #mp1 a:hover { background-position: 0 -36px; }
#navmain #mp2 a:hover { background-position: -198px -36px; }
#navmain #mp3 a:hover { background-position: -249px -36px; }
#navmain #mp4 a:hover { background-position: -292px -36px; }
#navmain #mp5 a:hover { background-position: -364px -36px; }
#navmain #mp6 a:hover { background-position: -398px -36px; }
#navmain #mp7 a:hover { background-position: -457px -36px; }
#navmain #mp8 a:hover { background-position: -499px -36px; }


/* mouse pressed */
#navmain #mp1 a:active { background-position: 0 -72px; }
#navmain #mp2 a:active { background-position: -198px -72px; }
#navmain #mp3 a:active { background-position: -249px -72px; }
#navmain #mp4 a:active { background-position: -292px -72px; }
#navmain #mp5 a:active { background-position: -364px -72px; }
#navmain #mp6 a:active { background-position: -398px -72px; }
#navmain #mp7 a:active { background-position: -457px -72px; }
#navmain #mp8 a:active { background-position: -499px -72px; }


/* active button */
#navmain a.active 		  { cursor: default; }
#navmain #mp1 a.active { background-position: 0 -108px; }
#navmain #mp2 a.active { background-position: -198px -108px !important; }
#navmain #mp3 a.active { background-position: -249px -108px !important; }
#navmain #mp4 a.active { background-position: -292px -108px !important; }
#navmain #mp5 a.active { background-position: -364px -108px !important; }
#navmain #mp6 a.active { background-position: -398px -108px !important; }
#navmain #mp7 a.active { background-position: -457px -108px !important; }
#navmain #mp8 a.active { background-position: -499px -108px !important; }




/* boxes text & images, tables */


a.player {
			position: relative;
			left: 125px;
			top: 175px;
			height: 360px;
			width: 480px;
			border: none;
			overflow: auto;
			text-align: left;
			background-image: url(../img/playlist/dummy.png);
}

#reel {
			position: relative;
			left: 125px;
			top: 175px;
			height: 360px;
			width: 480px;
			border: none;
			overflow: auto;
			text-align: left;
}

#textbox1 {
			position: relative;
			left: 445px;
			top: 190px;
			height: 320px;
			width: 425px;
			z-index: 2;
			border: none;
			overflow: auto;
			text-align: left;
}

#vitatable {
			border: none;
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			color: #666666;
			vertical-align: top;
			border-spacing: 0px 5px;
}

#tdvita1 {
			font-family:Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			color: #999999;
			text-shadow: #000000 2px 2px 2px;
			width: 140px;
			height: auto;
			vertical-align: top;
}

#tdvita2 {
			width: 225px;
}

#linktable {
			border: none;
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			color: #666666;
			vertical-align: top;
			border-spacing: 0px 5px;
}

#tdlink1 {
			width: 120px;
			height: auto;
			vertical-align: middle;
			text-align: left;
}

#tdlink2 {
			width: 260px;
			height: auto;
			vertical-align: top;
			text-align: left;
}

#imga	{
			outline-color: #666666;
			outline-style: solid;
			outline-width: 1px;
}


#textbox2 {
			position: relative;
			left: 448px;
			top: 190px;
			height: 20px;
			width: 200px;
			z-index: 2;
			border: none;
			overflow: hidden;
			text-align: left;
}

#textbox20 {
			position: relative;
			left: 448px;
			top: 225px;
			height: 20px;
			width: 100px;
			z-index: 4;
			text-align: left;
					
}

#textbox21 {
			position: relative;
			left: 445px;
			top: 220px;
			height: 269px;
			width: 425px;
			z-index: 3;
			border: none;
			overflow: auto;
			text-align: left;
}

#porttable {
			border: none;
			font-family: Arial, Helvetica, Verdana, sans-serif;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			color: #666666;
			vertical-align: top;
}

#tdport	{
			width: 210px;
			vertical-align: top;
}

#gallery1 {
			position: relative;
			left: 445px;
			top: 170px;
			height: 75px;
			width: 75px;
			z-index: 2;
			margin-right: 17px;
			margin-bottom: 15px;
			outline-color: #666666;
			outline-style: solid;
			outline-width: 1px;
			overflow: hidden;
			text-align: left;
			vertical-align: middle;
}

#gallery1:hover {outline-color: #CCCCCC;}


#gallery1 a {
			outline-color: #999999;
			outline-style: solid;
			outline-width: 1px;
			overflow: hidden;
			text-align: left;
			vertical-align: middle;
}

#gallery1 a:hover {outline-color: #CCCCCC;}

#gallery2 {
	position: relative;
	left: 445px;
	top: 160px;
	witdh: 300px;
	height: 15px;
	text-align: left;
	vertical-align: top;
	text-indent: 9em;
	width: 300px;
}

/*{{{ general playlist settings, light gray */
div.playlist {

	position:relative;
	overflow:hidden;	 	
	height:204px !important;
}

div.playlist div.clips {	
	position:absolute;
	height:20000em;
}

div.playlist, div.clips {
	width:260px;
}

div.clips a {
	display:block;
	background-color: #969696;
	background:url(../img/playlist/back.png) no-repeat 0px -67px;
	padding:10px 10px;
	height:47px;
	width:196px;
	border: 1px outset #000;		
	text-decoration:none;
	color: #FFFFFF;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	vertical-align:middle;
}

div.clips a.first {
	border-top-width:1px;
}

div.clips a.playing, div.clips a.paused, div.clips a.progress {
	background:url(../img/playlist/light.png) no-repeat 0px -69px;
	padding-right:60px;
	border:0;
	font-style:oblique;
}
	
div.clips a.progress {
	opacity:0.6;
}

div.clips a.paused {
	background-position:0 0;
}

div.clips a span {
	display:block;		
	font-size:11px;
	color:#666;
}

div.clips a em {
	font-style:normal;
	color: #F4F4F4;
}	

div.clips a:hover {
	background-color: #6C6C6C;
	background:url(../img/playlist/back.png) no-repeat 0px 0px;	
	font-style:oblique;
}

div.clips a.playing:hover, div.clips a.paused:hover, div.clips a.progress:hover {
	background-color:transparent !important;
	font-style:oblique;
}
/*}}}*/


/*{{{ low version */

div.clips.low a {	
	height:46px;
}

div.clips.low a.playing, div.clips.low a.paused, div.clips.low a.progress {
	background-image:url(../img/playlist/dark.png);
	background-position:0 0;
}

div.clips.low a.paused {
	background-position:0 -67px;	
}


/*}}}*/


/*{{{ go buttons */

a.go {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/playlist/up.png) no-repeat;
	margin:5px 0 5px 105px;
	cursor:pointer;
	z-index: 10;
}

a.go:hover, a.go.down:hover {
	background-position:0px -18px;		
}

a.go.down {
	background-image:url(../img/playlist/down.png);	
}

div.petrol a.go {
	background-image:url(../img/playlist/up.png);		
}

div.petrol a.go.down {
	background-image:url(../img/playlist/down.png);		
}

a.go.disabled {
	visibility:hidden;		
}

/*}}}*/