/*
|-====================-|
| CSS - Riotcoding.de  |
|-===== by FrosT =====-|
*/

/* CSS Reset */
fieldset,legend{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;background:#111;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
/* CSS Reset End */

/* DRAGOR - Design */
.currDragElem {
transition:none !important;
box-shadow:0 0 25px #000 !important;
}

/* FONTS */
@font-face {
font-family:Roboto;
src:url(../fonts/Roboto-Regular.ttf) format("truetype");
}
@font-face {
font-family:CS_Font;
src:url(../fonts/cs_regular.ttf) format("truetype");
}
@font-face {
font-family:NASA_Font;
src:url(../fonts/titillium.otf);
}
@font-face {
font-family:TITAN_Font;
src:url(../fonts/titanfall.ttf);
}

/* ## WEBSITE ## */
body {
text-align: center;
color: #ccc;
font-family: Roboto;
cursor: default;/* Default cursor for entire website (except links and other exceptions) */
background:#000 url("../img/interface/backgrounds/Skyrim - Mountains.jpg") no-repeat center center fixed;/* std background */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: background 1s;
}
a {
color:#ccc;
text-decoration:none;
}
ul, li {
list-style:none;
}
.developer {
color:#777;
font-variant:small-caps;
}

/* =========================================================== */

/* === BigFatInfoBanner === */
#main_banner {
	display: none; /* <-- Hide/Show banner */
	/*content: "--- Under Construction - 07 March 2016 ---";*/
	position: absolute; left: 0; right: 0; top: 40px;
	width: 75%;
	height: auto;
	color: #ccc;
	font-size: 2em;
	font-family: sans-serif;
	letter-spacing: 2px;
	padding: 15px;
	margin: 0 auto;
	border: 3px solid rgb(238, 77, 46);
	border-radius: 10px;
	box-shadow: 0 2px 10px #000;
	background-color: rgba(238, 77, 46, 0.5);
	pointer-events: none;/* disable 'hitbox' */
	z-index: 999;
}

/* === Main Site Design === */
#riotcoding_website_v1 {
min-width:1000px;
max-width:1900px;
width:90%; /* wannabe responsive ^^ */
min-height:1125px;
height:100%;
position:relative;
margin:35px auto;
margin-bottom: 50px;/* add more space to the bottom of the page */
background-color:rgba(00,00,00,0.8);
/* box-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000; */
box-shadow:inset 0 0 5px #000, 0 0 100px 5px rgba(0,0,0,0.5);
}

/* Top Banner (Users Online, Online as) */
#header_ribbon {
min-width:1025px;
width:104%;
height:25px;
position:absolute; top:10px; left:-2%; right:-2%;
margin:0 auto;
clear:both;
border-top:1px solid #111;
padding-top:5px;
color:#666;
box-shadow:0 2px 10px #000;
background-color:rgba(00,00,00,0.75);
background:linear-gradient(to left, rgb(15,15,15) 0%, rgb(25,25,25) 50%, rgb(15,15,15) 100%);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#header-l {
border-color:transparent transparent transparent #111;
border-style:solid;
border-width:14px;
height:0;
width:0;
transform:rotate(-45deg);
position:absolute; left:-14px; top:25px;
/* z-index:1; */
}
#header-r {
border-color:transparent #111 transparent transparent;
border-style:solid;
border-width:14px;
height:0;
width:0;
transform:rotate(45deg);
position:absolute; right:-14px; top:25px;
/* z-index:1; */
}
#header_ribbon_login {
position:absolute; left:30px; top:6px;
}
#header_ribbon_login span {
cursor:pointer;
}
#header_ribbon_login a {
color:#666;
}
#header_ribbon_login a:hover:after, #header_ribbon_login span:hover:after {
width:100%;
opacity:1;
border-bottom:1px solid #666;
}
#header_ribbon_login a:after, #header_ribbon_login span:after { /*inspired by starwars.com*/
content:"";
display:block;
width:40%;
margin:0 auto;
opacity:0.9;
border-bottom:1px solid rgba(0,0,0,0);
transition:border-color 0.2s, width 0.25s;
}
#header_ribbon_right {
position:relative; right:30px;
float:right;
z-index:5;
}
#header_ribbon_right td {
padding-left:10px;
/* min-width:150px; */
}

