/* -----------------------------------------------------------------------

 Fanflash
 http://www.fanflash.de

   * Begin: 28.09.2009
   * Autor: D. Rogaczewski
   * File: screen.css
   * Update: 09.02.10 (Countries)

----------------------------------------------------------------------- */



/* Basic Selectors
--------------------------------------------------------------------------------------- */

.wrapper{ width:940px; margin: 0 auto 40px; position:relative; }
* { margin:0; padding:0; }

body { background:url(../img/layout/body-bg.jpg) top center no-repeat #000; position:relative; }



/* Header
--------------------------------------------------------------------------------------- */

#header{ height: 104px; }
#header .right{}

#subHeader{overflow: hidden; width: 920px; height: 160px; position: absolute; top:58px; float: left;}
#subHeader-in{width: 920px;float: left; display: block; height: 160px; background: url(../img/layout/header-gradient.png) no-repeat; padding-right: 30px;}
#subHeader h1{text-align: left; line-height: 15px; font-size:18px; font-family: Tahoma, Verdana; font-weight: normal; text-transform: uppercase; letter-spacing: -1px; color: #E1D1A7; padding: 40px 30px 0 480px;}
#subHeader h2{ line-height: 35px; font-size:16px; font-family: Tahoma, Verdana; font-weight: normal; text-transform: uppercase; position: absolute; bottom: -20px; background: url(../img/layout/op50-b.png) repeat; width: 900px; text-align: left; left: 0; padding-left: 20px; display: none;}



/* Branding
--------------------------------------------------------------------------------------- */

#logo a{background: url(../img/layout/logo-fanflash.png) top left no-repeat; height: 70px; width: 248px; margin-top: 30px}

#earth{background: url(../../files/earth.png) no-repeat; width: 1205px; height: 316px; position: absolute; left:50%; top:0; margin-left: -592px;display: none}


/* Navis
--------------------------------------------------------------------------------------- */

#nav-main{position: absolute; top:135px; left:10px; width: 920px; z-index: 100;}
#nav-main li{float: left;}
#nav-main li a{font-family:Trebuchet, Arial;float: left; height: 25px; line-height: 25px; font-size: 1em; text-transform: uppercase; background:url(../img/layout/op25-b.png); padding: 0 10px; margin-right: 2px; color: #D6CEB0;}
#nav-main li a span{display:block;}
#nav-main li.current a span{color: #e1d1b0}
#nav-main li a:hover{text-decoration: none; color: #FFF;}

#nav-main li ul li{background-position: center; background-repeat: no-repeat; position: relative; display: block;}
#nav-main li ul li a{height: 80px;background:url(../img/layout/op50-b.png) repeat; bottom:0;display: block;width: 100%;padding: 0; position: relative;}
#nav-main li ul li a img{float: left; position: absolute; z-index: 10;}
#nav-main li ul li a span{position: absolute; bottom: 0; display: block; float: left; width: 100%; height:22px;z-index: 20;}
#nav-main li ul li a span{background: url(../img/layout/nav-label-bg.png) repeat; padding: 0 5px}

#nav-top{ background: url(../img/layout/nav-top-bg.jpg) #000 no-repeat bottom; height: 30px; width: 445px; position: absolute; top: 0; right: 0; z-index: 2000; padding: 0 0 0 20px; text-align: right}
#nav-top li{float: left; line-height: 28px; margin: 0 10px 0 0}
#nav-top li.last{border-right: none;}
#nav-top li a{float: left; font-size: 11px; margin-right: 5px; color: #b1a387; text-transform: uppercase;}
#nav-top #clang{float:right; margin-right:8px;}
#nav-top #clang a{margin: 5px 2px 0 0; border: 1px solid #000; padding: 1px; float: left}
#nav-top #clang a:hover, #nav-top #clang a.active{border: 1px solid #515151;}
#nav-top #clang span{float: left; text-transform: uppercase;color: #b1a387; margin:0 10px; font-size: .9em; line-height: 28px}


/* Content
--------------------------------------------------------------------------------------- */

#content{ background: url(../img/layout/content-bg.gif) top left no-repeat; min-height:390px; width: 100%; overflow: hidden;margin: 0; padding: 0 0 0 10px; position: relative;}
#content .subbanner .col1{padding: 6px;}
#content .subbanner{ display: block; width: 935px; margin: 0 0 0 -10px; height: 85px}


/* Main Content
--------------------------------------------------------------------------------------- */

/*#main-content{ width: 920px; margin: 218px 0 0 0; background: url(../img/layout/main-content-bg.gif) repeat-y -9px 0;}*/
#main-content{ width: 920px; margin: 218px 0 0 0; }
#main-content .bg50{background: #020202; overflow: hidden}
#main-content .col2{min-height: 420px; width: 422px; padding: 10px 20px 20px; margin-bottom: 20px; margin-right: 0; background: #1A1A1A}
#main-content .col1{ width: 174px; padding: 20px; border: none; margin: 0}
.op50 img{opacity:0.5;filter:alpha(opacity=0.5);}
.container{position: absolute; top:58px;}

#homeTeaser{position:absolute; top:0; width: 918px; height: 345px; display: block; position: relative}
#homeTeaser-bg{width: 918px; z-index:20; position:absolute; top:0; height: 345px; display: block; background: url(../img/layout/op50-b.png) repeat;display:none;}

#bar-bottom{position: absolute; bottom: 0; z-index: 80; width:920px}
#bar-bottom ul{margin-left: 20px;}
#bar-bottom .ui-tabs-panel{height: 72px;}

#bb-activator{display:none; position: absolute; left:0; height: 30px; bottom: 0; z-index: 1001; background: #fff; opacity:0.5; width: 100%;}

/*#main-inner{background: url(../../files/sidebar-big.jpg) no-repeat top right; overflow: hidden;}*/

#ff-fan{position: absolute; right: -20px; top:180px}

/* Sidebar
--------------------------------------------------------------------------------------- */

#sidebar{width: 239px; float: left; display: block; position: relative; float: left}
#sidebar-inner{z-index: 100; position: absolute;}

#main-content #nav-sub{position: relative; list-style: none; margin: 18px 20px 0 20px}
#main-content #nav-sub li{list-style: none; margin: 0}
#main-content #nav-sub li a{display:block;line-height: 24px;border-bottom: 1px dotted #333; text-transform: uppercase; font-size: 11px}
#main-content #nav-sub li a:hover{text-decoration: underline;}

#sidebar h3{margin: 20px 20px 10px 20px; border-bottom: 1px dotted #333;}

#sidebar .box{background: url(../img/sprite-boxes.gif) right bottom no-repeat; width: 246px; margin-top: 24px; padding-bottom: 12px}
#sidebar .box .inner{background: url(../img/sprite-boxes.gif) right top no-repeat; padding: 12px 12px 0 12px;}
#sidebar .box .right{margin:-4px -36px 0 0;}

#sidebar2{width: 210px; overflow:hidden; float: left; padding: 320px 0 0; display: block}
#sidebar-img{position: absolute; top:0; right: 0; width: 330px; display: block; height: 600px; z-index: 50;}

.block{margin: 20px; }
.block .block-box{border: 1px dotted #222; -moz-border-radius: 6px; -webkit-border-radius:6px; background: #191919;}
#lenyards{display: block; height: 180px; overflow: hidden}
#lenyards img{margin: -60px 0 0 20px}


/* Buttons
--------------------------------------------------------------------------------------- */

.info-btns{}
.info-btns li{float: left;}
.info-btns a{background: #FFF; display:block; width: 184px; line-height: 22px; margin: 0 1px 1px 0; text-align: center; font-size: 11px; color: #282828}
.info-btns a:hover{background: #b2b2b2; color: #FFF; text-decoration: none}

.btn-ext{background: url(../img/btn-ext.png) right top no-repeat; height: 84px; width: 20px; display: block; text-indent: -9999px;}
.btn-ext:hover{background: url(../img/btn-ext.png) left top no-repeat;}

.btn-s{background: url(../img/btn-s.jpg) no-repeat left top; height: 20px; line-height: 20px; padding-left: 8px; float: left; }
.btn-s span{background: url(../img/btn-s.jpg) no-repeat right top; height: 20px; line-height: 20px; padding-right: 8px; float: left; }
.btn-s:hover{ text-decoration: none; background-position:left bottom;}
.btn-s:hover span{ text-decoration: none; background-position:right bottom;}



/* Images
--------------------------------------------------------------------------------------- */

.thumb{ display: block; margin: 0 9px 6px 0; padding: 1px; }
.thumb img{border: none;}

.getnews,
.getnews-fr,
.getnews-sp{background-repeat: no-repeat; width: 300px; height: 19px; margin: 1px 0 0; background-image: url(../img/layout/get_latest_news_en.png);}
.getnews-fr{ background-image: url(../img/layout/get_latest_news_fr.png);}
.getnews-sp{ background-image: url(../img/layout/get_latest_news_sp.png);}

#welcometext{float: left;width: 900px;height: 67px; text-indent: -9999px; background-repeat: no-repeat; background-position: center}

.sf-menu li ul li a{float: left; height: 80px; margin: 0 9px 9px 0; overflow: hidden; position: relative; width: 123px;}
.sf-menu ul li a{display: block;position: relative;}
.sf-menu li ul li a img {height: 148px;left: -20px;position: relative;top: 0;width: 220px;float: left}
.sf-menu li ul li a.slide img {height: 106px;left: -35px;top: -10px;width: 160px;}
.sf-menu li ul li a.zoom-out img {height: 80px;left: 1px;top: 0;width: 123px;}
        
.gallery a{margin:0 7px 0 0;}  
.gallery a img{border:1px solid transparent;}
.gallery a:hover img{border:1px solid #EB6E08;} 



/* Forms
--------------------------------------------------------------------------------------- */

form{}
form.form-def{}
input{}
textarea{}

form.form-def label{float: left; text-align:right; line-height: 24px; width:130px; font-size:11px; text-transform: uppercase; display:none;}
form.form-def p{float:left; margin-bottom: -8px !important}
form.form-def .btn{margin-left: 100px !important}
form.form-def span.formreq{float:left;margin-left:3px;}

.form-error{text-transform: none; color:#ff0000;}
.form-success{float:left; text-transform:none; width:100% !important; color: #eb6e08 !important;}

input.txt,
textarea.formtextfield,
.formselect{background:none; font-size:7pt; padding:2px 3px 0px 3px; margin:3px 0 0 0px; color:#7F796F; border:1px solid #4E4E4E;}
input.txt{height: 14px; width:259px}
textarea.formtextfield{width:375px;}
#doform43 .hasDatepicker{width:77px;}

.formselect{width:85px; margin-top:4px; padding:0;}
.formselect option{border-bottom:1px dotted #4e4e4e; padding:0 3px; height:14px;}

#footer .inner p{float: left; margin-right: 10px; width: 210px}
#footer .inner input.txt{background:url(../img/layout/input-bg.jpg) no-repeat top left; height:12px;padding-top: 3px}
#footer .inner label{display: none;}

#header #call-back{width:305px; top: 113px; right: 0;z-index: 100;position: absolute;}
#header #call-back label{font-size: 9px; text-transform: uppercase; float: left; width: 100px; text-align: right;}
#header #call-back p{margin: 0 0 5px}
#header #call-back input.txt{min-width: 90px;width: 90px;border: 1px solid #4E4E4E; color: #7F796F; background: none; margin:0 0 0 5px}
#header #call-back{}

.form-btn strong, .form-btn2 strong{background: url(../img/buttons/form-btn-bg.gif) left top no-repeat; height: 20px; line-height: 20px; padding-left: 5px; display: block; float: left;}
.form-btn strong input, .form-btn2 strong input{background: url(../img/buttons/form-btn-bg.gif) right top no-repeat; height: 20px; line-height: 20px;border: none; padding: 0 5px 0 0; cursor: pointer; font-size: 11px}
#header #call-back .form-btn2 strong{margin-left:5px;}

.form-btn2 strong{background: url(../img/buttons/form-btn-bg-35.gif) left top no-repeat; height: 17px; line-height: 15px;}
.form-btn2 strong input{background: url(../img/buttons/form-btn-bg-35.gif) right top no-repeat; height: 17px; line-height: 15px;}

.form-btn strong:hover{background: url(../img/buttons/form-btn-bg.gif) left bottom no-repeat;}
.form-btn strong:hover input{background: url(../img/buttons/form-btn-bg.gif) right bottom no-repeat;}
.form-btn2 strong:hover{background: url(../img/buttons/form-btn-bg-35.gif) left bottom no-repeat;}
.form-btn2 strong:hover input{background: url(../img/buttons/form-btn-bg-35.gif) right bottom no-repeat;}

form.form-def .form-btn2{float:left;}

#form-newsletter .txt{width:140px; font-size: 12px; padding: 2px 0 3px 3px; margin:0 5px 0 0}

.btn-slide {background: url(../img/icons/white-arrow.gif) no-repeat right -50px;text-align: center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}



/* Icos
--------------------------------------------------------------------------------------- */

.ico{background-repeat: no-repeat; width: 17px; height: 17px; float: left; text-indent: -9999px; position: relative; background-position: top left; margin-left: 5px;}
.ico-help{background-image: url(../img/icons/ico-help.gif);}
.ico:hover{ background-position: bottom left;}

.ui-datepicker-trigger {cursor:pointer; margin:3px 0 0 -16px; float:left;}
#header .ui-datepicker-trigger {cursor:pointer; margin:0 0 0 -16px; float:left;}



/* Footer
--------------------------------------------------------------------------------------- */

#footer{background:url(../img/layout/footer-bg.jpg) repeat-x; text-transform: uppercase; width:937px; overflow: hidden; position: relative;}
#footer .inner{padding: 10px 10px 0 0; margin-bottom: 20px; clear: both; display: block; overflow: hidden}
#footer p{float:left; margin: 0 0; font-size: .9em; color: #555; padding-left: 28px}
#footer .a-center{width:870px; text-align: center; clear: both; border-top:1px solid #222; padding-top: 10px; margin: 10px 0 0 30px}
#footer .original{color: #555; margin-left: 20px;}
#footer .bestview{font-size: 8pt; text-transform: none; color:#333;margin-right: 10px;}
#footer .bestview a{color:#333;text-decoration: underline;}
#footer ul{float:right;overflow: hidden; margin-right: 10px; margin-bottom: 3px; width:380px}
#footer ul li{float: left;}
#footer ul li a{color: #555; font-size: .9em;  margin-right: 10px; float:left}
#footerPlayer{width: 50px; height: 30px; position: absolute; right: 0; top:0}
#footer span.error{padding: 10px 0 0 0; float: left; font-size: 10px; text-transform: none; color:#ff0000;}


/* Plugins
--------------------------------------------------------------------------------------- */

#tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:2px 5px;color:#333;display:none; font-size: 11px; z-index: 1000000}


/*Slidepaner*/
#panel {display: none;position: absolute; top:0; left:100px; width: 750px; height: 440px; z-index: 2000000; background: #000; padding: 20px; }
#btn-close {display: block;position: absolute; top:0; right:-5px; width:20px; height: 20px; z-index: 2000000; background: #000; }
#noscript_msg{text-align:center;background-color:#FFFFCC;border:1px solid #FFCC35;color:#000000;display:block;font-size:13px;font-weight:bold;padding:3px 15px 3px 10px;}

.tab-panel{background:url(../img/layout/op75-b.png);display:block;padding: 10px 20px 0 20px}
#tabcontent {clear:left;height:100px;overflow:hidden}
.tab{position: relative; float: left; border-bottom-width: 0 !important; margin: 0 0 0 .5em; padding: 0 10px; line-height: 25px; height: 25px; color: #fff; font-weight: bold; text-transform: uppercase; cursor:pointer;}
.tab:hover{ text-decoration: underline}
.tab-panel {display:none;height:100px;overflow:hidden;padding:15px 20px 0;}
.tab-btn1{border: 1px solid #ffaf0f; background: #f58400 url(images/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x; }
.tab-btn2{border: 1px solid #37ff0f; background: #01b706;}
.tab-btn3{border: 1px solid #6F71FF; background: #0106d0;}
.videothumb{width:90px;height:50px;background-position: center;background-repeat: no-repeat;display: block;float: left; text-align: center; padding-top: 10px}

.zoom-ico{background:transparent url(../img/icons/zoomin.gif) no-repeat scroll left 4px;color:#808080;float:right;font-size:10px !important;margin:3px 0 0;padding-left:14px;text-decoration:none;}


/* Countries
--------------------------------------------------------------------------------------- */

/* Countries (08.02.2010 | daro) */
#main-content #countries{list-style: none;overflow: hidden;margin: 10px -15px 10px 0}
#main-content #countries li{float: left; list-style: none; margin: 0 23px 12px 0}
#countries img{float: left;}
#countries a{display: block; float: left;}

#main-content .partner{clear: both; overflow: hidden; margin:0 30px 0 20px}
#main-content .partner p{margin-bottom: 5px}



/* HOME
--------------------------------------------------------------------------------------- */

/* home (19.02.2010 | daro) */

.container{position: relative}
.container-inner{height: 281px; background-repeat: no-repeat; overflow: hidden; width:858px; padding: 50px 30px 0}

/* box */
.box{background: url(../img/layout/box-bg.png) repeat; width: 370px; overflow: hidden; height: 225px; -moz-border-radius: 6px; -webkit-border-radius:6px; position: relative}
.box-inner{padding:10px}

.box li{margin: 6px 0 0; padding: 6px 0 0}

.box h2{margin: 0 0 0; padding: 0 0 3px; border-bottom: 1px solid #ffc292; font-weight: bold; text-transform: uppercase }
.box .thumb{border:1px solid #ff9d50; display: block; float: left; margin: 0 8px 0 0}
.box .thumb:hover{border:1px solid #ffc292;}
.box h3{margin: 0 0 3px;font-size: 13px; line-height: 14px; color: #fff}
.box h3 a{ color: #fff; font-weight: bold}
.box p, .box span{color: #fff; font-size: 11px; margin: 0; line-height: 16px}
.box a, .box a:hover{color: #fff}

.box .thumbnail{float: left;}
.box .info{float: left; width:235px}

.box a.archiv{position: absolute; top: 7px; right: 10px; text-transform: uppercase}

.gallery-wrapper h4{clear: both}
.gallery-wrapper .thumb{display: block; float: left; margin: 0 8px 8px 0;}
.gallery-wrapper .thumb img{border:1px solid #ff9d50; padding: 1px;}
.gallery-wrapper .block{clear: both; overflow: hidden; margin: 0}


/* close btn */
.container .close{position: absolute; right: 35px; top: 10px; width: 15px; height: 15px; text-align: center; line-height: 15px; border: 1px solid #ccc; background: #fff; -moz-border-radius: 3px; -webkit-border-radius:3px; color: #000;}


.gallery{}
.gallery-item{float: left; }
.gallery-item img{padding: 3px; border: 1px solid #333; background: #000}
.gallery-item img:hover{border-color: #ccc}

.col2-set{}
.col2-set .col-1{width: 48%; float: left}
.col2-set .col-2{width: 48%; float: right}
	
.col3-set .col-1 { float:left; width:32.3%; }
.col3-set .col-2 { float:left; width:32.3%; margin-left:1.55%; }
.col3-set .col-3 { float:right; width:32.3%; }

.col4-set .col-1 { float:left; width:23.5%; }
.col4-set .col-2 { float:left; width:23.5%; margin:0 2%; }
.col4-set .col-3 { float:left; width:23.5%; }
.col4-set .col-4 { float:right; width:23.5%; }