/* ================================
	@project:	DIAMEX Custom Theme
	@author: 
  -Basic-Themestyles by JTL-Shop,
  -customized styling by Alexander Matschos - am-webdesign.net
	@date: 06/2013

	@colors:
	azurblau: #00ccff;
	azurblau dunkel: #00aad5;
	gruen: #006633
	gruen hell: #398645
	
	@changelog
	- Eigenes Template -> template.xml nach 'Möglichkeit 2' angepasst, siehe Doku: http://developer.jtl-software.de/projects/4/wiki/Individuelle_Theme_Anpassung#Wie-lege-ich-ein-eigenes-Theme-an 
	- header_custom.tpl	[ -> templates -> JTL-Shop3-Tiny -> tpl_inc -> header_custom.tpl ]
	-- Mobile Device Viewport Bug Fix: <meta name="viewport" content="width=1140" />
	-- Favicon: <link type="image/x-icon" href="{$currentTemplateDir}themes/diamex/images/favicon.ico" rel="shortcut icon"/>
	-- IE7 Conditional Comment: <!--[if IE 7]>	<link type="text/css" href="{$currentTemplateDir}themes/base/iehacks7.css" rel="stylesheet" /> <![endif]-->
	-- SEO H1 und SPAN: <h1> <a href="{$ShopURL}{if $SID}/index.php?{$SID}{/if}" title="{$Einstellungen.global.global_shopname}"> {image src=$ShopLogoURL alt=$Einstellungen.global.global_shopname} <span class="offset">DIAMEX OBD2 Electronics & Components</span> </a> </h1>

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


body {
	background: rgb(224,224,224); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(224,224,224,1) 0%, rgba(244,244,244,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(244,244,244,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(224,224,224,1) 0%,rgba(244,244,244,1) 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#f4f4f4',GradientType=0 );*/ /* IE6-8 */
	background-repeat:no-repeat;
	background-position:0 190px;
	background-color:#f4f4f4;
	width:100%;
}

h1, h2, h3, h4, h5, h6 {font:italic normal 2em "Trebuchet MS",sans-serif;}
h3, h4, h5, h6	{font-size:1.4em; font-weight:normal;}

a,a:visited,a:link {
	color: #3E47A2;
	text-decoration:none;
}

a:hover,a:visited:hover {
	color: #50619f;
	text-decoration:underline;
}

.custom_content h2 {
	margin-top: 1.5em;
}

.custom_content em {
	font-weight: normal; color: #000;
}

#page {
	background:url(images/schaltkreise-key-vis-02.png) repeat-x 0 0;
	border-top:6px solid #006633;
	width:100%;
}

.page_width {
	width:1080px;
}

#header_wrapper, #header {
	height: 190px;
}

#headlinks,#headlinks.active {
	border: none;
}

#search {
	background: none repeat scroll 0 0 transparent; padding: 0; position: relative;
	text-align: right; top: -100%;
	z-index:140;
}

#search-form {
	width:280px; padding-right: 10px; position: absolute; right: 0; top: 0; height: 40px;
	padding-top: 15px;
	/*background: url("images/bg_head_search.png") no-repeat scroll right bottom transparent;*/
}

#speciallinks {
	display: none;
}

#search input[type="text"] {
	width:170px;
}

.panel_left #sidepanel_left {
	width:250px;
	position:relative;
}

#header_wrapper input[type="submit"] {
	height:26px;
}

.panel_left #content {
	margin-left:250px;
	padding:0 25px;
}

#headlinks ul {
	margin-left:0;
}

.sidebox div.sidebox_content {
   padding:5px 0 7px;
	background:#f1f1f1;
	-webkit-border-radius:0 0 5px 0;
	-moz-border-radius:0 0 5px 0;
	border-radius:0 0 5px 0;
	position:relative;
	xz-index:11;
}
.sidebox div.sidebox_content:after {
	content:'';
	height:13px;
	width:245px;
	background:url(images/navi-kategorie-shadow-02.png) no-repeat left bottom;
	position:absolute;
	left:0;
	bottom:-13px;
	z-index:11;
}

.sidebox_content a img {
	border:2px solid #eee;
}

