/*
	AS Program Board
	Extravaganza 2012 Stylesheet
	Author: David Schnurr
*/

@import url("normalize.css");

/* -- Generic Styles ------------------ */

html {
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: lighter;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clear { clear: both;}
.left {float: left;}
.right {float: right;}
.left-col {float: left; width: 49%;}
.right-col {float: right; width: 49%;}

p { 
	font-weight: lighter;
	line-height: 140%;
	margin: 6px 0 0 0;
	text-indent: 1.5em;
	font-size: 15px;
	color: #222;
}

p:first-child {
	margin-top: 0px;
}

a {
	color: #6ab9b5;
	text-decoration: none;
	border-bottom: 1px dotted #6ab9b5;
}

a:hover {
	color: #79ccc8;
	border-bottom: 1px dotted #79ccc8;
}

h1, h2, h3, h4, h5, h6 { 
	margin: 0; 
	text-transform: uppercase;
	letter-spacing: -1px;
	font-family: 'Contrail One', 'Helvetica Neue', Helvetica, cursive;
	font-weight: lighter;
}

a.button {
	display: block;
	width: 100%;
	padding: 10px 10px 10px 38px;
	margin: 0 0 8px 0;
	color: #fff;
	background-color: #79ccc8;
	cursor: pointer;
	font-size: 24px;
	text-decoration: none;
	border: none;
}

a.button:hover {
	background-color: #6ab9b5;
}

a.button-fb {
	background: #79ccc8 url(../images/button-facebook.png) 3px 9px no-repeat;
}
a.button-guest {
	background: #79ccc8 url(../images/button-ticket.png) 3px 9px no-repeat;
}
a.button-faq {
	background: #79ccc8 url(../images/button-faq.png) 3px 9px no-repeat;
}

/* -- Theme Colors ------------------ */

.dark { color: #433A42; }
.orange { color: #79ccc8; }

/* -- CSS3 Animations ------------------ */

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}

/* -- Navigation Styles ------------------ */

#nav-wrapper {
	width: 100%;
	height: 36px;
	display: block;
	position: fixed;
	z-index: 10;
	top: 0px;
	background-color: #79ccc8;
	-webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.4);
	box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.4);
	display: none;
}

#nav {
	width: 960px;
	margin: 0 auto;
}

#nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 450px;
	float: left;
	overflow: visible;
}

#nav ul li {
	float: left;
	margin-right: 3px;
}

#nav ul li h2 { 
	margin: 0 10px 0 0; 
}

#nav ul li h2 a, #nav ul li h3 a {
	color: #fff;
	text-transform: uppercase;
	font-family: 'Contrail One', 'Helvetica Neue', Helvetica, cursive;
	text-shadow: 1px 1px 0px #433a42;
	filter: dropshadow(color=#433a42, offx=1, offy=1);
	letter-spacing: -1px;
	text-decoration: none;
	border: none;
}

#nav ul li h2 a { 
	font-size: 28px; 
}

#nav ul li h3 a {
	height: 36px; 
	display: block;
	padding: 6px 5px 0 5px;
}

#nav ul li h3 a:hover, #nav ul li.active h3 a {
	background-color: #6ab9b5; 
}

.social .fb-like {
	width: 85px;
}

.social {
	display: block;
	margin-top: 16px;
}

.social ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.social ul li {
	display: inline-block;
	margin-right: 4px;
	opacity: 0.6;
}

.social ul li:hover {
	opacity: 1;
}

.social ul li a {
	display: block;
	width: 16px;
	height: 16px;
	text-decoration: none;
	border: none;
}

.social ul li a.social-official {
	background: url(../images/social-official.png) top left no-repeat;
}

.social ul li a.social-facebook {
	background: url(../images/social-facebook.png) top left no-repeat;
}

.social ul li a.social-twitter {
	background: url(../images/social-twitter.png) top left no-repeat;
}

.social ul li a.social-lastfm {
	background: url(../images/social-lastfm.png) top left no-repeat;
}

.social ul li a.social-youtube {
	background: url(../images/social-youtube.png) top left no-repeat;
}

.social ul li a.social-instagram {
	background: url(../images/social-instagram.png) top left no-repeat;
}

#nav .social {
	float: right;
	margin-top: 7px;
	text-align: right;
	width: 160px;
}

#nav .social ul li {
	margin-right: 8px;
}

#nav .social ul li a {
	margin-top: 2px;
}



