/*
    ____  _              _______ __ 
   / __ \(_)___ ___     / ____(_) /_
  / /_/ / / __ `__ \   / /_  / / __/
 / _, _/ / / / / / /  / __/ / / /_  
/_/ |_/_/_/ /_/ /_/  /_/   /_/\__/  
                                    
 F E L G E N K O N F I G U R A T O R
 
 by Timo Sehrbruch
 
 #####################################
 
 LAYOUT CSS - DO NOT MODIFY
 
 #####################################
 
 FOR LICENSING PLEASE SEE
 
 www.timosehrbruch.de/rimfit
 
 #####################################

*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,select,textarea,input,
table,caption,tbody,tfoot,thead,tr,th,td {
	font-family: 'Advent Pro', sans-serif;
	font-size:100%;
	margin:0;
	padding:0;
}
img {border:0px;}
html {background:url(../img/ui_background_gradientshadow_top.png) top center no-repeat;}
body {
    overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99;
color:#474747;	/* makes sure it stays on top */
}

#preloader span {width:200px; position:absolute; bottom:20%; left:50%; margin:0 0 0 -100px; text-align:center;}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
.wrapper {
	width:100%;
	height:100%;
	position:relative;
}

.wrapper-inner {
	width:960px;
	margin:0 auto;
	position:relative;
}

.header {
	width:100%;
	height:248px;
	float:left;
}

.oldbrowser {display:none;}

.configwrap {
	float:left;
	width:100%;
	position:relative;
	overflow:hidden;
}

.promoimage {position:absolute; left:-2000px; top:0;}

.the-car {position:relative; float:left; width:100%;}