.sidebox_content #slider ul li {
    background: url("images/line-01.png") no-repeat scroll center top transparent;
}
.sidebox_content #slider ul li:nth-of-type(1) {
    background: none repeat scroll 0 0 transparent;
}
.sidebox .container {
    padding:1em 0.5em;
}

.sidebox h3 {
	background:#006633;
	border-bottom:none;
	padding:0 10px 0 15px;
	color:#fff;
	font-size:18px!important;
	line-height:43px;
	font-style:normal;
	-webkit-border-radius:0 5px 0 0;
	-moz-border-radius:0 5px 0 0;
	border-radius:0 5px 0 0;
}

#settings li span,#settings>ul>li>a {
	color: #fff;
}

#settings {
	top:0; right:290px; text-align:right; width:500px;
}

#settings>ul {
	float: right; height: 40px; padding-left: 15px; padding-top: 15px;
	background: url("images/bg_head_search.png") no-repeat scroll left bottom transparent;
}
#settings>ul,
#search-form {
	background: rgb(0,102,51); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,102,51,1) 15%, rgba(57,134,69,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,rgba(0,102,51,1)), color-stop(100%,rgba(57,134,69,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006633', endColorstr='#398645',GradientType=0 ); /* IE6-9 */
}
#settings>ul {
	-webkit-border-radius:0 0 0 10px;
	-moz-border-radius:0 0 0 10px;
	border-radius:0 0 0 10px;
}
#search-form  {
	-webkit-border-radius:0 0 10px 0;
	-moz-border-radius:0 0 10px 0;
	border-radius:0 0 10px 0;
}
#settings div.expander_box {
	text-align: left;
}

ul.categories li {
	background:url("images/line-01.png") no-repeat scroll center top transparent;
}
ul.categories li.first,
ul.categories li:nth-of-type(1) {
	background:none;
}

ul.categories li a {
	font-size:14px;
	line-height:26px;
	padding-left:15px;
	font-style:normal;
	color:#404040;
	position:relative;
	z-index:11;
}
ul.categories li a:hover {
  background-color:transparent;
	font-weight:bold;
	color:#404040;	
}
ul.categories li.active > a {
    background-color:transparent;
    font-weight:bold;
}

ul.categories span {
    background:none;
		padding-left:0;
}

#outer_wrapper {
	margin-top: 0;
}

#settings a.expander {
	font-size:12px;
  padding:4px 14px 2px 4px;
	margin:0 4px;
	border:none;
}
#settings a.expander.active, #settings a.expander:hover {border:none;}

#headlinks ul li>a,
#headlinks li.basket>a {
		color:#fff;
}

#headlinks ul li>a:hover,#headlinks li.basket>a:hover,#settings a.expander.active,#settings a.expander:hover
{
	background-color:transparent;
}

#settings a.expander.active,#settings a.expander:hover {
	color:#fff;
}


#logo {
  height:auto;
	position:absolute;
	left:0;
	top:0;
	z-index:120;
}

/*
#logo a {
	background:url(images/DIAMEX-Logo-02.png) no-repeat 0 0;
	display:block;
	width:479px;
	height:126px;
}
*/

#logo img {
	top:0px;
}

#footer_wrapper {
	background:#fff;
	border-bottom:10px solid #006633;
	border-top:5px solid #e2e0e0;
	margin:0 auto;
}

#footer {
 	margin:0 auto;
	background-color:#fff;
	width:1050px;
	/*
	border-radius:15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	-webkit-border-radius: 15px 15px 0 0; 
	-khtml-border-radius: 15px 15px 0 0;
	*/
  padding: 40px 15px 60px;
	margin: 15px auto 0 auto;
}

#footer .master {
	margin: 1em 0 0 0
}

#footer .footer_box fieldset.newsletter input[type="text"] {
	width: 220px;
}

#frontpage_banner {
	margin-top: -10px;
}

#simplemodal-container {
	border-color: #46638A;
}

#page_wrapper {
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	-khtml-border-radius: 0 0 10px 10px;
	-webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
  margin-bottom: 30px;
	background-color:#fff;
	padding-top: 25px;
}

.browser_type_msie #page_wrapper {
	border:1px solid #ccc;
}

#simplemodal-container {
	border: 0; background: url("images/popup_border.png"); padding: 8px;
}

