html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}



/* Start Styling */

html {background: url('../img/page_bg.png') #fffcf5}
body {
	width: 978px;
	margin: 0 auto;
	font-family: "Segoe UI", "Calibri", Frutiger, Tahoma, "Helvetica", "Helvetica Neue", Arial, sans-serif;
	background: transparent;
}

h2 {color: #888; font-weight: bold; font-size: 1.3em}
a:link, a:active, a:visited {color: #888}
a:hover {color: #008AB8}

#body-content {
	background: #fff;
	margin-top: 20px;
	border: solid 2px #ccc;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
}

#footer {
	background: #fff;
	margin: 10px 0px;
	border: solid 2px #ccc;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
}

p {padding: 10px; font-size: 0.8em; text-align: left}
#panel-controller {text-align: center}
#slider-container {width: 974px; padding-top: 10px}
.slider-panel {
	height: 400px;
	text-align: center;
}
#welcome-panel {text-align: left; padding: 0px 20px}
#welcome-intro {width: 50%; float: left}
#welcome-features {width: 45%; float: right}
#welcome-panel img {display: block; margin: 0 auto;}
#welcome-panel ul {padding-left: 30px;}
#welcome-panel li {color: #888; padding-left: 35px; line-height: 35px; background: url('../img/li-tick.png') 0px 50% no-repeat; font-weight: bold}
#welcome-panel h2, #welcome-panel h3 {padding-top: 20px; color: #f7b100; font-weight: bold; font-size: 1.2em; margin-bottom: 12px; padding-bottom: 4px; border-bottom: dotted 1px #f7b100 }
.service-link {display: inline-block; width: 150px; padding: 10px 0px; padding-left: 50px; margin-left: 10px; margin-right: 20px; font-weight: bold}
a.codes {background: url('../img/link-codes.png') 10px 50% no-repeat;}
a.keys {background: url('../img/link-keys.png') 10px 50% no-repeat;}

.clio-panel {background: url('../img/clio-slider.jpg') 0px 10% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.megane-panel {background: url('../img/megane-slider.jpg') 0px 10% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.scenic-panel {background: url('../img/scenic-slider.jpg') 0px 10% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.modus-panel {background: url('../img/modus-slider.jpg') 0px 80% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.twingo-panel {background: url('../img/twingo-slider.jpg') 0px 10% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.kangoo-panel {background: url('../img/kangoo-slider.jpg') 0px 35% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.laguna-panel {background: url('../img/laguna-slider.jpg') 0px 50% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.master-panel {background: url('../img/master-slider.jpg') no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.trafic-panel {background: url('../img/trafic-slider.jpg') no-repeat; min-height: 340px; height: auto !important; height: 340px;}
.espace-panel {background: url('../img/espace-slider.jpg') 0px 30% no-repeat; min-height: 340px; height: auto !important; height: 340px;}
#clio-panel-text {background: url('../img/clio-slider-text.png') bottom right no-repeat #f7f7f7}
#megane-panel-text {background: url('../img/megane-slider-text.png') bottom right no-repeat #f7f7f7}
#scenic-panel-text {background: url('../img/scenic-slider-text.png') bottom right no-repeat #f7f7f7}
#modus-panel-text {background: url('../img/modus-slider-text.png') bottom right no-repeat #f7f7f7}
#twingo-panel-text {background: url('../img/twingo-slider-text.png') bottom right no-repeat #f7f7f7}
#kangoo-panel-text {background: url('../img/kangoo-slider-text.png') bottom right no-repeat #f7f7f7}
#laguna-panel-text {background: url('../img/laguna-slider-text.png') bottom right no-repeat #f7f7f7}
#master-panel-text {background: url('../img/master-slider-text.png') bottom right no-repeat #f7f7f7}
#trafic-panel-text {background: url('../img/trafic-slider-text.png') bottom right no-repeat #f7f7f7}
#espace-panel-text {background: url('../img/espace-slider-text.png') bottom right no-repeat #f7f7f7}
.panel-text {
	height: 56px;
	width: 974px;
	position: absolute;
	bottom: -16px;
	right: 0;
	opacity: 0;
	border-top: solid 2px #f7b100
}

.slider-panel h2 {padding-top: 10px; }


#serial-form {
	width: 974px;
	text-align: center;
	margin-top: 20px;
	padding: 20px 0;
	display: none;
}

#serial-form p{
	text-align: center;
	padding: 10px;
}
.serial {
	font-size: 1.8em;
	padding:6px;
	border: solid 1px #f7b100;
	width: 24px;
	font-weight: bold;
	-moz-border-radius: 4px;
}

.serial:focus {
	padding:4px;
	border: solid 3px #008ab8;
}

.long {text-align: center; width: 500px}
fieldset {padding-top: 10px}
#serial-form img {background: #fff; padding: 4px; border: solid 2px #f7b100;}

input[type=submit] {
	cursor: pointer;
	color: #fff;
	background: #f7b100;
	font-size: 1.8em;
	padding: 6px;
	border: solid 4px #fff;
	width: 300px;
	font-weight: bold;
	-moz-border-radius: 4px;
}

input.contact {
	cursor: pointer;
	color: #fff;
	background: #f7b100;
	font-size: 1.4em;
	padding: 6px;
	border: solid 4px #fff;
	width: 230px;
	font-weight: bold;
	-moz-border-radius: 4px;
}

input[type=submit]:hover {background: #008ab8}

.process {display: none; margin-top: 20px; text-align: center}
.process p {text-align: center}

.serial-step {background: #f7f7f7; padding: 20px; width: 655px; margin: 0 auto; margin-bottom: 40px; border: solid 2px #f7b100; -moz-border-radius: 5px}
.no1 {background: url('../img/step1.png') 40px 50% no-repeat;}
.no2 {background: url('../img/step2.png') 40px 50% no-repeat;}
.no3 {background: url('../img/step3.png') 40px 50% no-repeat;}
.no4 {background: url('../img/step4.png') 40px 50% no-repeat;}

#panel-controller a {text-decoration: none}
#panel-controller li {font-weight: bold; float: left; display: inline-block; width: 10%; border-bottom: solid 2px #ccc}
#panel-controller li.last {}
#panel-controller li.active {background: url('../img/slider-menu-bg.png') no-repeat #f7b100; color: #888}
#panel-controller a:hover {background: url('../img/slider-menu-bg.png') no-repeat #f7b100; color: #fff}
#panel-controller a, a:active, a:visited {color: #888}
#panel-controller a {display: block; width: 100%; padding: 14px 0;}
#panel-controller li.active a {color: #f7b100; color: #fff}
#panel-controller li.active a:hover {color: #888}



.panel-info {width: 460px; float: right}
.clear {clear: both; height: 0px}

#header {padding: 20px 0px; border-bottom: solid 2px #ccc; background: url('../img/logo.png') 100px 50% no-repeat; height: 78px;}
#header h1 {display: none; float: left; width: 0px}
a.serial-link {margin-top: 8px; padding-left: 34px; font-weight: bold; font-size: 1.3em; text-decoration: none; color: #f7b100; background: url('../img/link-codes.png') 0px 50% no-repeat;}
a.serial-link:hover {color: #008ab8}

.text-panel {margin: 10px; padding: 2px; background: #fff; border: solid 2px #f7b100; -moz-border-radius: 5px}
.text-panel-content {padding: 4px; background: #f9f9f9; -moz-border-radius: 5px}

#menu {float: right; margin-right: 10px;}
#menu ul {padding-top: 30px;}
#menu li a {display: block; width: 100%; text-decoration: none; padding: 10px 0px; font-size: 0.9em; font-weight: bold; text-align: center;border: solid 2px #fff; }
#menu li {display: inline-block; float: left; width: 116px; margin-left: 8px}
#menu a.active {background: #f9f9f9; border: solid 2px #f7b100; -moz-border-radius: 10px}
#menu a:hover {background: #f9f9f9; border: solid 2px #f7b100; -moz-border-radius: 10px}

#social-links {height: 22px; font-size: 0.65em; padding: 10px; border-bottom: dotted 1px #ccc}
#social-links li {float: left; height: 24px; display: inline-block; width: 8.9%; text-align: center;}
#social-links a {padding: 10px 0px 10px 22px; line-height: 22px;}
.social-delicious {background: url('../img/social/delicious.png') 0px 50% no-repeat;}
.social-digg {background: url('../img/social/digg.png') 0px 50% no-repeat;}
.social-stumbleupon {background: url('../img/social/stumbleupon.gif') 0px 50% no-repeat;}
.social-propeller {background: url('../img/social/propeller.png') 0px 50% no-repeat;}
.social-reddit {background: url('../img/social/reddit.gif') 0px 50% no-repeat;}
.social-newsvine {background: url('../img/social/newsvine.gif') 0px 50% no-repeat;}
.social-furl {background: url('../img/social/furl.png') 0px 50% no-repeat;}
.social-facebook {background: url('../img/social/facebook.png') 0px 50% no-repeat;}
.social-google {background: url('../img/social/google.gif') 0px 50% no-repeat;}
.social-yahoo {background: url('../img/social/yahoo.png') 0px 50% no-repeat;}
.social-technorati {background: url('../img/social/technorati.gif') 0px 50% no-repeat;}

#footer-form {padding-top: 0px; float: left;}
#footer-form input[type=text], textarea {width: 220px}
#footer-form textarea {height: 120px}
#footer-form p {color: #f7b100; font-size: 1.0em; font-weight: bold; background: none; padding-bottom: 6px}
#footer-form form {font-size: 0.7em; background: #f9f9f9; padding: 16px; margin-left: 10px; margin-bottom: 10px; border-top: dotted 1px #f7b100; border-bottom: dotted 1px #f7b100}
#footer-form td {vertical-align:middle; padding: 4px}
#form-content {display: none; margin-left: 10px;}

#footer-menu {float: right; padding: 10px;}
#footer-menu ul {float: left; width: 180px; border-left: dotted 1px #ccc; padding: 0px 10px}
#footer-menu li {border-bottom: dotted 1px #f7b100; background: url('../img/bullet_yellow.png') 0px 50% no-repeat; padding-left: 16px;}
#footer-menu a {padding: 6px 0px; display: block; font-size: 12px; text-decoration: none}
#footer-menu li:hover {background: url('../img/bullet_star.png') 0px 50% no-repeat #f6f6f6;}
#footer-menu li.title {color: #f7b100; font-weight: bold; padding-left: 0px; background: none; padding-bottom: 6px}

.copyright {margin: 4px 10px; clear: both; border-top: dotted 1px #ccc}
.copyright p {color: #888; text-align: center; padding: 8px}

a:hover {color: #008AB8}
img.stop-sign {position: absolute; top: 6px; margin-left: -24px;}

.car-list {margin: 10px 0px; padding: 4px;}
.car-list table {width: 100%}
.car-list td {vertical-align: middle; text-align: center}
.generic-content {padding: 20px}
.generic-content h5 {padding: 10px 0px; font-weight: bold}

.code-wait-box {
	width: 40%;
	float: left;
	padding: 20px;
}

#serial-box {background: #f7f7f7; margin: 20px; border: solid 2px #f7b100; -moz-border-radius: 5px}
#serial-box, #serial-box p {text-align: center}

.generic-content h2 {text-align: center; border-bottom: dotted 1px #ccc; padding-bottom: 10px;}
img.product {
	margin: 10px;
	padding: 4px;
	border: solid 2px #f7b100; -moz-border-radius: 5px
}
#products {float: right; width: 460px}
#products input {border: #ccc; font-size: 0.8em; width: 140px; margin: 0px; padding: 4px}
#products p {padding: 8px}
.price {font-weight: bold}

.fleft {float: left}
.fright {float: right}