.the-car .configimage {position:relative; top:0; left:0; width:100%; z-index:1; float:left; overflow:hidden;}
.the-car .configimage img.carimage {width:100%; height:auto; float:left;}
.the-car .config-controls {position:absolute; height:40px; width:100%; bottom:0; left:0; z-index:2; float:left;}
.the-car .car-controls {position:absolute; height:40px; width:100%; bottom:0; left:0; z-index:3; float:left;}
input#imgInp {color:transparent; font-size:1px; transition:all 0.3s ease-in-out 0s; float:left; cursor:pointer; width:100%; height:499px; border:0px; background:url(../img/ui_background_upload.png) top left no-repeat; background-size:100% auto; text-align:center; text-indent:-9999em; overflow:hidden;}
.the-car .car-controls a {float:left; display:inline; line-height:100%; font-size:20px; padding:10px 10px 9px 40px; text-decoration:none;}
.the-car .car-controls a.link-help {background:url(../img/ui_icon_help.png) top left no-repeat;border-right:1px solid #666;}
.the-car .car-controls a.link-delete {background:url(../img/ui_icon_delete.png) top left no-repeat;border-right:1px solid #666; display:none;}
.the-car .car-controls a.link-save {background:url(../img/ui_icon_save.png) top left no-repeat; border-right:1px solid #666;  display:none;}
.the-car .car-controls .size {float:right; display:inline; line-height:100%; font-size:20px; padding:10px 10px 9px 40px; text-decoration:none; width:450px;}
.the-car .car-controls .size span {float:left; display:inline;}

.drag {
	position: absolute;
	height: 60px;
	width: 60px;
	cursor: move;
	top: 0;
	left:0;
    visibility:visible;
    z-index:5;
	display:none;
	border-radius:100%;
}


.configrims {
	width:960px;
	position:relative;
	overflow:hidden;
}

.headingcontainer {
	float:left;
	width:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:20px;
	position:relative;
}

a.logolink {float:left; display:inline; height:238px; padding:0; margin:0 0 0 50%;}
a.logolink img{float:left; display:inline; padding:5px; margin:0 0 0 -145px; height:100%; width:auto;}

h2 {font-weight:500; font-size:36px; float:left; width:100%; line-height:100%; }
h2 span {float:left; width:100%; font-size:22px; font-style:italic;}
span.selectwrapper {position:absolute; top:24px; left: 228px;}
select.rimselector {padding:3px 4px; width:200px; border-top:1px solid #ebebeb; border-left:0px; border-right:0px; border-bottom:0px; box-shadow:0 1px 1px #888888;}

ul.rims {
	width:100%;
	height:300px;
	float:left;
	transition: all 1s ease-in;  
	position:relative;
	left:0;
	list-style:none;
}

ul.rims li {
	float:left;
	width:172px;
	height:280px;
	margin:5px;
	list-style:none;
	padding:5px;
	position:relative;
	box-shadow: 0 1px 1px #b6b6b6;
	border-top:1px solid #b6b6b6;
	overflow:hidden;
}

ul.rims li:active,
ul.rims li:focus {
	margin:4px;
}

ul.rims li img {
	float:left;
	width:90%;
	padding:5%;
	height:auto;
	cursor:pointer;
}

ul.rims li img.twodimage {
	float:left;
	width:90%;
	padding:5%;
	height:auto;
	right:0;
	position:absolute;
	padding:0 200% 0 0;
}

ul.rims li span.title {font-size:20px; float:left; width:100%; font-weight:600;}
ul.rims li span.details {font-size:16px; float:left; width:100%; font-weight:300;}
ul.rims li a.buylink {position:absolute; width:100%; padding:10px 0; bottom:0; left:0; text-align:center; text-decoration:none;}

#slider {width:280px; float:right; margin-right:10px!important;}
.ui-slider {height:2px!important; margin:10px 0 0 0!important; border:0!important; border-radius:0px!important;}
.ui-slider-handle {cursor:pointer!important; height:30px!important; width:30px!important; padding:0!important; border:0!important; border-radius:0px!important; background:url(../img/ui_icon_slider.png) center center no-repeat transparent!important; margin:-8px 0 0 -15px!important;}

/* FOOTER - don't even think about removing! */

.footer {padding:40px 0 20px 0; float:left; width:100%;}
.footer span {color:#666; font-size:14px; }
.footer span a{text-decoration:none; color:#ff6e00; font-size:14px; }
.footer span a:hover{text-decoration:underline; color:#fff; font-size:14px; }

/* POPUPS */

.help-container {position:absolute; top:150px; width:960px; margin:0 auto; z-index:21337;}
.help-inner {border-top:1px solid #525252;margin:0 auto; width:580px; height:580px; box-shadow: 0 1px 1px #202020; padding:10px; position:relative;}

.help-inner h1 {color:#ff6e00;font-weight:500; font-size:24px; float:left; width:100%; line-height:100%; margin:0 0 20px 0;}
.help-inner h2 {font-weight:500; font-size:18px; float:left; width:100%; line-height:100%; margin:0 0 20px 0;}
.help-inner p {color:#ebebeb;}
.help-inner img.img-wrong {float:left; width:33.3%;}
.help-inner img.img-right {float:left; width:100%; margin:10px 0 0 0;}
.x-dat {position:absolute; top:0; right:0; width:40px; height:35px; background:url(../img/ui_icon_delete.png) top left no-repeat; cursor:pointer;}

.rimname {background:#fff; position:absolute; box-shadow: 0 2px 1px #202020; top:20px; left:0; float:left; padding:10px; opacity:1.0; width:300px; display:none;}
.rimname span.rimimage {width:60px; height:60px; float:left; margin:0 10px 0 0;}
.rimname span.rimimage img {float:left; width:60px;}
.rimname span.rimmanufac {color:#585858; font-size:24px; font-weight:bold; float:left;height:30px; width:225px;}
.rimname span.rimmodel {color:#585858;font-weight:bold; font-size:18px; float:left; height:30px;width:200px;}

.the-car canvas {width:960px; margin:0 auto; display:block; position:absolute; top:0; left:0; z-index:120;}
.the-car .downloadme {transition:all 0.3s ease-in-out 0s; opacity:0.3; width:960px; margin:auto; position:absolute; top:-1000px; left:0; z-index:121;text-align:center; height:10px;}
.the-car .downloadme:hover {opacity:1.0;}
.the-car .downloadme .downloadbutton {cursor:pointer; width:274px; margin:-10px auto 0 auto; position:relative; left:343px; top:-135px; height:270px; background:url(../img/ui_downloadbutton.png) top left no-repeat; text-indent:-9989em; float:left;}