.simplemodal-data {
	background-color: #fff; padding: 12px;
}

#settings .expander_box {
	border: 0; background: url("images/popup_border.png"); padding: 8px;
}

#settings .expander_inner {
	background-color: #fff; padding: 8px;
}

#fancybox-outer {
	border: 0; background: url("images/popup_border.png"); padding: 8px;
}

#fancybox-close {
	top: 8px; right: 8px;
}

#fancybox-left-ico {
	left: 8px;
}

#fancybox-right-ico {
	right: 8px; left: auto;
}

#headlinks li.basket.items>a {
	color: #4d3d0c !important; text-shadow: 0 1px 0 #FFEE66;
	background: url("../base/images/button_bg.png") repeat-x scroll left top #FFAA22 !important;
}

#headlinks li.basket div.articles {
	background: url("images/popup_border.png") repeat scroll 0 0 transparent
		!important; border: 0 none; padding: 8px;
}
#headlinks li.basket div {top:39px;}

.datepicker {
	border-color: #46638A;
}


#headlinks li.basket div.articles table {
	background-color: #fff; padding: 5px;
}

#configset ul.semtabs li.active a {
	background-color: #46638A; color: #fff;
}

.page_left {
    margin:0 auto  !important;
}

.sidebox {
    border:none;
		margin: 0 0 30px;
		position:relative;
}

.panel_left .sidebox h3 {
	/*background:url(images/sprite-01.png) repeat-x 0 -80px #00ccff;*/
	/* ========== gruen ==========*/
	background:url(images/sprite-02.png) repeat-x 0 -80px #006633;
	/* ========== /gruen ==========*/
}
.panel_left .sidebox h3:before {
	content:'';
	height:60px;
	width:27px;
	display:block;
	position:absolute;
	top:-1px;
	left:-27px;
	/*background:transparent url(images/sprite-01.png) no-repeat 0 0;*/
	/* ========== gruen ==========*/
	background:transparent url(images/sprite-02.png) no-repeat 0 0;
	/* ========== /gruen ==========*/
}
.panel_left .sidebox h3:after {
	content:'';
	height:23px;
	width:272px;
	display:block;
	position:absolute;
	bottom:-22px;
	left:-16px;
	background:transparent url(images/nav-kategory-shadow-01.png) no-repeat 0 0;
	z-index:10;
}

#headlinks_wrapper {
  margin:0;
	height:190px;
}
#headlinks li {
    padding: 0 12px 0 0;
}
#headlinks ul li > a {
    font-size: 1.2em;
    font-weight: normal;
    height: 37px;
    line-height: 37px;
}
#headlinks ul li > a,
#headlinks li.basket > a {
    /*box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.6);*/
		/* ============== gruen ============== */ 
		background:#006633;
		background: rgb(0,102,51); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(0,102,51,1) 15%, rgba(57,134,69,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,rgba(0,102,51,1)), color-stop(100%,rgba(57,134,69,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(0,102,51,1) 15%,rgba(57,134,69,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006633', endColorstr='#398645',GradientType=0 ); /* IE6-9 */
		/* ==============  /gruen  ============== */
    font-style: normal;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}
/* ============== gruen ============== */
#headlinks ul li > a:hover,
#headlinks li.basket > a:hover {
	background:#006633;
}
/* ============== /gruen ============== */
#headlinks ul li.current a {}

/* ========================================== content top ==========================================  */
#breadcrumb {
    border-bottom:none;
}

.category_wrapper {
    border:none;
    padding:0;
}
.category_wrapper ul.category_item li.desc {
    padding:0;
}

#improve_search {
	border-top:2px solid #d4d4d4;
	border-bottom:2px solid #d4d4d4;
	margin:10px 0 20px;
	padding:0 1px;
}
#content #improve_search .container {
    margin:8px 0;
}
#improve_search.form .outer fieldset {
		border:none;
    border-top:1px dotted #d4d4d4;
    margin:0;
    padding:8px 0;
}
#improve_search .container ul.hlist {
	margin-bottom:0;
	padding:0;
	border:none;
	background:transparent;
}

