/*
	Magixx
	******
	
	Stylesheet for screens by pasz.nl
	Design by www.cowpunks.nl
*/

/*	Basic markup
	************/

html, body {
	margin:0;
	padding:0;
	font:12px/16px "Arial", sans-serif;
}

body {
	padding:0;
	color:white;
	text-align:center;
	background:black no-repeat top center url(../gfx/bg_body.jpg);
}




/*	Headings	*/
h1, h2, h3, h4, h5, h6 {
	margin:5px 0 15px 0;
	padding:0;
	font-weight:bold;
	color:white;
}

h1 {color: #d1e300; font-size:20px;}
h2 {color: #d1e300; font-size:16px;}
h3 {color: #fff; font-size:12px;}
h4 {font-size:12px;}
h5 {font-size:11px;}
h6 {font-size:10px;}




/*	Basic content	*/
p {
	margin:0;
	padding:0 0 1.5em 0;
}

a {
	color: #CCE70B;;
	text-decoration:underline;
}

input
{
	border: 1px solid black;
}

input.error
{
	border: 1px solid red;
}

p.error label
{
	color: red;
}

a:hover {
	text-decoration:none;
}

img {
	border:0;
	margin:0;
	padding:0;
}



/*	Generic classes
	***************/

.displayNone	{display:none}
.displayInline	{display:inline}



/*	Buttons	*/
.btn {
	cursor:pointer;
	cursor:hand;	
}

.btn:active	{outline:none}
.btn:focus	{-moz-outline-style:none}



/*	Basic layout
	************/

#wrapper {
	position:relative;
	width:960px;
	margin:0 auto;
	padding:30px 0 0 0;
	text-align:left;
}

#header {
	position:relative;
	height:183px;
	background:no-repeat 0 0 url(../gfx/bg_header_2.png)
}

#pageNieuws #header
{
	background:no-repeat 0 0 url(../gfx/bg_header_2.png)
}

#header #flash
{
	margin-left: 45px;
	padding-top: 7px;
}

#logo {
	display:block;
	position:absolute;
	top:12px;
	left:520px;
}

#score {
	position:absolute;
	top:83px;
	left:734px;
	width:180px;
	font-size:13px;
	line-height:17px;
	text-align:center;
}

#score strong {
	font-size:17px;
	line-height:20px;
}

#main {
	padding:19px 45px 15px 192px;
	background:repeat-y 0 0 url(../gfx/bg_main.png)
}

#footer {
	width:960px;
	height:220px;
	background:no-repeat 0 0 url(../gfx/bg_footer.png);
	padding-top: 25px;
}
	#footer .link-cowpunks {
		color: #999;
		float: right;
		padding: 30px 45px 0 0;
		}

#footer h3
{
	color: #d1e300;
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}

#footer img
{
}

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

#footer ul li {
	display:inline;
	margin:0;
	padding:0;
}

#footer ul li a {
	display:block;
	float:left;
	margin:0 20px 0 0;
	text-align:center;
	cursor:pointer;
	cursor:hand;
}

#footer ul li span {
	display:block;
	position:relative;
	width:159px;
	height:106px;
	overflow:hidden;
}

#footer ul li span span {
	position:absolute;
	top:0;
	left:0;
	width:159px;
	height:116px;
	z-index:20;
	cursor:pointer;
	cursor:hand;
	background:no-repeat 0 0 url(../gfx/bg_footer_button.png);
}

#footer ul li span img {
	display:block;
	position:absolute;
	left:0;
	z-index:10;
}

#footer ul li img {
	display:inline;
}

#footer #bottommenu
{
	text-align: center;
	padding-top: 160px;
}

#footer #bottommenu a
{
	color: silver;
	text-decoration: none;
	margin: 0 10px 0 10px;
}

#side {
	float:right;
	width:194px;
	margin:0 0 0 50px;
	padding:0 0 14px 0;
	background:no-repeat 0 100% url(../gfx/bg_side_bottom.png);
}

#side div.content {
	padding:15px 20px 0 20px;
	background:no-repeat 0 0 url(../gfx/bg_side.png);
}

#skipToNav {
	display:none;
}



/*	Navigation	*/
#nav {
	position:absolute;
	top:231px;
	left:0;
	list-style:none;
	margin:0;
	padding:0;
}

#nav li {
	display:inline;
	margin:0;
	padding:0;
}

#nav li a {
	display:block;
	margin:0;
	padding:0 0 0 12px;
	width:150px;
	height:32px;
	font-size:10px;
	line-height:29px;
	text-decoration:none;
	text-transform:uppercase;
	color:white;
	overflow:hidden;
	cursor:pointer;
	cursor:hand;
	background:no-repeat 0 0 url(../gfx/bg_nav_item.png);
}

#nav li a:hover {
	background:no-repeat 0 0 url(../gfx/bg_nav_item_hover.png);
}

#nav li.active a {
	color:black;
	background:no-repeat 0 0 url(../gfx/bg_nav_item_active.png);
}

#bottommenu
{
	text-align: center;
}

#bottommenu a
{
	color: #888888;
	margin-right: 15px;
}


/*	Hacks
	*****/

/* slightly enhanced, universal clearfix hack */
.clearfix:after,
#main:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.clearfix,
#main {display:inline-block;}
/* start commented backslash hack \*/
* html .clearfix,
* html #main {height:1%;}
.clearfix,
#main {display:block;}
/* close commented backslash hack */


ul.galerijoverzicht,
ul.galerij
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.galerijoverzicht li,
ul.galerij li
{
	float: left;
	width: 140px;
	height: 115px;
	border: 1px solid #CCE70B;
	padding-top: 5px;
	text-align: center;
	margin-right: 5px;
	margin-top: 5px;
}

ul.galerijoverzicht li a,
ul.galerij li a
{
	vertical-align: middle;
}

ul.galerijoverzicht li
{
	height: 130px;
}

#modalShade {
display:none;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:0.6;
-moz-opacity:0.6;
z-index:5000;
background:black;
}

div.modal {
        display:none;
        position:fixed;
        top:10%;
        left:50%;
        width:500px;
        margin-left:-250px;
        padding:0;
        z-index:10000;
        background: #171711;
}

div.modal > h2 {
        height:40px;
        line-height:40px;
        padding:0 10px;
        color:white;
        background:#CCE70B;
}

div.modal button.btnModalClose {
        position:absolute;
        top:15px;
        right:5px;
}

div.modal div.content {
	height: 450px;
}

div.modal div.galerijnav
{
	clear: both;
}

a.prev,
a.next
{
	width: 45%;
	float: left;
	font-size: 14px;
	padding: 5px;
}

a.next
{
	float: right;
}

.btnModalClose
{
	width: 60px;
	float: right;
	font-size: 10px;
}