@CHARSET "UTF-8";

/**
 * CSS rules for LiveMusical web presence
 *
 * @author bitExpert AG
 *
 * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * This file is devided into sections:
 *
 * 1.  		common
 * 1.1. 	layouts
 * 1.1.1	3col
 * 1.1.2	block3col
 * 1.1.3	2col
 * 1.2. 	contentcontainer background images
 * 1.3.		Link Buttons
 * 2. 		modules
 * 2.1.		authenticationbox
 * 2.2.		menu
 * 2.3.		countdown
 * 2.4. 	calendar
 * 2.5.     account
 * 2.6.		error
 * 2.7.     QuickPurchase
 * 3.     	DEV
 *
 * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */

/* ######################### COMMON ####################### */

body {
	background-color: #000;
	font-size: 10px;
	font-family: Helvetica, sans-serif;
	font-style: normal;
}

.hidden {
	display: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.colOrange {
	color: #ed7a25 !important;
}

.colDarkGrey {
	color: #767676 !important;
}

.colLightGrey {
	color: #9b9591 !important;
}

.colWhite {
	color: #FFF !important;
}

.colBlack {
	color: #000 !important;
}

.errorMessage{
	margin: 10px;
	border: solid thin red;
	color: red;
	padding: 5px;
}

.successMessage{
	border:solid thin green;
	width: 90%;
	margin:10px;
	color:green;
	padding: 5px;
	font-size: 1.1em;
}

a {
	text-decoration:none;
}

a.linkBackward {
	background: transparent no-repeat url('../images/buttons/flecheorange_left.png') top left ;
	width:7px;
	height: 14px;
	display:block;
}

a.linkForward {
	background: transparent no-repeat url('../images/buttons/flecheorange_right.png') top left ;
	width:7px;
	height: 14px;
	display:block;
}

div.headline {
	background:transparent url(../images/background/virgule.png) no-repeat scroll 11px 9px;
	height:33px;
	width:26px;
	text-align:center;
}

div.tabView{
	background:transparent url(../images/background/account/tabView.png) no-repeat 0px 0px;
	width:126px;
	height:33px;
}

#tabSignUp{
	background:transparent url(../images/background/account/tabView.png) no-repeat 27px 0px;
	padding-left:27px;
}

p {
	color:#9B9591;
	font-size:1.2em;
	line-height:120%;
	padding-top:7px;
	padding-bottom:4px;
}

div.content{
	padding:8px 30px 0px 34px;
	height:483px;
}

#container {
	margin: 0px auto;
	width: 1024px;
}

#header {
	width: 100%;
	height: 163px;
	background: url("../images/background/header.png");
}

#contentContainer {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 605px;
    height: auto !important;
    height: 605px;		
}

#content {
	margin: 30px 0 0 0;
}

#footerContainer {
	text-align: center;
	bottom: 10px;
	position: absolute;
	width: 100%;
}

#footer {
	padding: 0 4px;
	display: inline;
	background: url("../images/alpha40BG.png") repeat;
}

#footer span,
#footer span a {
	line-height: 15px;
	color: #FFF;
}

.corneredContent {
	background-color: #FFF;
	width:100%;
	height:100%;
	overflow: hidden;
}

.bottomLeftCornerV {
	background: url("../images/bottomLeftCornerV.png") 0 100% no-repeat;
	padding-bottom: 27px;
}

.bottomLeftCornerH {
	background: url("../images/bottomLeftCornerH.png") 0% 100% no-repeat;
	padding-left: 26px;
}

.bottomRightCornerV {
	background: url("../images/bottomRightCornerV.png") 100% 100% no-repeat;
	padding-bottom: 27px;
}

.alpha40BG {
	background: url("../images/alpha40BG.png") repeat;
	overflow:hidden;
}

.module {
	margin: 0 0 25px 0;
}

/* ######################### LAYOUTS - 3col ####################### */

#layout3Col #leftCol {
	width: 305px;
	margin: 0 0 0 32px;
}

#layout3Col #middleCol {
	width: 385px;
	margin: 0 0 0 31px;
}

#layout3Col #rightCol {
	width: 207px;
	margin: 0 0 0 31px;
}

/* ######################### LAYOUTS - block3col ####################### */

#layoutBlock3Col #block {
	width: 994px;
	margin: 0 0 30px 28px;
}

#layoutBlock3Col #leftCol {
	width: 191px;
	margin: 0 0 0 28px;
}

#layoutBlock3Col #middleCol {
	width: 512px;
	margin: 0 0 0 26px;
}

#layoutBlock3Col #rightCol {
	width: 213px;
	margin: 0 0 0 21px;
}

/* ######################### LAYOUTS - 2col ####################### */

#layout2Col #leftCol {
	width: 715px;
	margin: 0 0 0 34px;
}

