/*__ _   _ _____   _____ ___ _  _ 
/ __| | | | _ ) \ / / __|_ _| \| |
\__ \ |_| | _ \\ V /| _| | || .` |
|___/\___/|___/ \_/ |___|___|_|\_|
___               _                      
 | _.| _ ._ _|_  /  _.| _   | _._|_ _ ._ 
 |(_||(/_| | |_  \_(_||(_|_||(_| |_(_)|
 
/////////////////////////////////////////////////////////
//
// Subvein Talent Calculator
//
// All rights remain with the autor
// ©2011 chross	(subvein@chross.de)
//
// This script is free for use for the Subvein Community,
// however, please refrain from modifying or redistributing
*/

/*
// MAIN ELEMENTS
////////////////////////////////////////////////////////////////*/
/*html {overflow-y: scroll;}*/ /* always show scrollbar */

body {
	/*background-image: url(back_bottom.gif);
	background-color: black;
*/	color: white;
	font-family: Calibri, sans-serif;
	font-size: 11pt;
	/*margin: 0;
	padding: 0;
*/}
	
img {border: 0px solid black;}
/*div{text-align: left;}*/ /*IE*/

#blackout{
	z-index: 1000;
	text-align: center;
	background-color: #000;
	opacity:.50;
	filter:alpha(opacity=50);
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: none;
}


/*
// PLOTGRAPH
////////////////////////////////////////////////////////////////*/
#infocontainer h3{
	text-align: center;
	font-size: 1.2em;
	font-weight: normal;
	color: #666666;
	opacity:.90;
	filter:alpha(opacity=90);
}
#weaponplot{
	height:400px;
	width:850px;
	margin: auto;
	padding: 10px 0px 2px 0px;
}
#weapontable{
	width: 550px;
	margin: auto;
}
#weapontable th, #skilltable th{
	border-bottom: 1px solid white;
}
#skillplot{
	height:400px;
	width:850px;
	margin: auto;
	padding: 10px 0px 2px 0px;
}
#skillratioplot{
	height:800px;
	width:850px;
	margin: auto;
	padding: 10px 125px 2px 0px;
}
#skilltable{
	width: 950px;
	margin: auto;
}
#lobbytable td{
	width: 550px;
	margin: auto;
	border-bottom: 1px solid white;
}
#lobbytable th{
	border-bottom: 2px solid white;
}

#plotgraph{
/*
	height:400px;
	width:600px;
*/
	height:90%;
	width:90%;
	min-height:400px;
	min-width:600px;
	margin: auto;
	padding: 10px 0px 5px 0px;
}

#plotcontainer{
	border: 2px solid #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.90;
	filter:alpha(opacity=90);
	/*height:450px;
	width:650px;
	*/
	min-height:450px;
	min-width:650px;
	height:90%;
	width:90%;
	background-color:#333;
    position: relative;
    margin-left: -310px;
    margin-top: -250px;
} 

#plotpos{
	z-index: 2000;
	top: 50%;
    left: 50%;
	position: fixed;
	display: none;
}

#gameinfo, #playerinfo, #weaponinfo, #skillinfo{
display: none;
}
		
		
/*
// SKILL SPECIFIC STYLES
////////////////////////////////////////////////////////////////*/
.skillmax {color: #FF6666;font-weight: bold;}
.skilltitle {font-weight: bold;font-size: 12pt;}
.skilllevel {font-weight: bold;font-size: 10pt;}

/*
// HEADER (logo, buttons, stats)
////////////////////////////////////////////////////////////////*/
#header{
	position: relative;
	width: 100%;
/*	height: 100px;
*/	background-image:  url(back_top.gif);
}

#logo{
	position: relative;
	width: 1000px;
	height: 150px;
	margin: auto;
	background-image:  url(logo_top.png);

}

#infobar{
	position: relative;
	width: 100%;
	height: 30px;
	margin: auto;
	background-color: red;
}