/* --- Stuff --- */
/* DebuggingInfo style of currvisitors */
#debug_currvisamo {
background-color:#000 !important;
color:green !important;
}

/* === HEADER === */
#header {
/*min-width:900px;
width:96%;*/
min-width:750px;
width:90%;
height:130px;
position:relative; top:50px;
background-color:rgba(0,0,0,0.25);
margin:0 auto;
border-radius:4px;
/*box-shadow:0 2px 2px #111, 0 -1px 1px #111;*/
}
/* Riotcoding Banner */
#header_img_banner {
background:url(../img/interface/NewBanner1.png) no-repeat center center;
width:100%;
height:100%;
position:relative;
/*box-shadow:inset 0 0 1px 1px red;*//*DEV*/
}
/* Cut (disabled) in header */
#header_img_banner::after {
	display: none;
	content: "";
	width: 1px;
	height: 90%;
	background-color: #666;
	position: absolute; right: -50px; top: 5%;
}

/* === MENU Container (menu style in menu.css) === */
#navi {
width:750px;/* master width */
height:45px;
position:relative; top:80px;
background-color:rgba(00,00,00,0.25);
/*box-shadow:0 0 5px #000;*/
border-radius:3px;
margin:0 auto;
z-index:9999;
}

/* === CONTENT === */
#content {
min-width:750px;
width:90%;
height:775px;
position:relative; top:115px;
margin:0 auto;
background-color:rgba(00,00,00,0.25);
border-radius:3px;
/*box-shadow:0 0 5px #000;*/
}

/* === FOOTER === */
#footer {
min-width:1025px;
width:104%;
height:25px;
position:absolute; bottom:15px; left:-2%; right:-2%;
margin:0 auto;
clear:both;
border-top:1px solid #111;
padding-top:5px;
color:#666;
text-shadow:0 1px 1px #000;
box-shadow:0 2px 10px #000;
background:linear-gradient(to left, rgb(15,15,15) 0%, rgb(25,25,25) 50%, rgb(15,15,15) 100%);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
#footer > img {
text-align:left;
position:absolute; left:5px; top:2px;
animation:gear_rotate;
-webkit-animation:gear_rotate 10s infinite linear;
-moz-animation:gear_rotate 10s infinite linear;
-ms-animation:gear_rotate 10s infinite linear;
}
#footer > .ftleft {/* footer title left => creator info and license */
text-align:left;
position:absolute; left:1%;
}
#footer > .ftright {/* footer title right => render time */
text-align:right;
position:relative; right:1%; top:1px;
float:right;
}
#footer-l {
border-color:transparent transparent transparent #111;
border-style:solid;
border-width:14px;
height:0;
width:0;
transform:rotate(45deg);
position:absolute; left:-14px; bottom:25px;
z-index:1;
}
#footer-r {
border-color:transparent #111 transparent transparent;
border-style:solid;
border-width:14px;
height:0;
width:0;
transform:rotate(-45deg);
position:absolute; right:-14px; bottom:25px;
z-index:1;
}


/* === New Cookie Notification === */
#cookie_consent {
	width: 100%;
	height: 50px;
	font-size: 1em;
	text-align: center;
	margin: 0;
	padding: 0;
	position: fixed; bottom: 0; left: 0; right: 0;
	background-color: #222;
	box-shadow: 0 0 10px #000;
	overflow: hidden;
	z-index: 1000;
	animation: cookieSlideUp 0.5s;
	animation-delay: 0.1s;
}
#cc_info {
	line-height: 50px;
}
#cc_accept {
	color: #000;
	max-width: 150px;
	width: 33%;
	cursor: pointer;
	padding: 10px 10px;
	margin: 7px 10px;
	position: absolute; top: 0; right: 0;
	border-radius: 5px;
	background-color: #f1d600;
	transition: background 0.3s;
}
#cc_accept:hover {
	background-color: #eee;
}