#layout2Col #rightCol {
	width: 207px;
	margin: 0 0 0 30px;
}

/* ######################### LAYOUTS - 1colleft ####################### */

#layout1ColLeft #leftCol {
	width: 680px;
	margin: 0 0 0 27px;
}

/* ######################### CONTENTCONTAINER BACKGROUND IMAGES ####################### */

#contentContainer.home {
	background: url("../images/background/content/bghome.png") no-repeat;
}
#contentContainer.spectacle {
	background: url("../images/background/content/bgspectacle.png") no-repeat;
}
#contentContainer.account {
	background: url("../images/background/content/bgaccount.png") no-repeat;
}
#contentContainer.archive {
	background: url("../images/background/content/bgarchive.png") no-repeat;
}
#contentContainer.quickPurchase {
	background: url("../images/background/content/bgpayment.png") no-repeat;
}
#contentContainer.signup {
	background: url("../images/background/content/bgsignup.png") no-repeat;
}
#contentContainer.payment {
	background: url("../images/background/content/bgpayment.png") no-repeat;
}
/* ######################### Link Buttons ####################### */

a.button div{
	background: transparent url('../images/buttons/entrance_orange.png');
	font-weight:bold;
	font-size:1.4em;
	height:16px;
	padding: 2px 4px 0px 2px;
	color:#FFF;
	float:left;
}

a.button:hover div{
	background: transparent url('../images/buttons/meta_selected.png');
	color: #000;
}

a.button span{
	background: transparent url('../images/buttons/flecheblanche.png');
	width:18px;
	height:18px;
	display:block;
	float:left;
	margin-left:4px;
}

a.button:hover span{
	background: transparent url('../images/buttons/flechenoir.png');
}

/* ######################### Modules ####################### */

/* ######################### Modules - AUTHENTICATIONBOX ####################### */

#authenticationBox {
	color: #9E9E9E;
	float: right;
}

#authenticationBox div.itemContainer {
	float: left;
	height: 21px;
	line-height: 21px;
	margin-right: 10px;
}

#authenticationBox .entry,
#authenticationBox .verticalSeparator {
	float: left;
	background-color: #9E9E9E;
}

#authenticationBox .verticalSeparator {
	background-image: url("../images/profileVerticalSeparator.jpg");
	width: 1px;
	height: 100%;
}

#authenticationBox .entry a {
	width: 85px;
	height: 21px;
	display: block;
	color: #FFF;
	text-align: center;
	line-height: 21px;
}

#authenticationBox .loginForm {
	width: 171px; /* 85px + 1px + 85px */
	background-color: #D6D6D6;
}

#authenticationBox .loginForm input {
	color: #9E9E9E;
	font-size: 1em;
	border: none;
	margin: 2px 0 0 4px;
	padding: 0 0 0 3px;
	height: 14px;
	width: 114px;
}

#authenticationBox .loginForm a.submit {
	display: block;
	height: 14px;
	line-height: 14px;
	padding: 0 10px;
	background: #ED7B28 url("../images/buttons/meta_btn1.png") no-repeat 0 0;
}

#authenticationBox .loginForm a.submit:hover {
	background: #D6D6D6 url("../images/buttons/meta_btn2.png") no-repeat 0 0;
}

#authenticationBox .loginForm a {
	margin: 2px 0 0 4px;
	color: #FFF;
}

#authenticationBox .loginForm a:hover {
	color: #000;
}

#authenticationBox .languageSelector a {
	color: #9E9E9E;
}

#authenticationBox .languageSelector a.active {
	color: #EE7C29;
}



/* ######################### Modules - Menu ####################### */

#menu {
	float: left;
	height: 27px;
}

#menu div {
	float: left;
}

#menu div div {
	float: none;
}

#menu .entry {
	background-color: #9E9E9E;
	width: 150px;
}

#menu .entry a {
	display: block;
	height: 100%;
	line-height: 27px;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}

#menu .verticalSeparator {
	background-image: url("../images/menuVerticalSeparator.jpg");
	width: 2px;
	height: 100%;
}

#menu .hover {
	background-image: none;
	background-color: #FFF;
}

#menu .hover a {
	color: #000;
}

#menu .active {
	background-image: none;
	background-color: #767676;
}

#shopMenuWrapper {
	background-color: #ed7a25;
	height:27px;
	width:100%;
}

/* ######################### Modules - COUNTDOWN ####################### */

.countdown {
	color: #FFF;
	font-weight: bold;
	font-size: 1.4em;
	height: 27px;
	float: right;
	line-height: 27px;
}

.countdown ul {
	margin: 0 29px 0 0;
}

.countdown li {
	display: inline;
}

.countdown li.label {
	color: #777777;
}