#buttonbar, #statsbar{
	float: left;
	height: 28px;
	width: 480px;
	margin: 0 auto 0 auto;
	top: 4px;
	position: relative;
}

#statsbar{
	padding-left: 70px;
	width: 410px;
}

#statsbar div{
	background-color: #555;
	border: 2px solid #EEEEEE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.60;
	filter:alpha(opacity=60);
	text-align: center;
	font-weight: bold;
	font-size: 8pt;
	float:left;
	position:relative;
	width: 22px;
	height: 18px;
	padding-top: 4px;
	margin: 0px 5px 0px 5px;
}

#buttonbar div{
	background-color: #555;
	border: 2px solid #EEEEEE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.60;
	filter:alpha(opacity=60);
	position: relative;
	float: left;
	text-align: center;
	font-weight: bold;
	margin: 0px 10px 0px 10px;
	width: 110px;
	height: 22px;
}

#buttonbar div.focus, #statsbar div.focus{
	background-image: url(button.png);
	background-color: #333;
	border-color: #F66;
    box-shadow: 0 0 5px 1px #E66;
    -webkit-box-shadow: 0 0 5px 1px #E66; 
    -moz-box-shadow: 0 0 5px 1px #E66; 
}

#buttonbar div.btn_style, #buttonbar div.focus.btn_style{
	background-image: url(menuTextures_small.png);
	width: 32px;
	background-repeat: no-repeat;
	background-position: -352px -709px;
}

#statsbar div.btn_info{
	background-image: url(menuTextures_small.png);
	width: 32px;
	background-repeat: no-repeat;
	background-position: -352px -677px;
	margin: 0 0 0 10px;
}

/*
// SKILLS
////////////////////////////////////////////////////////////////*/
#wrapper{
	width: 1000px;
	margin: 0 auto 0 auto;
	background-image: url(back_bottom.gif);
	background-repeat: repeat;
	}
	/*
#wrapper{
	position: relative;
	width: 1000px;
	margin: 0 auto 0 auto;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background-image: url(back_bottom.gif);
	background-repeat: repeat;
}
*/
#infocontainer{
	z-index:10;
	display: none;
	position: relative;
	padding: 50px 0 0 25px;
	margin: 0 auto 0 auto;
	width: 975px;
	min-height: 500px;
	/*background-image: url(logo_bottom.png);
	background-repeat:no-repeat;
*/}

#skillcontainer{
	position: relative;
	padding: 50px 0 25px 0;
	margin: 0 auto 0 auto;
	width: 950px;
	height: 500px;
/*	background-image: url(logo_bottom.png);
	background-repeat:no-repeat;
*/}

#ads{
	text-align: center;
	position: relative;
	/*padding: 0;*/
	padding: 50px 0 0 0;
	width: 975px;
	height: 90px;
}

#physical, #mental, #cybernetic {position:relative;}

.skill{
	position: absolute;
	background-color: #444444;
	border: 2px solid #EEEEEE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.60;
	filter:alpha(opacity=60);
	height: 36px;
	font-size: 10pt;
}

.icon {
	background-image: url(menuTextures_small.png);
	margin: 2px 2px 0px 2px;
	float: left;
	width: 32px;
	height: 32px;
}