@keyframes
cookieSlideUp {
	0%   { height: 0px; }
	15%  { height: 0px; }
	50%  { height: 50px; }
	60%  { height: 65px; }
	85%  { height: 50px; }
	100% { height: 50px; }
}

/* === TopScroller === */
#top_scroller {
width:40px;
height:40px;
color:#ccc;
font-size:35px;
font-family:sans-serif;
cursor:pointer;
display:none;/*disabled 10.01.2016 ----------*/
position:fixed; left:15px; bottom:25px;
border-radius:50px;
box-shadow:0 0 3px #111;
background-color:#111;
-webkit-backface-visibility:hidden;
transition:0.5s;
}
#top_scroller:hover {
background-color:#222;
color:#fff;
box-shadow:0 0 100px #111;
}

/* ############################################################################ */
/* === QUICK ACCESS === */
#qa_top_bar {
min-width:1020px;
width:100%;
height:30px;
position:fixed; top:0; left:0;
z-index:99999;
background-color:rgba(0,0,0,0.8);
box-shadow:0 2px 10px #000;
}
#qa_top_bar_content {
text-align:center;
position:relative;
height: 100%;
/* background-color:green; */
}

/* === USER CONTROL PANEL === */
#ucp_launcher {
/* background-color:darkred; */
display:block;
height:25px;
width:180px;
position:absolute;
z-index:1;
cursor:pointer;
}
#ucp_info {/* Title (on the right side) */
position:absolute; top:0px; left:65px;
line-height: 30px;
color:#777;
cursor:pointer;
/* background-color:red; */
}

/* === DATE === */
#currentDate {
position:absolute; top:0px; right:10px;
line-height: 30px;
color:#aaa;
display:none; /* prevent multi-layering if JS is disabled -> If enabled, JS sets this to inline */
}

/* === RIOTSEARCH === */
#qa_riotsearch_container {
width:250px;
height:22px;
position:relative; top:3px;
margin:0 auto;
}
#qa_riotsearch {
position:relative;
width:250px;
height:18px;
color:#bbb;
outline:none;
border:1px solid #151515;
padding: 2px;
padding-left:5px;
padding-right:5px;
background-color:rgba(0,0,0,0.25);
background-image:url(../img/icons/search-icon.png);
background-position:right;
background-repeat:no-repeat;
transition:0.3s;
}
#qa_riotsearch:focus {
border:1px solid #459cce;
}

/* === JAVASCRIPT INFO TEXT === */
#js_info {
position:absolute; top:3px; right:5px;
color:#aaa;
background-color:rgba(100,0,0,0.25);
padding:2px;
}
#js_info a {
text-decoration:underline;
color:#bbb;
}
/* === QUICK ACCESS END === */
/* ############################################################################ */

/* === RIOTCODING GEAR (User Settings) === */
#rc_gear {
width:22px;
height:22px;
position:absolute; left:5px; top:3px;
z-index:5;
}
#rc_gear_img {
transition:0.5s;
cursor:pointer;
}
#rc_gear_img:hover {
transform:rotate(-125deg);
}

