@charset "utf-8";
/**
 * @author		Angelo Dini, tfuhlroth
 * @copyright	Maxomedia - Agentur für Crossmedia-Kommunikation BSW
 */

/*##################################################|*/
/* #CONTAINER# */

/* #CONTAINER/Main# */
#main-container { width:950px; margin:16px 0 40px 16px; }

/* #CONTAINER/Body# */
.body-container { margin:0 0 20px 0; }

/* #CONTAINER/Columns# */
.columns .col { float:left; width:150px; }
.columns .col + .col { margin-left:10px; }
.columns .span2 { width:310px; }
.columns .span3 { width:470px; }
.columns .span4 { width:630px; }
.columns .span5 { width:790px; }


/*##################################################|*/
/* #HEAD# */
#head-container {}

/* #HEAD/Meta# */
#meta-container { margin:0 0 56px 0; color:#666; }
#meta-container a.active { font-weight:bold; }

/* <base: 12px> */
#meta-container .sect a {
	float:left;
	font:bold 12px arial; color:#666;
	width:5.67em; margin:0 0.33em 0.33em 0; padding:0 0 0 0.17em;
	background:#ededed;
}
#meta-container .sect a:hover,
#meta-container .sect a.active { text-decoration:none; background:#ccc; }

/* <base: 11px> */
#meta-container span { font-size:11px; }
#meta-container .lang { text-align:right; }
#meta-container .metanav { text-align:center; }
#meta-container .metanav a { color:#666; padding:0 0.364em; }
#meta-container .metanav a, #meta-container .lang a { color:#666; }

