/************************************
Dateiname: screen.css
Beschreibung: Grundlegendes Layout für Bildschirmdarstellung
Seite: mindcollision.ch
Autor: André Murer
************************************/
/***********************************
	Grundlegende Style
************************************/

* {
	padding: 0;
	margin: 0;
	list-style: none;
}
html, body {
	height: 100%;
}
html {
	overflow: auto;
}
body {
	font-size: 62.5%;
	font-family: Arial, sans-serif;
	color: #333333;
	background: url(../img/bg.jpg) top center;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: #333333;
}

h2 {
	font-size: 220%;
	margin: 0 0 1em 0;
}

h3 {
	font-size: 160%;
	margin: 0 0 .7em 0;
}
h4 {
	font-size: 120%;
	margin: 0 0 1em 0;
}
a {
	text-decoration: none;
	color: #000;
}
a:hover {
	color: #fff;
}
.invis {
	display: none;
}
img {
	border: none;
}
fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
input {
	font-size: 110%;
}
textarea {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	overflow: auto;
	font-size: 110%;
}
hr, br.clear {
	display: block;
	clear: both;
	visibility: hidden;
}

/***********************
	bg-images
***********************/

.sprite, h1 a, ul#mainNav a, ul#serviceLinks a, div#sidebar div.box h3 a, div#content #vids div ul a span,
div#content #vids div ul a:hover strong, div#content #vids div h3, h4.showMore, h4.showMore a span, h4.showMore a strong {
	background-image: url(../img/sprite.png);
}

ul#mainNav, div.box, div#content ul.galleryList li a {
	background: rgba(255,255,255,.8);
}

/***********************
	Wrap
***********************/
div#wrap {
	position: relative;
	width: 977px;
	margin: 0 auto;
	padding: 126px 0 0 0;
}
/***********************
	Backgorund-images
***********************/

div#bgImgFader {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 640px;
	width: 100%;
	background: no-repeat top center;
	background-image: url(../img/bg-imgs/mindcollision-01.jpg);
}
/***********************
	header
***********************/

h1 a {
	display: block;
	height: 104px;
	width: 626px;
	margin: 0 0 0 -16px;
}
h1 img, h1 a strong {
	display: none;
}
div#header {
	width: 600px;
}

/***********************
	mainNav
***********************/

ul#mainNav {
	height: 57px;
	margin: 0 0 0 0;
}
ul#mainNav li {
	float: left;
}
ul#mainNav a {
	float: left;
	height: 57px;
}
ul#mainNav a strong {
	display: none;
}
ul#mainNav a.homeactive {background-position: 0 -162px; width: 97px;}
ul#mainNav a.bandactive {background-position: -97px -162px; width: 83px;}
ul#mainNav a.onstageactive {background-position:  -180px  -162px; width: 130px;}
ul#mainNav a.mediaactive {background-position: -310px  -162px; width: 91px;}
ul#mainNav a.shopactive {background-position:  -401px  -162px; width: 80px;}
ul#mainNav a.contactactive {background-position: -481px  -162px; width: 119px;}

ul#mainNav a.home:hover {background-position: 0 -219px; }
ul#mainNav a.band:hover {background-position: -97px -219px;}
ul#mainNav a.onstage:hover {background-position:  -180px  -219px;}
ul#mainNav a.media:hover {background-position: -310px  -219px;}
ul#mainNav a.shop:hover {background-position:  -401px  -219px;}
ul#mainNav a.contact:hover {background-position: -481px  -219px;}

ul#mainNav a.home, ul#mainNav a.home:active, ul#mainNav a.home:focus {background-position:  0 -105px; width: 97px;}
ul#mainNav a.band, ul#mainNav a.band:active, ul#mainNav a.band:focus {background-position: -97px -105px; width: 83px;}
ul#mainNav a.onstage, ul#mainNav a.onstage:active, ul#mainNav a.onstage:focus {background-position:  -180px  -105px; width: 130px;}
ul#mainNav a.media, ul#mainNav a.media:active, ul#mainNav a.media:focus {background-position: -310px  -105px; width: 91px;}
ul#mainNav a.shop, ul#mainNav a.shop:active, ul#mainNav a.shop:focus {background-position:  -401px  -105px; width: 80px;}
ul#mainNav a.contact, ul#mainNav a.contact:active, ul#mainNav a.contact:focus {background-position: -481px  -105px; width: 119px;}