/* ######################### Modules - Calendar ####################### */

#calendar{
	width: 207px;
	height: 204px;
	color: black;
	background: url('../images/background/calendar.png') no-repeat left top;
	float: right;
}

#calendar div.center{
	background:transparent url(../images/background/virgule.png) no-repeat scroll 11px top !important;
	font-size:1.3em;
	margin: 9px 0px 3px 0px;
	font-weight:bold;
	width:100%;
}

#calendar .headline .floatLeft {
	float:left;
	height:21px;
}

#calendar table.headline td {
	vertical-align:middle;
	min-height: 25px;
	height: auto !important;
	height: 25px;
	padding:4px 3px 1px;
}

#calendar div.overflowHidden{
	overflow:hidden;
	display:inline-block;
	margin: 0 auto;
}

#calendar table{
	margin-left:6px;
	width:97%;
}

#calendar table.calendar td,
#calendar table.calendar th{
	text-align: center;
	font-size:1.4em;
	border-right: solid 1px grey;
	padding-bottom: 3px;
}

#calendar table.calendar td.last,
#calendar table.calendar th.last{
	border-right: none;
}

#calendar table.calendar td{
	line-height:1.3em;
	color:grey;
}

#calendar table.calendar td.actualMonth{
	font-weight: bold;
}

#calendar table.calendar a.hasEvent{
	display:block;
	margin: 0px 2px;
	background: #ed7a25;
	color: #FFF;
}

/* ########## SPECTACLE ########### */
#spectacleHeader{
	
}
#spectacleHeader div.corneredContent {
	background-color: #FFF;
	width:526px;
	height:100%;
	overflow: hidden;
	float: left;
}

#sceneAccess {
	float: right;
}
#sceneAccess div.countdown{
	height: 81px;
	overflow: hidden;
	width: 395px;
}

/* ########## Account ########### */

#accountTabContainer
{
	width: 723px;
}
#accountTabContainer .deleteButton
{
	color: white;
	margin-top: 8px;
}

	 
#accountTab{
	height:430px;
}

div.account_tabs,
#accountTab div{
	margin-left:25px;
}

#setPlayerDefinition,
#accountEdit {
	width: 700px;
	background: url('../images/alpha40BG.png');
	padding-top: 15px;
	overflow:hidden;
}

.account_tabs li{ 
	float:left;
	text-align:center;
	vertical-align:middle;
	width:119px;
	height:29px;
	display:table-cell;
	background: transparent url('../images/background/account/tab_grey.png') no-repeat top left;
}

.account_tabs a{
	padding-left:13px;
	font-size: 1.5em;
	font-weight:bold;
	vertical-align:middle;
}

.account_tabs span{
	line-height:29px;
	vertical-align:middle;
	background:transparent url(../images/background/virgule_white.png) no-repeat scroll 0px 0px;
}

.account_tabs .tab_white span{
	background:transparent url(../images/background/virgule_orange.png) no-repeat scroll 0px 0px;
}

.account_tabs .tab_white a:hover, 
.account_tabs .tab_white a:link, 
.account_tabs .tab_white a:visited{
	color: #ed7a25;
}

.account_tabs a:hover, 
.account_tabs a:link, 
.account_tabs a:visited{
	color: #FFFFFF;
}

.account_tabs .tab_white{
	background: transparent url('../images/background/account/tab_white.png') no-repeat top left;
}

#accountEdit form{
	margin-top:10px;
}

#accountEdit td {
	padding:3px 10px;
	color: #9b9591;
	font-size:1.2em;
	font-weight: bold;
}
#quickLogin table tr td.firstChild,
#accountEdit table tr td.firstChild {
	border-right: solid 1px #FFF;
	padding-left:35px;
	text-align:right;
}
#accountEdit .mandatoryNotification {
	margin: 0 0 15px 15px;
}

#accountEdit td.annotationInput {
	font-size:1.8em;
	color:#FFF;
}

#accountEdit td.agbRow{
	padding-top:30px;
}

#accountEdit a.button{
	padding-right:15px;
}

#accountTab #setPlayerDefinition{
	overflow:hidden;
	display:block;
	text-align:center;
}

#accountTab #setPlayerDefinition li{
	float:left;
	line-height: 2em;
	font-weight:bold;
	font-size:large;
	padding-right:15px;
}
#accountTab #setPlayerDefinition ul{
	padding-left:150px;
}

#setPlayerDefinition a.active{
	background: #000;
}


/* ######################### Account asset selection ####################### */

#Assets #selectSubset {
	margin-left: 10px;
}

#assetCatalogue .asset {
	margin-left: 0px;
	margin-top: 15px;
	overflow: hidden;
}

#assetCatalogue .asset .icon,
#assetCatalogue .asset .description,
#assetCatalogue .asset .additionalInfo {
	float:left;
	margin-left: 0px;
}