/* #HEAD/Subnav# */
/* <base: 11px> */
ul.subnav {
	list-style:none;
	font-size:11px; color:#666;
	height:7.18em; padding:0.91em 0 0.27em 0.91em; margin:0 0 0.91em 0;
	background:#e3e3e3 no-repeat left top;
}
  .subnav li { font-size:11px; }
  .subnav li a { margin:0 0.36em; color:#666; }
  .subnav li a.active { color:#000; font-weight:bold; }

ul.subnav.img { height:1.09em; padding:6.91em 0 0.36em 0; } /* be nice to opera */
ul.subnav.img li { float:left; line-height:1; padding:0 0 0 0.09em; margin:0 0.09em 0 0; border-left:1px solid #666; }
ul.subnav.img li.first { border:none; }


/*##################################################|*/
/* #ELEMENTS# */

/* #ELEMENTS/Sidenav# */
/* <base: 11px> */
ul.sidenav { list-style:none; margin:0; font-size:11px; position:relative; left:-10px; }
  .sidenav li { padding:0 0 0.17em 0; }
  .sidenav li a { display:block; color:#666; text-decoration:none; padding:0 0 0 10px; background:url('../_gfx/icon_arrow.gif') no-repeat left 2px; }
  .sidenav li a:hover,
  .sidenav li a.active { display:block; color:#000; font-weight:bold; background:url('../_gfx/icon_arrow-active.gif') no-repeat left 2px; }

/* #ELEMENTS/Print# */
/* <base: 10px> */
p.print { margin:0; font-size:10px; }
 .print a { display:block; text-decoration:none !important; color:#f00; padding:3px; background:#ededed; border:1px solid #adadad; }
 .print a:hover { text-decoration:underline !important; color:#039; }

/* #ELEMENTS/Teaser# */
/* <base: 12px> */
a.teaser { display:block; font-size:12px; text-decoration:none; margin:0 0 1.00em 0; color:#000; }
a.teaser span { display:block; }
a.teaser .teaser-more { font-size:0.75em; color:#f00 !important; padding:0 0 0.25em 0; }
a.teaser:hover .teaser-more { text-decoration:underline; }
a.teaser img { padding:0 0 0.17em 0; }

/* vertical version */
.teaser.t_horizontal img { float:left; background:#fff; padding:0 0.83em 0.83em 0; }
.teaser.t_horizontal { margin:0 0 0.5em 0; clear:both; overflow:hidden; }

/* #ELEMENTS/Tooltip# */
.tooltip { background:#039; color:#fff; border:1px solid #fff; padding:0.3em 0.6em; opacity:0.8; }


/*##################################################|*/
/* #FOOT# */
/* <base: 11px> */
#foot-container { font-size:11px; color:#666; }
#foot-container a { margin:0 0.36em; color:#666; }

/* #FOOT/Footnav# */
ul.footnav { list-style:none; padding:3px 0 0; margin:0; text-align:right; }
  .footnav li { display:inline; }
  .footnav li a { font-size:11px; }
  
/* #FOOT/Pictos# */
ul.footlogos { list-style:none; padding:0; margin:0; }
  .footlogos li { float:inline; }
  .footlogos li.pictos { float:left; width:6.36em; height:2.36em; background:url('../_gfx/foot_pictos.jpg') no-repeat left -0.35em; }


/*##################################################|*/
/* #SITE# */

/* #SITE/Forms# */
.frm label {}
.frm div {}
.frm .radiocheck div { padding:0 0 5px; }


/*##################################################|*/
/* #LANDINGPAGE# */

#landingpage-parcel-container {
	display : block; position : relative; left : 0; top : 0;
	width : 470px; height : 220px;
	text-decoration : none;
	background : url(../_gfx/bg_landingpage-parcel-container.gif) no-repeat left top;
}
#landingpage-parcel-container #landingpage-parcel-bubble {
	display : none; position : absolute; right : 0; top : 0;
	width : 317px; height : 168px;
	background : url(../_gfx/bg_landingpage-parcel-bubble.png) no-repeat left top;
}
#landingpage-parcel-container:hover #landingpage-parcel-bubble { display : block; }
#landingpage-parcel-bubble .prize-label {
	position : absolute; right : 0; top : 10px;
	width : 220px;
	text-align : center; font-weight : bold; font-size : 11px; color : #474747;
}
#landingpage-parcel-bubble .href-label {
	position : absolute; right : 0; bottom : -20px;
	width : 220px;
	text-align : center;
}


#frm-login label { width : 130px; }
#frm-login .radiocheck { padding-left : 130px; }
#frm-login .radiocheck input { float : left; margin-top : 5px; margin-right : 5px; }
#frm-login .radiocheck label { float : left; width : 290px; }


/*##################################################|*/
/* #COLLECTION# */

#collection-container {
	position : relative; left : 0; top : 0;
	padding-bottom : 75px; margin : 50px 0 30px;
	background : url(../_gfx/bg_collection-container.gif) no-repeat left bottom;
}

#collection-viewport {
	position : relative; left : 0; top : 0; z-index : 200;
	height : 185px;
	background : url(../_gfx/bg_collection-viewport.jpg) no-repeat left top;
	border : 1px solid #c0c0c0;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}

#collection-viewport .collection-tab { display : none; }
#collection-viewport .parcel {
	position : absolute;
	width : 43px; height : 28px;
	overflow : hidden; text-indent : -1000px;
}
#collection-viewport .parcel-amount {
	position : absolute; right : 40px; bottom : 30px;
	font-weight : bold; font-size: 30px; color : #747474;
}

#collection-viewport .parcel-1 { left : 15px; top : 110px; }
#collection-viewport .parcel-2 { left : 60px; top : 110px; }
#collection-viewport .parcel-3 { left : 105px; top : 110px; }
#collection-viewport .parcel-4 { left : 150px; top : 110px; }
#collection-viewport .parcel-5 { left : 195px; top : 110px; }

#collection-viewport .parcel-6 { left : 35px; top : 140px; }
#collection-viewport .parcel-7 { left : 80px; top : 140px; }
#collection-viewport .parcel-8 { left : 125px; top : 140px; }
#collection-viewport .parcel-9 { left : 170px; top : 140px; }
#collection-viewport .parcel-10 { left : 215px; top : 140px; }

#collection-leshop .parcel { background : url(../_gfx/parcel-leshop.png) no-repeat left top; }
#collection-blue .parcel { background : url(../_gfx/parcel-blue.png) no-repeat left top; }
#collection-red .parcel { background : url(../_gfx/parcel-red.png) no-repeat left top; }
#collection-gold .parcel { background : url(../_gfx/parcel-gold.png) no-repeat left top; }

#collection-buttons { position : absolute; left : 120px; top : 179px; z-index : 100; list-style : none; }
#collection-buttons li {
	float : left; padding : 10px 0 3px; margin-top : 1px; 
	background : url(../_gfx/bg_collection-buttons.gif) repeat-x 0 7px;
	border : 1px solid #c0c0c0; border-width : 0 1px 1px 0;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
#collection-buttons .active { margin-top : 0; background : url(../_gfx/pattern-snow.gif); }
#collection-buttons .gold { border-left-width : 1px; }
#collection-buttons a {
	display : block;
	width : 45px; height : 29px;
	overflow : hidden; text-indent : -1000px;
	background : no-repeat center top;
}

#collection-buttons .leshop a { background-image : url(../_gfx/parcel-leshop.png); }
#collection-buttons .blue a { background-image : url(../_gfx/parcel-blue.png); }
#collection-buttons .red a { background-image : url(../_gfx/parcel-red.png); }
#collection-buttons .gold a { background-image : url(../_gfx/parcel-gold.png); }


#collection-viewport .collection-bubble-container {
	position : absolute; left : 15px; bottom : 115px; z-index : 500;
	width : 438px;
}
#collection-viewport .collection-bubble {
	position : relative; left : 0; top : 0; z-index : 550;
	padding : 10px;
	background-color : #fff;
	/*background-color : rgba(255, 255, 255, .8);*/
	border : 2px solid #747474;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
#collection-viewport .collection-bubble .button { margin-bottom : 0; }
#collection-viewport .collection-bubble-corner {
	position : absolute; right : 30px; bottom : -48px; z-index : 600;
	width : 38px; height : 50px;
	background : url(../_gfx/collection-bubble-corner.png) no-repeat left top;
}


#btn-logout {
	display : inline-block;
	width : 223px; height : 73px; padding-top : 27px;
	text-align : center; text-indent : 25px; font-weight : bold; color : #fff;
	background : url(../_gfx/icon_logout.gif) no-repeat left top;
}