/***********************
	serviceLinks
***********************/

ul#serviceLinks {
	position: absolute;
	top: 10px;
	left: 0;
}
ul#serviceLinks li {
	float: left;
}
ul#serviceLinks a {
	float: left;
	margin: 31px 44px 0 0;
	border-bottom: 3px solid #333;
	height: 12px;
	width: 68px;
}
ul#serviceLinks a:hover {
	border-color: #fff;
}
ul#serviceLinks a strong {
	display: none;
}
ul#serviceLinks a.player {
	height: 43px;
	width: 117px;
	margin-top: 0;
	background-position: 0 -480px;
}
ul#serviceLinks a.player:hover {
	background-position: -120px -480px;
}
ul#serviceLinks a.contact {
	background-position: 0 -523px;
}
ul#serviceLinks a.contact:hover {
	background-position: -121px -523px;
}
ul#serviceLinks a.links {
	width: 32px;
	background-position: 0 -535px;
}
ul#serviceLinks a.links:hover {
	background-position: -121px -535px;
}

/***********************
	content
***********************/
div#content {
	font-size: 120%;
	width: 600px;
	margin: 0 7px 0 0;
	float: left;
}
div#content a {
	text-decoration: none;
	border-bottom: 3px solid #000;
}
div#content a:hover {
	color: #fff;
	background: #000;
}
div#content p a {
	border: none;
	text-decoration: underline;
}
div#content h2 {
	text-transform: uppercase;
	font-size: 200%;
	line-height: .75;
	margin: 0 0 .8em 0;
	padding: 0 0 .2em 0;
}
div#content h2 span {
	font-weight: bold;
	font-size: 60%;
}
div#content h3 {
	font-size: 116.6%;
	font-weight: bold;
	text-transform: uppercase;
	margin: .5em 0 1em 0;
}
div#content h3.links {
	margin: 2.5em 0 1em 0;
}
div#content h4 {
	font-size: 100%;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0 0 .2em 0;
}
div#content div.box {
	position: relative;
	padding: 8px;
}
div#content ul {
	margin: 0 0 1.8em 0;
}
div#content p {
	margin: 0 0 1.2em 0;
}
div#content .alignright {
	margin: -25px 0 10px 10px;
	float: right;
}
div#content h3.sprite {
	height: 26px;
	width: 50%;
	margin: 24px 0 0 0;
}
div#content h3.sprite a {
	display: block;
	height: 100%;
	width: 100%;
	border: none;
}
div#content h3.sprite strong {
	display: none;
}
div#content h3#pics {
	background-position: 0 -413px;
}
div#content h3#music {
	background-position: 0 -565px;
}
div#content h3#downloads {
	background-position: 0 -598px;
}

/*     POST      */

div#content div.post {
	clear: left;
	padding: 20px 13px 13px 20px;
	margin: 7px 0 0 0;
}
div#content div.post h2 {
	position: relative;
}
div#content div.post h2 a {
    display:block;
    width:440px;
}
div#content div.post h2 small {
	position: absolute;
	top: 0;
	right: 0;
}
div#content h2 a, div#content h3 a, div#content h4 a {
	color: #333;
	border: none;
}
div#content h2 a:hover, div#content h3 a:hover, div#content h4 a:hover {
	color: #000;
	background: none;
}
div#content div.post p.comments {
	padding: 20px 0 0 0;
	clear: left;
}
div#content div.post p.comments a {
	border: none;
	color: #666;
}
div#content div.post p.comments a:hover {
	color: #000;
	background: none;
	border-bottom: 3px solid #000;
}


/*     COMMENTS     */
div#content div.comment, div#content div.commentform {
	padding: 20px 13px 20px 20px;
	margin: 7px 0 0 0;
	background: rgba(255,255,255,.6);
}
div#content div.comment h3, div#content div.commentform h3 {
	font-weight: normal;
	line-height: .8;
	margin: 0 0 1em 0;
	padding: 0 0 .2em 0;
}
div#content div.commentform {
	padding-bottom: 5px;
}
div#content ol.commentlist li {
	clear: left;
	padding: 10px 0;
	margin: 7px 0 0 0;
}
div#content ol.commentlist p.date {
	width: 120px;
	float: left;
	color: #666;
	text-transform: uppercase;
	margin: -2px 0 0 0;
}
div#content ol.commentlist p.date strong {
	font-size: 112.5%;
}
div#content ol.commentlist div {
	margin: 0 0 0 120px;
}