.counter {
	float:left;
	width: 18px;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

/* the following two are children of counter */
.maxcount, .syncount {
	float: left;
/*	width: 18px;*/
	text-align: center;
	background-color: #777;
}
.max{color: #33CCFF;}
.syn{
	color: #FFAA33;
	box-shadow: 0 0 5px 1px #FA3;
    -webkit-box-shadow: 0 0 5px 1px #FA3; 
    -moz-box-shadow: 0 0 5px 1px #FA3; 
}
.maxcount {color: #33CCFF;height: 17px;border-bottom: 1px solid #FFF;}
.syncount {color: #FFCC33;height: 18px;}

.name {
	float:left;
	margin: 0px 0px 0px 6px;
	height: 30px;
	font-size:11pt;
	font-weight: bold;
	width: 100px;
}

.skill.focus{
	border-color: #588;
    box-shadow: 0 0 5px 1px #69E;
    -webkit-box-shadow: 0 0 5px 1px #69E; 
    -moz-box-shadow: 0 0 5px 1px #69E; 
}

/* active skill */
.skill.active {background-color: #252;border: 2px solid #484;}
.skill.active .maxcount, .skill.active .syncount{background-color: #474;}
.skill.active .maxcount{border-bottom: 1px solid #9C9;}
.skill.active .counter{border-left: 1px solid #9C9;}

/* inactive skill */
.skill.inactive {background-color: #522;	border: 2px solid #844;}
.skill.inactive .maxcount, .skill.inactive .syncount{background-color: #744;}
.skill.inactive .maxcount{border-bottom: 1px solid #C99;}
.skill.inactive .counter{border-left: 1px solid #C99;}

/* skill with slider */
.skill-slider .maxcount, .skill-slider .syncount, .skill-slider .counter{	background-color: #447 !important;}
.skill-slider .counter{border-left: 1px solid #99C !important;}

.name-slide {
	display: block;
	float:left;
	height: 30px;
	margin: 6px 0px 0px 10px;
	width: 120px;
}

.line {z-index:0;position: absolute;width: 2px;}
.active.line{
	opacity:.60;
	filter:alpha(opacity=60);
	background-color: #484;
	border: 0px solid black;
}
.inactive.line{
	opacity:.60;
	filter:alpha(opacity=60);
	background-color: #844;
	border: 0px solid black;
}

/* positioning matrix for skills */
.synergize{top: -45px; left: 885px;}
.synergize div.name{display:none;}
.skill.synergize{ width: 56px;}

.r1{top: 0px;}
.r2{top: 100px;}
.r3{top: 200px;}
.r4{top: 300px;}
.r5{top: 400px;}

.c1{left: 0px;}

.h1{height: 60px;}
.h2{height: 160px;}
.h3{height: 260px;}
.h4{height: 360px;}

.line.r1{top: 40px;}
.line.r2{top: 140px;}
.line.r3{top: 240px;}
.line.r4{top: 340px;}
.line.r5{top: 440px;}


#slider-points-max{margin-bottom: 15px;background: #33CCFF !important;}
#slider-points-syn{margin-bottom: 15px;background: #FFAA33 !important;}
#slider-points-max, #slider-points-syn{
	float: left;
	clear: both;
	position: relative;
	background-color: #33CCFF;
	opacity:.75;
	filter:alpha(opacity=75);
	width: 115px;
}

.skill-slider{
	z-index: 10000;
	position: absolute;
	background-color: #444444;
	border: 2px solid #EEEEEE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.80;
	filter:alpha(opacity=80);
	width: 192px !important;
	height: 36px;
	font-size: 10pt;
	background-color: #225 !important;
	border: 2px solid #448 !important;
}

/* the following are modified from the jqueryui*/
 .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width:0.6em;
	height: 0.8em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}
.ui-slider-horizontal {height: .2em;}
.ui-slider-horizontal .ui-slider-handle {top: -.4em;margin-left: -.4em;}
.ui-slider-horizontal .ui-slider-range {top: 0; height: 100%;}
.ui-slider-horizontal .ui-slider-range-min {left: 0;}
.ui-slider-horizontal .ui-slider-range-max {right: 0;}

/*
// PANELS (skilllog, options)
////////////////////////////////////////////////////////////////*/
#logcontainer{top:190px;width: 90%;height: 500px;}
#skilllog {padding: 10px 0 0 15px; margin:auto;}
#skilllogtitle{
	font-size: 18px;
	color: #CCC;
	text-align: center;
	border-bottom: 2px solid white;
	width: 100%;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
}

#logcontainer, #panel {
	z-index: 20;
	position: absolute;
	left: 0;
	display: none;
	background-color: #161616;
	overflow: auto;
	min-height: 40px;
	border:2px solid #222;
	border-left: 0px solid black;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-bottom-right-radius: 20px;
	padding: 10px 10px 30px 90px;
	filter: alpha(opacity=90);
	opacity: .90;
}

/*log element in skillog*/
.log{
	background-color: #222;
	border: 1px solid #888;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.90;
	filter:alpha(opacity=90);
	padding: 5px;
	margin: 2px;
	float: left;
	width: 260px;
	height: 100px;
}

#panel {top: 100px;width: 350px;height: auto;}
#panel hr{
	color: #FFF;
	background-color: #FFF;
	border: 0px solid #FFF;
	height: 1px;
	margin-top: 20px;
}
#panel h3{padding: 15px 0 0 0;margin: 0;}
#panel p{margin: 0 0 15px 0;padding: 0;color: #cccccc;}
#panel a, #panel a:visited{color: #39F;font-style: italic;}
#panel a:hover, #panel a:visited:hover{color: #ffffff;font-style: italic;}

.downloadicon{
	background-image: url(STC_textures.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: -64px -64px;
	float: left;
}

.printicon{
	background-image: url(STC_textures.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: -32px -64px;
	float: left;
}

.panelicon{
	background-image: url(STC_textures.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.logicon{
	background-image: url(STC_textures.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: 0px -64px;
}

/* handles */
a.panelhandle{top: 100px;}
a.loghandle{top: 190px;}

a.handle{
	z-index: 30;
	position: absolute;
	display: block;
	left: 0;
	padding: 10px 10px 10px 10px;
	background-color: #333;
	border: 2px solid #444;
	border-left: 0 solid black;

	-moz-border-radius-topright: 10px; /*CORRECT NOTATION!*/
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 0px;

	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 0px;

	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 0px;
}

a.handle:hover{background-color: #555;padding: 10px 10px 10px 15px;}

a.active.handle {
	background:#222222;
	border: 2px solid #39F;
	border-left: 0 solid black;
}

/* specific rules for options panel */
#attention{
	width: 300px;
	margin: 5px auto 5px auto;
	position: relative;
	float: left;
	text-align: left;
	padding: 5px;
	display: none;
	font-size: 10pt;
	background-color: #990000;
	border: 2px solid #660000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.80;
	filter:alpha(opacity=80);
}

#attention a{color: #66FF66;text-decoration: none;}

#attentionicon{
	position:relative;
	display: block;
	padding:3px;
	float:left;
	width: 32px;
	height: 32px;
	background-image: url(STC_textures.png);
	background-repeat: no-repeat;
	background-position: -96px -28px;
	clear: both;
	margin: 2px 2px 32px 2px;
}
	
#infotab{
	width: 300px;
	margin: auto;
	position:relative;
	float:left;
	text-align: left;
	font-size: 8pt;
}

#tabmenu{clear: both;margin: 0;padding: 0;}
#tabmenu a, #panel a{margin: 0;padding: 0;text-decoration: none;}
#tabmenu a, #tabmenu a:visited{color: #39F;border-bottom: 2px solid #39F;}
#tabmenu a:hover, #tabmenu a:visited:hover{color: #FFF;border-bottom: 2px solid #FFF;}
#tabs ul {padding: 0;margin: 0;}

#tabs ul li{
	float: left;
	padding: 0;
	display: block;
	list-style-type: none;
	}
	
#tabs ul li a{clear: both;}
#tabs div.tab-inactive{display: none;}
#tabs div.tab-active {display: block;}

#tabmenu li{
	float: left;
	padding: 0 10px 20px 0;
	display: block;
	list-style-type: none;
}

#tabmenu li div{
	background-image: url(STC_textures.png);
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	clear: right;
	margin: auto;
}

#tabmenu li div.tabs-1{background-position: -32px 0px;}
#tabmenu li div.tabs-2{background-position: -64px 0px;}	/*second row*/
#tabmenu li div.tabs-3{background-position: -32px -32px;}
#tabmenu li div.tabs-4{background-position: 0px -32px;}
#tabmenu li div.tabs-5{background-position: -64px -32px;}	/*second row*/
#tabmenu li div.tabs-6{background-position: 0px -96px;}	/*second row*/

.columns{clear: both;width: 330px;}
.colleft{float: left;width: 90px;}
.colright{float: right;width: 200px;}
.columns ul li{line-height: 22px;list-style-type: none;}

#language{position: relative;clear:both;color: black;}

#language div{
	float: left;
	width: 32px;
	height: 32px;
	margin: 5px;
	padding: 0;
	/*border: 1px solid #999;
	-moz-box-shadow: 1px 1px 1px 0px #999;
	-webkit-box-shadow: 1px 1px 1px 0px #999;
	box-shadow: 1px 1px 1px 0px #999;
	width:21px;
	height: 15px;*/
}

#lang_eng{background-image: url(STC_flags.png); background-position: 0px 0px;}
#lang_ger{background-image: url(STC_flags.png); background-position: -32px 0px;}
#lang_rus{background-image: url(STC_flags.png); background-position: -64px 0px;}
#lang_hun{background-image: url(STC_flags.png); background-position: -96px 0px;}
#lang_fin{background-image: url(STC_flags.png); background-position: -128px 0px; display:none;}

#skilllabel_cont{
	position: relative;
	float: left;
	width: 280px;
}

#skilllabel{
	font-weight: bold;
	z-index: 2;
	padding: 1px;
	margin: 2px;
	color: #FFF;
	background-color: #333;
	border: 2px solid #AAA;
	border-radius: 5px;
	-moz-border-radius: 5px;
	width: 280px;
	height: 24px;
	position: absolute;
	float: left;
	opacity:.60;
	filter:alpha(opacity=60);
}

#skilllabel_label{
	z-index: 1;
	position: absolute;
	right: 0;
	color: #555;
	padding: 1px;
	margin: 2px 2px 2px 10px;
}
#skilllabel_note{
	color: #999;
	font-size: 8pt;
}
#shortkey{
	background-image: url(STC_textures.png);
	background-position: -96px -64px;
	width: 32px;
	height: 32px;
	float: right;
	margin-right: 5px;
}
#shortkey_short {
	padding: 1px;
	margin: 2px;
	color: white;
	background-color: #161616;
	border: 2px solid #161616;
	border-radius: 5px;
	-moz-border-radius: 5px;
	position: relative;
	float: left;
	width: 300px;
	height: 20px;
}

#changelog{
	display: none;
	width: 300px;
	font-size: 11px;
	font-family: 'Courier New', Courier, mono;
	height: 150px;
	padding: 1px;
	margin: 2px;
	color: #FFF;
	background-color: #333;
	border: 2px solid #AAA;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.80;
	filter:alpha(opacity=80);
}
/*
// TOOLTIP
////////////////////////////////////////////////////////////////*/

#skilltip{
	font-size: 10pt;
	position:absolute;
	background-color: #222;
	border: 2px solid #DDD;
	border-radius: 5px;
	-moz-border-radius: 5px;
	opacity:.75;
	filter:alpha(opacity=75);
	width: 300px;
	padding:5px;
	display:none;
	z-index:10000;
	text-align: left;
}

#skilltip h3{
	padding: 0;
	padding-bottom: 5px;
	margin: 0;
}


.pointstable td, .pointstable th{
	width: 40px;
	border-spacing: 0px;
	padding: 2px;
}
.pointstable, .pointstable tr{
	border-spacing: 0px;
}

.pointsrow {
	border-bottom: 1px solid white;
	background-color: #333;
}

.pointscol{
	border-right: 1px solid white;
}