#rc_gear_pointer {
width:0px;
height:0px;
position:relative; left:4px; top:3px;
background-color:#111;
transform:rotate(45deg);
-webkit-transform-origin:7px 7px;
-moz-transform-origin:7px 7px;
-ms-transform-origin:7px 7px;
transition:0.4s;
}
#rc_gear_dd_container { /* DropDown_Container */
width:25px; /*300*/
height:0px; /*350*/
position:absolute; left:0px; top:33px;
background-color:#111;
overflow:hidden;
transition:0.4s;
border-radius:5px;
box-shadow:1px 2px 4px #000, 2px 3px 5px #111, inset 0 0 3px rgb(200,0,0);
background-image:url(../img/interface/ucp_v1.png);
}
#rc_gear_dd_container_content {
opacity:0;
transition:0.5s;
width:98%;
height:98%;
margin:2px auto;
/* background-color:green; */
}
#rc_gear_head {
width:100%;
height:12%;
/* background-color:rgba(0,0,100,0.15); */
margin:0 auto;
}
#rc_gear_head span {
position:relative; top:5px;
font-family:CS_Font;
font-size:23px;
white-space:nowrap;
overflow:hidden;
}
#rc_gear_head small {
color:#bbb;
white-space:nowrap;
overflow:hidden;
}
#rc_gear_body {
width:98%;
height:82%;
/* background-color:rgba(100,0,0,0.15); */
margin:5px auto;
text-align:center;
}

#ucp_background {
border:1px solid rgb(150,0,0);
width:94%;
margin:0 auto;
padding-top:5px;
padding-bottom:10px;
}
#ucp_background legend {
text-align:left;
}
#ucp_background select {
margin:0 auto;
background-color:rgba(200,200,200,0.5);
border:1px solid #999;
width:75%;
color:#000;
}

/* #global_login_welcome */
#header_ribbon_loginfo {
/* height:0px; *//*75*/
padding-left:0px;/*15*/
padding-right:0px;/*15*/
line-height:0px;/*40*/
font-size:22px;
position:absolute; top:41px; right:0;
background-color:#111;
border:none;/*1px solid #000*/
border-top:none;
border-right:none;
color:#666;
text-shadow:1px 0 1px #000, 2px 1px 1px #000, 3px 2px 2px #111;
overflow:hidden;
z-index:100;
text-align:center;
transition:line-height 0.3s;
}
#header_ribbon_loginfo::before {
content:"";
position:absolute; top:0; left:0;
width:100%;
height:1px;
/* background-color:#000; */
box-shadow:0px 0px 10px 1px #000;
}
#header_ribbon_loginfo span {
position:relative; /* top:10px; */
}
.login_true {
color:#799905;
}
.login_false {
/* top:20px !important; */
color:red;
}

#ucp_login {
border:1px solid rgb(150,0,0);
width:94%;
margin:10px auto;
padding-top:5px;
padding-bottom:10px;
position:relative;
}
#ucp_login legend {
text-align:left;
}
#ucp_login form {
position:relative;
}
#login_username, #login_password {
display:block;
background-color:#111;
border:1px solid #000;
outline:none;
color:#fff;
width:65%;
height:20px;
position:relative; left:5px;
transition:0.5s;
}
#login_username:focus, #login_password:focus {
box-shadow:0 0 4px #777;
z-index:1;
}
#login_submit {
background-color:#171717;
border:1px solid #000;
outline:none;
color:#fff;
/* width:150px;
height:20px; */
width:25%;
height:30px;
/* margin:0 auto; */
position:absolute; top:11px; right:10px;
display:inline;
cursor:pointer;
transition:0.3s;
}
#login_submit:hover {
background-color:#222;
}
#ACCregister {
color:#aaa;
text-decoration:line-through;
display:block;
margin-top:10px;
white-space:nowrap;
overflow:hidden;
line-height:20px;
}
#ACCregister:hover {
color:#ccc;
}

#ucp_user_avatar {
width:55px;
height:55px;
position:absolute; left:5px; top:-5px;
border-radius:360px;
border:3px solid #aaa;
overflow:hidden;
}

#ucp_logout_submit {
background-color:#171717;
border:1px solid #000;
color:#fff;
width:150px;
padding:5px;
margin:0 auto;
cursor:pointer;
transition:0.3s;
}
#ucp_logout_submit:hover {
background-color:#222;
}
#user_settings {
width:70%;
padding:7px;
position:relative; top:0px;
display:block;
background-color:#111;
border:1px solid #000;
cursor:pointer;
margin:0 auto;
transition:background-color 0.3s;
overflow:hidden;
}
#user_settings:hover {
background-color:#222;
}
#user_settings::before {
content:"";
width:10px;
height:80px;
position:absolute; top:-5px; right:120%;
background-color:#fff;
box-shadow:0 0 5px #fff;
transform:skew(-30deg);
-webkit-filter:blur(20px);
opacity:0.25;
transition:0.0s;
}