/* -- Generic Page Style ------------------ */

.page {
	display: none;
	width: 100%;
	height: 900px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	position: relative;
}

.page .block {
	position: relative;
	display: block;
	width: 960px;
	margin: 0 auto;
	height: 100%;
}

.page .block > h1 {
	position: absolute;
	color: #79ccc8;
    font-size: 48px;
    letter-spacing: -3px;
    z-index: 2;
    text-shadow: 1px 1px 0px #fff;
    filter: dropshadow(color=#fff, offx=1, offy=1);
}

.page .block .block-inner {
	height: 100%;
	padding-top: 58px;
	position: relative;
}

.page.artist .block > h1 {
	text-shadow: 1px 1px 0px #fff, 0px 0px 30px rgba(255, 255, 255, 0.4);
	filter: dropshadow(color=#fff, offx=1, offy=1);
	font-size: 84px;
	letter-spacing: -6px;
}

.page.artist .block {
	top: 15%;
}

.page.artist p {
	display: block;
	width: 300px;
	color: #fff;
	text-shadow: 1px 1px 0px #222, 0px 0px 5px #000;
    filter: dropshadow(color=#222, offx=1, offy=1);
    margin: 0;
    text-indent: 0;
}

.page.artist p a {
	color: #fff;
	border-color: #eee;
	margin-top: 6px;
	display: inline-block;
}

/* -- Tab Styles ------------------ */

.tabs ul.tabs-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabs ul.tabs-nav:before,
.tabs ul.tabs-nav:after {
	content:"";
	display:table;
}
.tabs ul.tabs-nav:after {
	clear: both;
}

.tabs ul.tabs-nav li {
	display: inline-block;
	float: left;
	padding: 5px 8px 3px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.2);
	margin-right: 1px;
}

.tabs ul.tabs-nav li:hover {
	background-color: rgba(255, 255, 255, 0.35);
}

.tabs ul.tabs-nav li a {
	color: #433A42;
	text-decoration: none;
	font-family: 'Contrail One', 'Helvetica Neue', Helvetica, cursive;
	text-transform: uppercase;
	font-size: 24px;
    line-height: 100%;
    border: none;
}

.tabs ul.tabs-nav li.selected {
	background-color: rgba(255, 255, 255, 0.5);
}

.tabs ul.tabs-nav li.selected a {
	color: #79ccc8;
	text-shadow: 1px 1px 0px #fff;
    filter: dropshadow(color=#fff, offx=1, offy=1);
}

.tabs .tab {
	display: none;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 20px;
	height: 100%;
	overflow: auto;
}

/* -- Specific Page Styles ------------------ */

#home, #artist, #artist2, #artist3, #artist4, #artist5, #info {
	background-size: cover !important;
}

#home 	{ background: url('../images/x13bg-1024.png') 50% 0 no-repeat fixed; }
#artist1 { background: url('../images/kl-1024.jpg') 50% 0 no-repeat fixed; }
#artist2 { background: url('../images/dada-1024.jpg') 50% 0 no-repeat fixed; }
#artist3 { background: url('../images/jboog-1024.jpg') 50% 0 no-repeat fixed; }
#artist4 { background: url('../images/growlers-1024.jpg') 50% 0 no-repeat fixed; }
#artist5 { background: url('../images/alpha.jpg') 50% 0 no-repeat fixed; }
#info 	{ background: url('../images/bg1_1024.jpg') 50% 0 no-repeat fixed; }

body.mobile .page {
	height: 775px;
	background-color: #79ccc8;
}

body.mobile #home,
body.mobile #artist1,
body.mobile #artist2,
body.mobile #artist3,
body.mobile #artist4,
body.mobile #artist5,
body.mobile #info { 
	background-attachment:scroll; 
}

@media (min-width:1025px) { 
	#home 	{ background-image: url(../images/x13bg-1440.png) }
	#artist1 { background-image: url(../images/kl-1440.jpg) }
	#artist2 { background-image: url(../images/dada-1440.jpg) }
	#artist3 { background-image: url(../images/jboog-1440.jpg) }
	#artist4 { background-image: url(../images/growlers-1440.jpg) }
	#info 	 { background-image: url(../images/bg1_1440.jpg) }
}
@media (min-width:1441px) { 
	#home 	{ background-image: url(../images/x13bg-1920.png) }
	#artist1 { background-image: url(../images/kl-1920.jpg) }
	#artist2 { background-image: url(../images/dada-1920.jpg) }
	#artist3 { background-image: url(../images/jboog-1920.jpg) }
	#artist4 { background-image: url(../images/growlers-1920.jpg) }
	#info 	 { background-image: url(../images/bg1_1900.jpg) }
}
@media (min-width:1921px) { 
	#home		{ background-image: url(../images/x13bg-2560.png) }
	#artist1 { background-image: url(../images/kl-2560.jpg) }
	#artist2 { background-image: url(../images/dada-2560.jpg) }
	#artist3 { background-image: url(../images/jboog-2560.jpg) }
	#artist4 { background-image: url(../images/growlers-2560.jpg) }
}

#home {
	display: block;
}