#assetCatalogue .asset .description,
#assetCatalogue .asset .additionalInfo {
	border-left: 1px solid #fff;
	margin-top: 11px;
	min-height: 65px;
	height: auto !important;
	height: 65px;
}

#assetCatalogue .asset .icon {
	margin-right: 10px;
}

#assetCatalogue .asset .description {
	width: 372px;
}

#assetCatalogue .asset .additionalInfo {
	width: 165px;
}

#assetCatalogue .asset .description h1,
#assetCatalogue .asset .description h3,
#assetCatalogue .asset .description p,
#assetCatalogue .asset .additionalInfo p {
	margin-left: 7px;
}

#assetCatalogue .asset .description h1 {
	color: #9E9E9E;
}

#assetCatalogue .asset .description h3,
#assetCatalogue .asset .description p,
#assetCatalogue .asset .additionalInfo p {
	color: #FFF;
	font-style: normal;
	font-weight: normal;
}

#assetCatalogue .asset .description h3 {
	font-size: 11px;
}

#assetCatalogue .asset .description p,
#assetCatalogue .asset .additionalInfo p {
	padding-top: 2px;
	padding-bottom: 0px;
	font-size: 12px;
}

#assetCatalogue .asset .additionalInfo p {
	font-weight: bold;
}

#assetCatalogue .asset .additionalInfo p.smaller {
	font-weight: normal;
	font-size: 11px;
}

#assetCatalogue .asset .description p a:link,
#assetCatalogue .asset .description p a:visited,
#assetCatalogue .asset .description p a:active
#assetCatalogue .asset .description p a:focus,
#assetCatalogue .asset .description p a:hover {
	color: #9E9E9E;
}

#assetCatalogue .paidLive .icon {
	float:left;
	width: 109px;
	height: 88px;
	margin-left: 0px;
	background: transparent url(../images/background/logobillet.png) no-repeat 50% 50% scroll;
}

#assetCatalogue .paidArchived .icon {
	width: 113px;
	height: 97px;
	margin-left: 0px;
	background: transparent url(../images/background/casette.png) no-repeat 50% 50% scroll;
}

/* ############################### error page ############################# */

#errorPage div.corneredContent {
	background-color:#FFFFFF;
	height:100%;
	overflow:hidden;
	width:705px;
}

/* ########################### password forgotten ########################## */

#content #PWForgotten{
	width:580px;
	height:120px;
	padding:15px 10px 20px 15px;
	color: #FFF;
}

#content #PWForgotten a,
#content #PWForgotten a:hover,
#content #PWForgotten a:visited{
	color:#FFF;
	text-decoration:none;
}

/* ############################# Direct Purchase ############################# */

#directPurchase{
	padding: 15px 2px 8px 8px;
}



/* ############################# Quick Purchase ############################# */

.boxRight{
	padding: 5px 2px 8px 3px;
}

#quickLoginForgotten{
	margin:3px 15px 0px 0px;
}

#quickLogin table {
	display:block;
	margin-bottom:5px;
}

#loginBox a.button{
	padding-right:13px;
}

#quickLogin table td{
	padding: 2px 3px 1px 5px;
}

#quickLogin table tr td.firstChild{
	padding-left:3px;
	font-weight:bold;
	font-size:1.2em;
}

#quickLogin table input{
	width:116px;
}

#quickLogin form a.submit{
	margin: 10px 5px 5px;
}

/* ######################################################################### */

/* ############################# UseCoupon Box  ############################# */

#couponForm{
	padding: 5px 2px 8px 9px;
}
#couponForm form input{
	margin-top: 5px;
}
	
#couponForm form .code{
	margin-top: 10px;
	width: 93%;
	height: 25px;
	font-size:1.7em;
}
#couponForm form .eMail{
	margin-top: 10px;
	margin-left: 5px;
	height: 12px;
	width: 136px;
	font-size:0.9em;
}
#couponForm form .eMailLabel{
	font-size:1.2em;
	font-weight:bold;
	padding-left:3px;
}
#couponForm form a.submit{
	margin: 10px 5px 10px;
}
#couponForm form div.acceptAGBBox{
	float: left;
	width: 162px;
	padding: 3px 0 0 3px;
}

/* ######################################################################### */

#shopping {
	background: #FFF;
}

/* ######################### DEV ####################### */
/* styles for markup and developing purposes. remove them in the final product */
.dev_black {
	background-color: #000;
}

span.tabVirgule {
	background:transparent url(../images/background/virgule_orange.png) no-repeat scroll 7px 10px;
	display:block;
	font-size:1.6em;
	font-weight:bold;
	height:22px;
	padding:9px 0 0 23px;
	width:100%;
}