#user_settings:hover::before {
right:-50px;
transition:0.4s;
}

#webm_test_btn {
width:70%;
padding:5px;
position:relative; top:5px;
display:block;
background-color:#111;
border:1px solid #000;
cursor:pointer;
margin:0 auto;
color:#999;
transition:0.3s;
}
#webm_test_btn:hover {
background-color:#222;
}

#ucp_exit button {
background-color:#111;
border:1px solid #555;
margin:0 auto;
text-align:center;
color:#fff;
width:50%;
height:30px;
position:absolute; bottom:15px; right:25%;
display:inline-block;
transition:0.2s;
}
#ucp_exit button:hover {
background-color:#222;
}

/* User Settings | User Config */
#userConfig {
height:400px;
width:475px;
/* position:absolute; left:0; right:0; top:150px; */
position:fixed; left:0; right:0; top:0; bottom:0;
/* margin:0 auto; */
margin:auto;
display:inline-block;
background-image:url(../img/interface/gearing.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#222;
background-color:rgba(34, 34, 34, 0.75);
z-index:999999;
opacity:0;
box-shadow:0 0 5px #111, 0 0 10px #111, 0 0 25px #000;
transition:0.5s;
}
#userConfigFrameExit{
font-weight:bold;
font-size:20px;
font-family:sans-serif;
width:18px;
height:19px;
position:absolute; right:10px; top:7px;
color:#666;
background-color:#333;
border:1px solid #2a2a2a;
cursor:pointer;
z-index:2;
}
#userConfig:after {
content:"UCP | User Config";
font-size:20px;
position:absolute; top:6px; right:0; left:0;
margin:0 auto;
text-align:center;
color:#aaa;
z-index:1;
}
#userConfigObj {
height:350px;
width:450px;
position:relative; top:35px;
margin:0 auto;
display:inline-block;
background-image:url(../img/interface/gearing.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#111;
box-shadow:inset 0 0 3px #000;
}

/* NewArticleForm */
#newArticle {
height:450px;
width:600px;
position:absolute; left:0; right:0; top:150px;
margin:0 auto;
display:inline-block;
background-color:#222;
background-color:rgba(34, 34, 34, 0.75);
z-index:999999;
opacity:0;
box-shadow:0 0 5px #111, 0 0 10px #111, 0 0 25px #000;
transition:0.5s;
}
#newArticleFrameExit{
font-weight:bold;
font-size:20px;
font-family:sans-serif;
width:18px;
height:19px;
position:absolute; right:10px; top:7px;
color:#666;
background-color:#333;
border:1px solid #2a2a2a;
cursor:pointer;
z-index:2;
}
#newArticle:after {
content:"NewArticle | PostingForm";
font-size:20px;
position:absolute; top:6px; right:0; left:0;
margin:0 auto;
text-align:center;
color:#aaa;
z-index:1;
}
#newArticleObj {
height:400px;
width:570px;
position:relative; top:35px;
margin:0 auto;
display:inline-block;
background-color:#111;
box-shadow:inset 0 0 3px #000;
}

/* Register Form (can be loaded on any page) */
#registerFormObj {
width:525px;
height:400px;
z-index:99999;
margin:0 auto;
position:absolute; left:0; right:0; top:85px;
display:inline-block;
background-color:rgba(50,50,50,0.7);
box-shadow:0 0 10px #111, 0 0 15px #000;
}

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

/*-=============== Design Classes ================-*/
/* Inspired by starwars.com */
/* Underline-Hover */
.sw_design {
/* color:#666; */
}
.sw_design:after {
content:"";
display:block;
width:40%;
margin:0 auto;
opacity:0.9;
border-bottom:1px solid rgba(0,0,0,0);
transition:border-color 0.2s, width 0.25s;
}
.sw_design:hover:after {
width:100%;
opacity:1;
border-bottom:1px solid #666;
}