#content h1.underline, #content h2.underline {
    border-bottom:none;
}
.container ul.hlist,
.styled_view li .article_wrapper {
    background-color:#f8f8f8;
    border:1px solid #d8d8d8;
		border-radius:5px 5px 5px 5px;
    margin-bottom:15px;
    padding:10px;
}
.container ul.hlist {
	margin-bottom:25px;
	padding:10px 0;
}
.styled_view li .article_wrapper:hover {
    background-color:#f3f3f3;
		border:1px solid #d8d8d8;
}
.styled_view li ul.article_info > li {
    font-size:1em;
}

#content_footer {
    margin:15px 0;
		padding: 14px 0 8px;
}

#footer small,
#attribute_list ul.values,
#attribute_list strong.label,
.tabs.semtabs,
.custom_content.description span,
.article_buyfield span {
	font-size:1.167em;
	line-height:140%;
}
.submit, input.submit[type="submit"],
button.submit[type="submit"],
button.submit[type="button"]{
	font-size:15px;
	padding: 0.75em 1.75em !important;
}

.financing, 
.comment, 
.differential_price, 
#article .article_matrix,
.article_details,
#attribute_list {
    background-color:#f8f8f8;
    border-bottom:1px solid #d8d8d8;
    border-top:1px solid #d8d8d8;
		border-radius:10px;
}
#article fieldset.article_buyfield {
	background:none;
	padding:0;
	margin-bottom:0;
}
#article fieldset.article_buyfield .choose_quantity {
    background:none;
		padding:0;
    text-align:right;
}
.change_quantity a, .change_quantity a:link, .change_quantity a:active, .change_quantity a:visited {
    border:1px solid #ccc;
    line-height:1.4em;
}

.article_details,
#attribute_list {
    padding:17px 10px;
}

.form fieldset { background:#f9f9f9;}
.form fieldset.outer { background:transparent;}
.form fieldset legend {
    font-size:1.5em;
		font-weight:normal;
}
input[type="text"], input[type="password"], textarea, select {
    border:1px solid #ddd;
		border-top:1px solid #bbb;
		border-left:1px solid #bbb;
    -webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
}

/* ========================================== content tabs ========================================== */
#mytabset.container {
    margin:25px 0;
}
ul.semtabs {
    height:41px;
    position:relative;
    top:0px;
}
ul.semtabs li {
	background:#eee;
	border:1px solid #d4d4d4;
	border-bottom:1px solid #d4d4d4;
	border-radius:4px 4px 0 0;
	margin-right:8px!important;
}
ul.semtabs li.active {
	background:#f8f8f8;
	border-bottom:1px solid #f8f8f8;
}
ul.semtabs li a {
	font:normal 1.0em "Trebuchet MS",Verdana,Helvetica,sans-serif;
}
ul.semtabs li a,
ul.semtabs li.active a {
	background:none;
	padding:10px 25px;
	height:20px;
}
div.semtabs {
    background:#f8f8f8;
    border:1px solid #d4d4d4;
    border-radius:0 10px 10px 10px;
		padding:18px 25px;
}

.offset {
	text-indent:-9999px;
	position:absolute;
}

/* ========================================== gallery view ==========================================*/
.styled_view li.gallery h3 {
    font-size:1.167em;
		font-style:normal;
    min-height:60px;
}
/* ========================================== mosaic view ========================================== */
.styled_view li.mosaic .article_wrapper {
    margin:6px;
    padding:20px 0;
}

/* ========================================== content footer funktions ========================================== */
#content_footer a {
		border-left:1px solid #d4d4d4;
    font-size: 1.167em;
		padding-left:30px;
		margin-left:20px;
    background-position:10px center;
}
.footer_links a.back {
		border:none;
}
.footer_links a.back,
.footer_links a.top,
.footer_links a.print  {
    background-position:10px center;
}

hr {border:1px dotted #ccc; margin:20px 0;}
a.button_edit {font-weight: bold;}
table.tiny.positions thead th, table.tiny.positions thead td {padding:4px;}


@media screen and (min-width:1220px) {
	#search:before {
		content:'';
		display:block;
		width:110px;
		height:110px;
		background:url(images/Diamex-Quality-04.png) no-repeat 0 0;
		position:absolute;
		top:35px;
		right:-55px;
		z-index:150;
	}
}