/*     VIDEOS      */
#vids {
	margin: 7px 0 0 0;
}
#vidObj {
	height: 353px;
}
#vidNav {
	position: absolute;
	left: -34px;
	top: 40px;
	z-index: 1000;
}
div#content #vidNav h3 {
	width: 34px;
	height: 25px;
	margin: 0 0 5px 0;
	background-position: 100% -270px;
}
#vidNav h3 strong {
	display: none;
}
#vidNav ul a {
	position: relative;
	float: left;
	clear: both;
	margin: 0 0 5px 0;
	height: 25px;
	border: none;
	background: rgba(255,255,255,.5);
}
#vidNav ul a:hover {
	background: rgba(255,255,255,.7);
}
#vidNav ul a.active {
	background: rgba(255,255,255,.8);
}
#vidNav ul a strong {
	display: none;
}
#vidNav ul a:hover strong {
	text-transform: uppercase;
	color: #333;
	line-height: 25px;
	display: block;
	width: 160px;
	padding: 0 0 0 50px;
	background-repeat: no-repeat;
	background-position: -423px -538px;
}
#vidNav ul a span {
	float: left;
	padding: 0 0 0 34px;
	text-indent: -9999px;
	width: 0px;
	height: 25px;
	overflow: hidden;
	background-position: -592px -357px;
}
#vidNav ul li.vid1 a span {
	background-position: -592px -357px;
}
#vidNav ul li.vid2 a span {
	background-position: -592px -387px;
}
#vidNav ul li.vid3 a span {
	background-position: -592px -417px;
}
#vidNav ul li.vid4 a span {
	background-position: -592px -447px;
}
#vidNav ul li.vid5 a span {
	background-position: -592px -477px;
}
#vidNav ul li.vid6 a span {
	background-position: -592px -507px;
}

#vidNav ul li.vid1 a.active span {
	background-position: -558px -357px;
}
#vidNav ul li.vid2 a.active span {
	background-position: -558px -387px;
}
#vidNav ul li.vid3 a.active span {
	background-position: -558px -417px;
}
#vidNav ul li.vid4 a.active span {
	background-position: -558px -447px;
}
#vidNav ul li.vid5 a.active span {
	background-position: -558px -477px;
}
#vidNav ul li.vid6 a.active span {
	background-position: -558px -507px;
}

/*     LINKLIST      */

div#content ul.linklist {
	float: left;
	width: 320px;
	margin: -10px 20px 0 0;
}
div#content ul.linklist li {
	margin: 0 0 .5em 0;
}
div#content ul.linklist a {
	text-transform: uppercase;
}
div#content ul.linklist a small {
	font-weight: bold;
}

/*     LINKS      */

div#content ul.links {
	width: 240px;
	float: left;
	margin-bottom: 20px;
}


/*     GALLERY      */

div#content div.galleryBox {
	margin: 7px 0 0 0;
}
div#content ul.galleryList {
	margin: 0 0 -7px -7px;
	float: left;
}
div#content ul.galleryList li {
	float: left;
}
div#content ul.galleryList li a {
	float: left;
	padding: 5px;
	margin: 0 0 7px 7px;
	border: none;
}
div#content ul.galleryList li a span {
	display: block;
	width: 84px;
	height: 70px;
	overflow: hidden;
}
div#content ul.galleryList li a:hover {
	background: #fff;
}


/*     SHOWMORE      */

h4.showMore, div#content h4.showMore {
	position: absolute;
	left: -34px;
	margin: -40px 0 0 0;
	width: 34px;
	height: 25px;
}

h4.showMore strong {
	display: block;
	position: absolute;
	top: -20px;
	padding: 0 0 0 34px;
	width: 0px;
	height: 15px;
	overflow: hidden;
}