/*-===============================================-*/

/* Inspired by "JoshMac" on codepen:
http://codepen.io/JoshMac/pen/MaYEmJ */
/* Arrow Icon */
.arrow {
position:absolute; left:38px; top:8px;
width:8px;
height:8px;
border-top:2px #666 solid;
border-left:2px #666 solid;
border-right:5px transparent solid;
border-bottom:5px transparent solid;
transform:rotate(-45deg);
}
.arrow:after {
position:absolute; left:0; top:0;
margin:7px 0px 0px 7px;
content:"";
width:5px;
height:5px;
border-top:2px #888 solid;
border-left:2px #888 solid;
border-right:5px transparent solid;
border-bottom:5px transparent solid;
opacity:0;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-name:arrow;
}

@keyframes
	arrow {
		0% { opacity:1; margin:6px 0px 0px 6px; }
		100% { opacity:0; margin:3px 0px 0px 3px; }
	}


/*-===============================================-*/

/* Riotcoding Loading - v1.0 - Sept/15 - "GEARING" */
/* DISABLED -> Created an animation in Blender => .gif */
#gearing {
display:none; /*##*/
position:relative; top:25px;
margin:0 auto;
background-color:#111;
display:block;
height:100px;
width:100px;
}
#leftgear {
display:none; /*##*/
position:relative; top:0; left:0;
animation:gearing 4s infinite linear;
width:40px;
height:40px;
}
#basegear {
display:none; /*##*/
position:relative; top:37px; left:-20px;
animation:gearing 5s infinite linear reverse;
width:50px;
height:50px;
}

/* @keyframes
gearing {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(-360deg);}
} */

/*-===============================================-*/


/* Check "script.js" for win_create() [ 04.03.2016 ] TODO */

.win_create_window {
	position: absolute; left: 0; right: 0; top: 20%; /*bottom: 0;*/
	margin: auto;
	display: inline-block;
	background: #222 url("../img/interface/gearing.gif") no-repeat center center ;
	background-color: rgba(34, 34, 34, 0.75);
	/*background-color: red;*/
	box-shadow: 0 0 5px #111, 0 0 10px #111, 0 0 25px #000;
	z-index: 999999;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.5s, transform 0.2s;
}
.win_create_title {
	width: 100%;
	height: auto;
	line-height: 50px;
	margin: 0 auto;
	display: block;
	cursor: move;
	letter-spacing: 1px;
	position: relative;
	top: 0px;
	font-size: larger;
	left: 0;
	right: 0;
	border-bottom: 1px solid #000;
	background: linear-gradient(to bottom, rgb(39, 39, 39) 0%, rgb(25,25,25) 50%, rgb(15,15,15) 100%);
}
.win_create_exit {
	color: #666;
    font-weight: bold;
    line-height: 25px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 10px;
    top: 12px;
    border: 1px solid #000000;
    background-color: #222;
    z-index: 2;
}
.win_create_toggle {
	width: auto;
	height: 25px;
	line-height: 25px;
	color: #666;
	cursor: pointer;
	padding: 5px;
	position: absolute; left: 10px; top: 7px;
	border: 1px solid #000000;
	background-color: #141414;
	z-index: 2;
}

.win_create_window object {
	height: calc(100% - 50px);
	width: 100%;
	position: relative; top: 0; bottom: 0; left: 0; right: 0;
	margin: 0 auto;
	display: block;
	background-color: #111;
	background-color: rgba(34, 34, 34, 0.75);
	background: radial-gradient(circle at top, rgba(82, 82, 82, 0.11) 0%, rgb(0, 0, 0) 100%);
	box-shadow: inset 0 0 3px #000;
}

/*######################################*/
/* Stuff */