#btn-back-to-game {
	float : right;
	width : 223px; height : 75px; padding-top : 25px;
	text-indent : 10px; font-weight : bold; color : #fff;
	background : url(../_gfx/icon_back-to-game.gif) no-repeat left top;
}




/*##################################################|*/
/* #ALERT# */

#alert-container {
	position : relative; left : 0; top : 0;
	width : 190px; padding-bottom : 8px; margin : 0 auto;
	font-size : 11px; color : #454545;
	background-color : #dededd;
}
#alert-container h6 {
	padding : 2px 6px; margin-bottom : 5px;
	background-color : #ececec;
	border-bottom : 1px solid #fff;
}
#alert-container p { padding : 0 6px; }
#alert-button {
	position : absolute; left : 12px; bottom : -10px;
	width : 125px; padding : 4px 0 4px 35px;
	text-transform : uppercase; font-weight : bold; color : #fd0001;
	background : #ececec url(../_gfx/icon_alert-inactive.gif) no-repeat 15px center;
	border : 3px solid #dededd;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
#alert-button:hover { text-decoration : none; color : #ff4810; }
#alert-button:hover span { text-decoration : underline; }
#alert-button span {
	text-transform : lowercase; font-weight : normal; color : #454545;
}

#alert-container .active { color : #2d7900; background-image : url(../_gfx/icon_alert-active.gif); }
#alert-container .active:hover { color : #6fb115; }




/*##################################################|*/
/* #DIARY# */

#diary-container {}




/*##################################################|*/
/* #PRIZES# */

#prizes-container {
	position : relative; left : 0; top : 0;
	padding : 36px 0; margin-top : 50px;
}

#prizes-viewport {
	position : relative; left : 0; top : 0; z-index : 200;
	padding-bottom : 30px;
	background : url(../_gfx/pattern-snow-light.gif);
	border : 1px solid #c0c0c0;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}

#prizes-viewport .prize-tab { display : none; }
#prizes-viewport .prize-tab h3 {
	padding : 5px 10px; margin-bottom : 20px;
	background-color : #fff; border-bottom : 1px solid #d6d6d6;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
#prizes-viewport .prize-tab-content-container { padding-left : 10px; }
#prizes-viewport .prize-tab img { float : left; margin-right : 10px; border : 1px solid #d6d6d6; }
#prizes-viewport .prize-tab-content { float : left; width : 225px; }
#prizes-viewport .prize-tab-value { font-weight : bold; font-size : 17px; color : #f00; }

#prizes-buttons { position : absolute; left : 120px; top : 0; z-index : 100; list-style : none; }
#prizes-buttons li {
	float : left; padding : 3px 0 10px;
	background : url(../_gfx/bg_prizes-buttons.gif) repeat-x 0 32px;
	border : 1px solid #c0c0c0; border-width : 1px 1px 0 0;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
#prizes-buttons .active { margin-top : 1px; background : url(../_gfx/pattern-snow.gif); }
#prizes-buttons .gold { border-left-width : 1px; }
#prizes-buttons a {
	display : block;
	width : 45px; height : 29px;
	overflow : hidden; text-indent : -1000px;
	background : no-repeat center top;
}

#prizes-buttons .leshop a { background-image : url(../_gfx/parcel-leshop.png); }
#prizes-buttons .blue a { background-image : url(../_gfx/parcel-blue.png); }
#prizes-buttons .red a { background-image : url(../_gfx/parcel-red.png); }
#prizes-buttons .gold a { background-image : url(../_gfx/parcel-gold.png); }

#prizes-spike {
	position : absolute; left : 180px; bottom : 112px; z-index : 300;
	width : 90px; height : 59px;
	background : url(../_gfx/prizes-spike.png) no-repeat left top;
}

#prizes-parcel-detail {
	width : 303px; height : 119px; margin : 15px 0 0 120px;
	background-repeat : no-repeat;
}


/*##################################################|*/
/* #FALLBACK# */

#fallback-container {
	position : relative; left : 0; top : 0;
	width : 468px; height : 410px;
	background : url(../_gfx/bg_fallback-container.jpg) no-repeat left top;
	border : 1px solid #c0c0c0;
}
#fallback-content {
	position : absolute; left : 35px; top : 80px;
	width : 348px; padding : 24px 24px 10px;
	font-size : 16px;
	background-color : #fff;
	background-color : rgba(255, 255, 255, .8);
	border : 1px solid #c0c0c0;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}





/*##################################################|*/
/* #TIPS# */

.tip-wrap {
	display : none;
	z-index : 10000; padding : 2px 4px;
	color : #fff;
	background-color : rgb(0, 51, 153);
	background-color : rgba(0, 51, 153, .9);
	border : 1px solid #fff;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-khtml-border-radius : 5px;
	border-radius : 5px;
}
.tip-text { display : none; }