h4.showMore a {
	display: block;
	height: 25px;
	background: rgba(255,255,255,.5);
	border: none;
}
div#content h4.showMore a {
	border: none;
}
h4.showMore a:hover, div#content h4.showMore a:hover {
	background: rgba(255,255,255,.7);
}
h4.showMore a span {
	display: block;
	height: 25px;
	background-position: -592px -328px;
}
h4.showMore a:hover span {
	background-position: -558px -328px;
}
h4.morePics strong{
	background-position: -592px -295px;
}
h4.moreNews strong{
	top: -17px;
	height: 12px;
	background-position: -594px -312px;
}
h4.showMore a.loading span {
	position: relative;
	top: 5px;
	left: 9px;
	width: 16px;
	height: 16px;
	opacity: .5; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .5; /* Safari 1.x */
	-moz-opacity: .5; /* FF lt 1.5, Netscape */
	background: url(../img/loading.gif) center;
}

/*     DATELIST      */

div#content ul.datelist h3 {
	font-weight: normal;
	margin: 0.5em 0 1.3em;
}
div#content ul.datelist {
	margin: 0 0 3.5em 0;
}
div#content ul.datelist span.date {
	float: left;
	width: 80px;
	letter-spacing: -0.1em;
	margin: -.1em 0 0 0;
}
div#content ul.datelist span.date strong {
	font-size: 112.5%;
}
div#content ul.datelist a:hover {
	border-bottom: 3px solid #000;
}

/*     IMAGE LINK LIST    */

div#content ul.imglinklist li {
	clear: both;
}
div#content ul.imglinklist li h4 {
	text-transform: none;
	font-weight: normal;
	/*font-size: 90%;*/
}
div#content ul.imglinklist li h4 em {
	color: #666;
}
div#content ul.imglinklist li h4 strong {
	text-transform: uppercase;
	padding: 5px 0 0 0;
	display: block;
	/*font-size: 120%;*/
}
div#content ul.imglinklist li a {
	float: left;
	width: 100%;
	color: #333;
}
div#content ul.imglinklist li a:hover {
	color: #000;
}
div#content ul.imglinklist li a:hover img {
	border: 5px solid #fff;
	background: #000;
	padding: 1px;
}
div#content ul.imglinklist li img {
	border: 1px solid #000;
	padding: 5px;
	background: #fff;
	float: left;
	display: inline;
	margin: 0 20px 10px 0;
}

/*     FORMS      */

div#content p.error {
	color: #bf0000;
}
div#content p.success {
	color: #00799c;
}
div#content form img.loading {
	float: left;
	margin: 10px;
}
div#content form label {
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 5px 0;
}
div#content form button {
	float: left;
	cursor: pointer;
	text-transform: uppercase;
	text-align: left;
	background: #000;
	border: none;
	color: #fff;
	font-size: 100%;
	padding: 5px 10px 5px 7px;
	margin: 0 0 15px 0;
}
div#content form button strong {
	display: block;
	margin: -4px 0 0 0;
}

/***********************
	sidebar
***********************/
div#sidebar {
	float: left;
	width: 370px;
	padding: 238px 0 0 0;
	font-size: 160%;
}
div#sidebar a {
	color: #333;
}
div#sidebar a:hover {
	color: #000;
}
div#sidebar h3.sprite {
	height: 33px;
	margin: 24px 0 0 0;
}
div#sidebar h3.sprite a {
	display: block;
	height: 100%;
	width: 100%;
}
div#sidebar h3.sprite strong {
	display: none;
}
div#sidebar h3#facebook {
	background-position: 0 -446px;
}
div#sidebar .box {
	height: 65px;
	margin: 0 0 7px 0;
}

div#sidebar .box h3 {
	margin: 0;
}
div#sidebar .box h3 a {
	width: 101px;
	height: 65px;
	float: left;
	clear: both;
}
div#sidebar .box h3 a strong {
	display: none;
}
div#sidebar .news h3 a {
	background-position: 0 -276px;
}
div#sidebar .news h3 a:hover {
	background-position: -101px -276px;
}
div#sidebar .shows h3 a {
	background-position: 0 -348px;
}
div#sidebar .shows h3 a:hover {
	background-position: -101px -348px;
}
div#sidebar .twitter h3 a {
	width: 110px;
	background-position: -300px -276px;
}
div#sidebar .twitter h3 a:hover {
	background-position: -410px -276px;
}
div#sidebar .twitter {
	margin: 7px 0 0 0;
	font-size: 75%;
}
div#sidebar .twitter #twitterUpdateList {
	margin: 0 0 0 123px;
	padding: 10px 10px 0 0;
}
div#sidebar .twitter #twitterUpdateList div {
	height: 2.5em;
	overflow: hidden;
}
div#sidebar .twitter #twitterUpdateList a {
	font-weight: bold;
}