#home .block {
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -295px;
	margin-left: -480px;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#home #logo {
	/*display: none;*/
	width: 700px;
	height: 590px;
	margin: 0 auto;
	background: transparent url(../images/x13-logo.png) top left no-repeat;
	position: relative;
	z-index: 7;
	text-indent: -9000;
}

#home #logo img {
	display: none;
}

#artist1 .block {
	text-align: right;
}

#artist1 .social {
	float: right;
	clear: both;
}

#artist1 .block h1 {
	right: 0;
	width: 310px;
	line-height: 90%;
}

#artist1 .block p {
    padding-top: 155px;
    float: right;
    width: 320px;
}

#artist2 .block p {
    padding-top: 90px;
	 width: 310px;
}

#artist3 .block p {
	padding-top: 90px;
}


#artist4 .block p {
	padding-top: 100px;
	width: 310px;
}

#artist5 .block {
	text-align: right;
}

#artist5 .block h1 {
	width: 320px;
	line-height: 90%;
	right: 0;
}

#artist5 .block p {
    padding-top: 160px;
    width: 315px;
	 float: right;
}

#info .block, #sponsors .block {
	padding: 30px;
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 0.1);
	box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

#info .tabs {
	height: 100%;
	padding-top: 58px;
	position: relative;
}

#info .tabs ul.tabs-nav {
	position: absolute;
}

#info .tabs #tabs-1 {
	display: block;
}

#info .tab-container {
	padding-top: 32px;
	height: 100%;
}

#info img {
	-webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.4);
	box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}

#info #nos-box {
	font-size: 13px;
	border: 1px dotted #999;
	padding: 8px;
}

#info #nos em {
	font-size: 14px;
	display: block;
	margin-bottom: 4px;
}

#info #nos small {
	display: block;
	margin-top: 6px;
}

#info #faqs ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
	font-size: 18px;
}

#info #faqs ol li {
	background: rgba(255, 255, 255, 0.7);
	padding: 6px;
	margin-bottom: 5px;
	cursor: default;
	color: #222;
}

#info #faqs ol li span {
	display: inline-block;
	cursor: pointer;
}

#info #faqs ol li div {
	font-size: 14px;
	display: none;
	margin-top: 4px;
	line-height: 140%;
}

#sponsors .block-inner {
	padding-top: 100px;
	text-align: center;
}

#sponsors .right-col {
	padding-top: 100px;
	text-align: center;
}

#sponsors a {
	border: none;
}

#footer-wrapper {
	width: 100%;
	padding: 10px 0;
	display: block;
	background-color: #79ccc8;
	-webkit-box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.4);
	display: none;
}

#footer {
	color: #eee;
	width: 960px;
	margin: 0 auto;
}

#footer a {
	color: #fff;
	border-color: #fff;
}

#footer .left-col a {
	border: none;
}

#footer .right-col {
	font-size: 12px;
	text-align: right;
	padding-top: 10px;
}

h2.neue {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: normal;
	font-size: 24px;
	margin: 8px 0;
}

/* Dialog Box */

#dialog-mask {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 19;
}

#dialog {
	position: absolute;
	width: 500px;
	margin-top: -100px;
	margin-left: -250px;
	top: 50%;
	left: 50%;
	background: #222;
	padding: 15px;
	color: #eee;
	text-align: center;
	-webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

#dialog .buttons {
	margin-top: 14px;
}

#dialog p {
	color: #eee;
	text-indent: 0;
	text-align: center;
}

#dialog small {
	display: block;
	margin-top: 6px;
	color: #ddd;
	letter-spacing: 0px;
}

#dialog a.button {
	width: auto;
	padding: 6px;
	margin: 0 0 0 10px;
	padding: 4px 8px;
	display: inline-block;
	font-size: 14px;
}