/* Ultimate Separator */
.ulti_separator {
width:98%;
height:1px;
background:linear-gradient(to right, rgba(255,50,50,0.1) 0%, rgb(150,0,0) 50%, rgba(255,50,50,0.1) 100%);
border:none;
position:relative;
}

/* RiotGear_Animation */
/* Webkit */
@-webkit-keyframes
gear_rotate {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
/* Mozilla */
@-moz-keyframes
gear_rotate {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
/* IE */
@-ms-keyframes
gear_rotate {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}

/* === Teamspeak 3 Slider === */
#ts3_slider_container {
width:350px;
height:500px;
position:fixed; top:26px; right:-313px;
transition:0.75s;
overflow:hidden;
z-index:9999;
}
#ts3_slider_container:hover {
right:-5px;
}
#ts3_slider {
width:350px;
height:500px;
background-image:url(../img/interface/Ts3_Slider_v1.png);
position:relative;
}
#ts3_slider_navi {
text-align:center;
width:300px;
position:relative; left:45px; top:10px;
}
.ts3_selectInfo {
position:relative; top:2px;
color:rgb(100,100,100);
}
.ts3_select {
font-variant:small-caps;
font-size:25px;
font-family:CS_Font;
letter-spacing:1px;
transition:0.1s;
}
.ts3_select:hover {
background:linear-gradient(to right, rgba(255,50,50,0.1) 0%, rgba(200,0,0,0.35) 50%, rgba(255,50,50,0.1) 100%);
padding-top:5px;
padding-bottom:5px;
cursor:pointer;
}
.ts3_separator {
color:darkred;
padding-left:7px;
padding-right:7px;
font-size:30px;
}
.ts3_line {
width:100%;
height:1px;
background:linear-gradient(to right, rgba(255,50,50,0.2) 0%, rgba(200,0,0,0.8) 50%, rgba(255,50,50,0.2) 100%);
border:none;
position:relative;
}
#ts3_launchbox {
width:35px;
height:222px;
position:absolute; left:2px; top:142px;
/* background-color:rgba(100,0,0,0.25); */
}
#ts3_frame {
width:300px;
height:390px;
position:relative; top:0; left:0;
overflow:hidden;
box-shadow:inset 0 0 10px #000;
/* background-color:rgba(50,0,0,0.1); */
}
.ts3_data {
width:300px;
height:390px;
background-color:rgba(35,0,0,0.1);
}

#ts3sliderHack {
position:relative; top:2px;
color:rgb(100,100,100);
width:175px;
color:rgb(100,100,100);
background-color:#000;
border:none;
outline:none;
}

/* Selection Modifier */
::selection {
color:#fff;
background-color:rgb(200,111,111);
}
::-moz-selection {
color:#fff;
background-color:rgb(200,111,111);
}
/* Scrollbar - inspired by Steam <3 */
::-webkit-scrollbar,
::-webkit-scrollbar-corner { /* Track + Corner of SB */
width:17px;
background-color:#171717;
}

::-webkit-scrollbar-thumb { /* Slider style */
background-color:#222;
background-image:url(../img/interface/scrollbar/track.png);
background-position:center;
background-repeat:no-repeat;
border:1px solid #171717;
}

::-webkit-scrollbar-button:vertical:decrement { /* Button TOP */
height:23px;
background-position:center 8px;
background-image:url(../img/interface/scrollbar/up.png);
background-repeat:no-repeat;
background-color:#222;
border:1px solid #171717;
border-bottom:none;
}
::-webkit-scrollbar-button:vertical:increment { /* Button BOTTOM */
height:23px;
background-position:center 8px;
background-image:url(../img/interface/scrollbar/down.png);
background-repeat:no-repeat;
background-color:#222;
border:1px solid #171717;
border-top:none;
}

::-webkit-scrollbar-button:vertical:decrement:hover,
::-webkit-scrollbar-button:vertical:increment:hover,
::-webkit-scrollbar-thumb:hover { /* Hover styles */
background-color:#333;
}
/* Scrollbar - inspired by Steam <3 */