div#sidebar .box ul.datelist {
	margin: 1px 0 0 111px;
	padding: 10px 0 0 0;
}
div#sidebar .box ul.datelist li {
	margin: 0 0 4px 10px;
}
div#sidebar .box ul.datelist span.date {
	float: left;
	width: 55px;
	text-transform: uppercase;
	letter-spacing: -.1em;
}
div#sidebar .box ul.datelist span.date strong {
	font-size: 112.5%;
	line-height: 1;
	float: left;
}

div#sidebar div.facebook {
	height: auto;
	padding: 7px;
}

/***********************
	footer
***********************/

div#footer {
	clear: both;
	font-size: 140%;
	text-transform: uppercase;
	height: 70px;
	margin: 20px 0 0 0;
	background: rgba(0,0,0,.8);
}
div#footer div {
	width: 977px;
	margin: 0 auto;
}

div#footer a {
	color: #666;
}

div#footer a:hover {
	color: #fff;
}

div#footer h3 {
	font-size: 100%;
	padding: 18px 0 0 0;
	margin: 0 0 6px 0;
	color: #fff;
}
div#footer h3.copy {
	font-weight: bold;
}
div#footer .socialNetworks {
	float: right;
}
div#footer ul {
	clear: left;
}
div#footer ul.socialNetworks {
	position: relative;
	clear: right;
	margin: 0 -8px 0 0;
}
div#footer ul li {
	float: left;
	margin: 0 17px 0 0;
}
div#footer ul.socialNetworks li {
	margin: 0 0 0 0;
}
ul.socialNetworks a{
	width: 32px;
	height: 16px;
	float: left;
	display: inline;
	background-image: url(../img/icons.gif);
}
ul.socialNetworks a.facebook { background-position: 0px 16px; width: 30px;}
ul.socialNetworks a.myspace { background-position: -30px 16px; width: 29px;}
ul.socialNetworks a.twitter { background-position: -59px 16px; width: 29px;}
ul.socialNetworks a.youtube { background-position: -88px 16px; width: 29px;}
ul.socialNetworks a.mx3 { background-position: -120px 16px;}
ul.socialNetworks a.bandweb { background-position: -152px 16px;}
ul.socialNetworks a.restorm { background-position: -184px 16px;}
ul.socialNetworks a.degrees { background-position: -216px 16px;}
ul.socialNetworks a.lastfm { background-position: -248px 16px;}

ul.socialNetworks a.facebook:hover { background-position: 0px 0px;}
ul.socialNetworks a.myspace:hover { background-position: -30px 0px;}
ul.socialNetworks a.twitter:hover { background-position: -59px 0px;}
ul.socialNetworks a.youtube:hover { background-position: -88px 0px;}
ul.socialNetworks a.mx3:hover { background-position: -120px 0px;}
ul.socialNetworks a.bandweb:hover { background-position: -152px 0px;}
ul.socialNetworks a.restorm:hover { background-position: -184px 0px;}
ul.socialNetworks a.degrees:hover { background-position: -216px 0px;}
ul.socialNetworks a.lastfm:hover { background-position: -248px 0px;}

ul.socialNetworks a strong {
	display: none;
	color: #fff;
	position: absolute;
	top: -22px;
	left: 8px;
}
ul.socialNetworks a:hover strong{
	display: block;
}
a#shopNewWindow {
	position: absolute;
	display: block;
	width: 600px;
	height: 73px;
	text-indent: -9999px;
	background: url(../img/layout/bg-shopnewwindow.png) top center no-repeat;
	z-index: 2000;
	top: 5px;
	left: 50%;
	margin: 0 0 0 -300px;
}
a#shopNewWindow:hover {
	background: url(../img/layout/bg-shopnewwindow.png) bottom center no-repeat;
}