/**
 * Stylesheet for <4x4 music>
 * @author	karen <karen@codedor.be>
 * @media	screen, projection
 */

 
* { margin: 0;}
html, body { height: 100%; }

/* text */
p{ font-size: 0.93em; margin: 0 0 15px 0; line-height: 1.5em;}
p.topline{ border-top: 1px solid #dadada; padding: 10px 0 0 0}

p.pad_left{ padding: 0 5px 0 4px; }
strong{font-weight: bold;}


/* blockquote */
blockquote{ font-style: italic; font-size: 1.4em; font-family: "Trebuchet MS", Arial, Verdana; margin: 5px 0 15px 0; line-height: 1.5em;}

img{ border: none;}
img.icon_right{ float: right; margin: 4px 5px 0 0; }
img.icon{ vertical-align: middle; }


/* link color */
a { color: #000; text-decoration: underline }
a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; text-decoration: none; }
a:active, a:focus { color: #000; }

 /* Clearfix */
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}







/**
 * = GLOBAL
 * ----------------------------------------------------------
 */
 
 
#wrapper {  margin: 0 auto; } 
#container{ width: 960px; display: block; margin: 40px auto 0 auto;  }
 
/* header */
#home #header{ height: 440px; display: block; clear: both; }
#home #header div.logo { padding: 0; margin: 0; float: left; margin: 0; display: block; position: relative; z-index: 900;}
#home #header div.logo a{ position: absolute; display: block;width: 325px;  background: url(../img/logo.png) no-repeat;  text-indent: -9999px; overflow:hidden; padding: 0; margin: 0; z-index: 900; top: 0; left:-40px; height: 285px;}

.gradient_container{  padding: 0; margin: 0; float: left; margin: 0; display: block; position: relative; z-index: 700;}
#gradient{ position: absolute; display: block; background:  url(../img/transparent.png) repeat-y; z-index: 700; top: 8px; left: 200px; width: 375px; height:305px ;}

.logo_txt img{  margin: 35px 0 0 250px; }

/* headersmall */

#home #header_small{ height: 160px; display: block; clear: both; }
#home #header_small div.logo { padding: 0; margin: 0; float: left; margin: 0; display: block; position: relative;}
#home #header_small div.logo a{ position: absolute; display: block;width: 163px;  background: url(../img/logo_small.png) no-repeat;  text-indent: -9999px; overflow:hidden; padding: 0; margin: 0; z-index: 800; top: 8px; left:20px; height: 144px;}

#home #header_small .logo_txt img{  margin: 35px 0 0 200px; }
#home #header_small #gradient{ position: absolute; display: block; background:  url(../img/transparent.png) repeat-y; z-index: 700; top: 8px; left: 200px; width: 375px; height:152px ;}


/* container */
.top { height: 11px; background: url(../img/bg_top.jpg) no-repeat; line-height: 0em; font-size: 1px;; }
.middle { background: #fff url(../img/bg_middle.jpg) repeat-y; padding: 0 0 25px 0; }
.bottom { height: 9px; background: url(../img/bg_bottom.jpg) no-repeat; line-height: 0em; font-size: 1px;}


/* topmenu */
.topmenu { float: right; display: block; margin: 50px 10px 0 0}
.topmenu ul li{ float: left; display: block; margin: 0 5px 0 0; font-family: "Gill Sans", "Trebuchet MS", Tahoma, Arial, Verdana; text-transform: uppercase; font-size: 1.20em; font-weight: 500;}
.topmenu ul li a{ color: black; text-decoration: none;  padding: 5px 10px 5px 10px; } 
.topmenu ul li.selected a, .topmenu ul li a:hover { color: black; background: #2ddcf6; -moz-border-radius: 5px; -webkit-border-radius: 5px;} 

/* nav */
.nav { display: block; width: 930px; clear: both; /*clear: both;*/ background: #2ddcf6; margin: 0px 0 0 15px; height: 45px;  z-index: 15; position: relative; font-family: "Trebuchet MS", Arial, Verdana, sans-serif; }
.nav ul li{ float: left; margin: 0 5px 0 0; }
.nav ul li a{ color: black; text-transform: uppercase; text-decoration: none; font-size: 1.1em; font-weight: bold; margin: 12px 0 0 10px; display: block; float: left; padding: 3px 5px}
.nav ul li.selected a, .nav ul li a:hover{ background: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px;} 


/* header */

.headerpic_container {background: url(../img/bg_headerpic.jpg) no-repeat; width: 942px; height: 314px; margin: 0 0 0 9px; padding: 0; display: block;  float: left; clear: both; }
.headerpic { display: block; float: right; clear: right; margin: 8px 6px 20px 0; padding: 0; background: #000; width: 930px; height: 306px}
.headerpic img {width: 600px;}


#header_small .headerpic_container {background: url(../img/bg_headerpic.jpg) no-repeat; width: 942px; height: 160px; margin: 0 0 0 9px; padding: 0; display: block;  float: left; clear: both; }
#header_small .headerpic { display: block; float: right; clear: right; margin: 8px 6px 20px 0; padding: 0; background: #000; width: 930px; height: 100px}
#header_small .headerpic img {width: 600px; height: 150px}

.btn_playvideo {  width: 200px; height: 20px; float: left; margin: 15px 0 0 0}
#gallery .btn_playvideo a{  color: white!important; display:  marker; position:  relative; }
.btn_playvideo span{ float: left; display: block;}
#gallery .btn_playvideo img { width: 25px; height: 16px; float: left; margin: 0 7px 0 0;}

#content{ float: left; display: block; width: 960px; margin: 25px 0 0 0; clear:both;}


 
/* left */

#left{ width: 600px; float: left; display: block; margin: 0 0 0 15px }
#right{ width: 310px; float: left; display: block; margin: 0 0 0 20px}

#left h1{ background: url(../img/bg_h1.jpg) repeat-x; height: 30px; margin: 0 0 23px 0;}
#left h1 span{ color: white; background: black; float: left; padding: 1px 5px 2px 3px; margin:5px 0 0 5px; text-transform: uppercase}
#left h1.black{ background: black; color: white; height: 25px; padding: 5px 0 0 5px}

#left h1.without{ height: 30px; margin: 0 0 23px 0; background: none;}
#left h1.without a{ color: #fff!important}
#left h1.without span{ color: white; background: black; float: left; padding: 1px 5px 2px 3px; margin:5px 0 0 5px; text-transform: uppercase}

#left h1.nomargin{ background: url(../img/bg_h1.jpg) repeat-x; height: 30px; margin: 0;}

#left img.right{ float: right; margin: 5px 0 10px 10px; }

#left .subscribe{ margin: 10px 0 0 0; padding: 0 0 0 13px; width: 550px}
#left .subscribe .intro{ display: block; margin: 0 0 3px 0}
#left .subscribe textarea { border: 1px solid #dbdbdb; width: 550px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#left .subscribe input[type="text"] { border: 1px solid #dbdbdb; height: 20px; width: 550px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#left .subscribe select { border: 1px solid #dbdbdb; width: 550px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#left .date select { width: 90px; }

#left .text label{display: block;}
#left .textarea label{display: block;}
#left .date label{display: block;}
#left .select label{display: block;}
#left .checkbox label{display: inline;}

#left .subscribe input[type="checkbox"]{ margin: 0 5px 0 20px; }
#left .subscribe input[type="radio"]{ margin: 0 5px 0 20px; }
#left .subscribe .submit { float: right; margin: 0 0 0 0 }

#left table{  width: 100%; border-collapse: collapse; margin: 10px 0 0 0; padding: 0;}
table.playlisttable td { font-size: 12px; }
table.playlisttable th{ font-size: 13px; text-align: left; padding: 5px 0px 5px 13px; }
table.playlisttable td a, table.playlisttable th a{ text-decoration: none; }
table.playlisttable td a:hover{ text-decoration: underline; }
table td.last, table th.last { width: 80px; text-align:right; }

/* homepage */
#left .block {  border-bottom: 1px solid #dbdbdb; margin: 10px 0 0 0; padding: 0 0 10px 5px; clear: both;  float: left; display: block; width: 595px; }
#left .blockdetail {  border: none; margin: 10px 0 0 0; padding: 0 0 15px 0}

#left .block_content{ margin: 0; padding:0 0 10px 0; display: block; float: left; width: 595px;}
#left .block_content_small{ margin: 0; padding:0 0 20px 0; display: block; float: left; width: 435px;}

#left .block_content_full{ margin: 0; padding:0 0 10px 0; display: block; float: left; width: 595px;}
#left .block_content_video{ margin: 0; padding:0 0 0 15px; display: block; float: left; width: 395px; }
#left .block_content_big { margin: 0; padding:0 0 20px 0; display: block; float: left; width: 595px;}
#left img.logo_event{ float: right }
#left img.eye_event{ float: left; display: block; margin: 0 10px 0 0}
#left img.eye_event_big{ float: left; display: block; margin: 0 20px 0 0}

span.date{ font-size: 0.9em; display: block; margin: 0 0 10px 0; font-weight:bold;}

.more{ background: #2ddcf6; color: black; text-decoration: none; float: left; padding: 2px 5px 3px 5px; margin: 0 5px 0 0}
.more a{color: black; text-decoration: none;}

h2, h2 a{ color: #01adc7!important; font-family: "Trebuchet MS", Arial, Verdana; font-size: 16px}
h2.line{ color: #000; border-bottom: 1px solid #7e7e7e; margin: 5px 0 15px 0}

.block_home{ float: left; display: block; width: 460px}
.block_tickets{ float: left; display: block; width: 460px}
#left  .home_blocks .logo_event{ float: left; margin: 0 15px 0 0; }



/* right */ 
 
#right h1{ background: black; color: white; height: 25px; padding: 5px 0 0 13px; margin: 0 0 0 0}
#right h1.green{ background: #b2d336; color: black; font-weight: bold; } 
#right .block{ margin: 0 0 30px 0}
#right .block table{  width: 100%; border-collapse: collapse; margin: 10px 0 0 0}
table td { padding: 5px 0 5px 13px ; }
table td.first { width: 50px; }
table tr.odd td{ background: #f4f4f4;}

table.newselement td { font-size: 12px }
table.newselement td a{ text-decoration: none; }
table.newselement td a:hover{ text-decoration: underline; }

#right .subscribe, #right .search{ margin: 10px 0 0 0; padding: 0 0 0 13px}
#right .subscribe .intro{ display: block; margin: 0 0 3px 0}
#right .subscribe textarea { border: 1px solid #dbdbdb; width: 270px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#right .subscribe input[type="text"] { border: 1px solid #dbdbdb; height: 20px; width: 270px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#right .search input[type="text"] { float: left; border: 1px solid #dbdbdb; height: 20px; width: 190px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}
#right .subscribe select { border: 1px solid #dbdbdb; width: 280px; font-size: 12px; padding: 5px 0 1px 5px; margin: 5px 0 10px 0}

#right .text label{display: block;}
#right .textarea label{display: block;}


.subscribe input[type="checkbox"]{ margin: 0 5px 0 0px; }
.subscribe input[type="radio"]{ margin: 0 5px 0 20px; }
.subscribe .submit { float: right; margin: -25px 20px 0 0 }
.search .submit { float: left; margin: 7px 0 0 10px; }

/*
#right .subscribe input[type="checkbox"]{ margin: 0 5px 0 20px; }
#right .subscribe input[type="radio"]{ margin: 0 5px 0 20px; }
#right .subscribe .submit { float: right; margin: -25px 20px 0 0 }
*/

#right .members{ margin: 0; padding: 10px 0 0 0; text-align:center;}
#right .membership{ border: 1px solid #dbdbdb; margin: 0; }
/* table */



/**
 * = attach
 * ----------------------------------------------------------
 */

.art_files, .art_pics, .art_links{display: block; margin: 0 0 20px 0; }

.art_files li{ float: left; text-align: center; border: 1px solid #dadada; padding: 5px 10px; margin: 0 10px 10px 0}



/* contact */

#left .block_club_logo {  clear:  left; margin: 0; height: 45px}
#left .block_club_logo img{ float: left; }
.block_club_txt{ margin: 0 5px 10px 0; padding: 10px 0 20px 0; width: 145px; float: left;  }
.block_club_google{ float: left; display: block; width: 600px; height: 500px;  margin: 5px 0 0 0; padding: 20px 0 0 0}


/* footer */
#footer { width: 960px; }
#footer .copy{ color: white; width: 960px; text-align: center; margin: 8px 0 0 0; font-size: 0.80em}
#footer .copy a{ color: white; text-decoration: underline; }

#footer .sponsors{ margin: 30px 0 0 0; text-align: center;}
#footer .sponsors ul{ margin-left: 220px ; }
#footer .sponsors li{ float: left; color:white; margin: 0 15px 0 0; }

/**
 * = pagination news
 * ----------------------------------------------------------
 */
 
.archive_pagination{ width: 100%; }
.archive_pagination li { float:  left; margin: 0 10px 0 0;  font-weight: bold;}
.archive_pagination li a{ color: #000;}
.archive_pagination li  ul { float: right; margin: 0 10px 0 0;  font-weight: bold;}  
.archive_pagination ul { margin: 10px 0 10px 0; }
.archive_pagination ul li { border-bottom: 1px solid black; margin: 10px 0 0 0;  }
.archive_pagination ul ul{ border: none;  margin: 0 30px 20px 20px}
.archive_pagination li  ul li{ margin: 0 10px 0 10px; font-weight: normal; border: none}  


 
 
/* pagination */
 
.pagination { float: right; margin: 8px 0 8px 0; display: block; width: 595px; text-align: right;}

.line_top{ border-bottom: 1px solid #DBDBDB; padding: 0 0 10px 0; }

.pagination .paginator_float{ float: right; margin: 0; }

.pagination .paginator_float .prev{ float: left; margin: 0 10px 0 0; display: block;}
.pagination .paginator_float .numbers{ float: left;}
.pagination .paginator_float .next{ float: left; margin: 0 0 0 10px; display: block;}
.pagination .paginator_float .next a, .pagination .paginator_float .prev a{ color: #000; font-size: 0.85em; } 
.pagination .disabled { display: none; }

.pagination span{  display: block; float: left; padding: 3px 2px; font-size: 0.85em; }
.pagination span a, .paginator a{ color: white!important; padding: 3px 7px; background: #000; text-decoration: none}

.pagination span.current{ background: #2DDCF6; color: black;  padding: 3px 7px; margin: 0 2px}





/* Notices and Errors */
div.message {
	clear: both;
	color: #900;
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 20px 20px;
}
div.error-message {
	clear: both;
	color: #900;
	font-weight: bold;
	margin: -5px 0 5px 0;
}
p.error {
	background-color: #e32;
	color: #fff;
	font-family: Courier, monospace;
	font-size: 110%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
p.error em {
	color: #000;
	font-weight: normal;
	line-height: 110%;
}
.notice {
	background: #ffcc00;
	color: #000;
	display: block;
	font-family: Courier, monospace;
	font-size: 110%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
.success {
	background: green;
	color: #fff;
}