/*
Style definitions for MediaDidac.ch
developed by Stefan Isarie
http://www.isarie.com/

layout
*/
html, body{ margin:0; padding:0; font: 12px/18px Arial, Helvetica, sans-serif; background-color:#c7c4c0;}

#page-wrapper{ width:760px; margin: 0 auto; }

#header{ width:760px; margin-top: 10px; }
#header-left{ width:150px; float:left; }
#header-right{ width:594px; float:left; }

#navigator{ width:760px; height:48px; background: url("../images/top-page.gif") no-repeat top left; clear:both; }

#page-section{ width:760px; height:50px; background: url("../images/bg-pattern-blue.gif") repeat-x top left; }
#section{width: 380px;float:left; }
#search{width: 380px; float:left; }

#content-container{ width:760px; float:left; background: #F3F2F1 url("../images/bottom-page.gif") no-repeat center bottom; padding-bottom: 16px; }
#left-side{ width: 580px; float:left; background: #F3F2F1 url("../images/rc.gif") top right no-repeat;  }
#right-side{ width: 180px; float:left;background: #8AACDF url("../images/bottom-blue-right.gif") bottom center no-repeat; padding-bottom:10px; margin-bottom:16px; }

#footer{ text-align: right; margin-top: 8px; width:760px; float:left; color:#868077; }

/* page elements */
#header-left img{ margin-left:16px; margin-bottom:8px; }

#header-right ul{ margin:6px 0 0 0; padding:0; list-style:none; float:right; }
#header-right ul li{ float:left; margin: 0 10px; padding:0; }

#navigator ul{ margin:0; padding:0; list-style: none; }
#navigator ul li{ float:left; border-left:1px solid #666; border-right:1px solid #333; margin-top:3px; }
#navigator ul li.first{ border-left:none; }
#navigator ul li.last{ border-right:none; }
#navigator ul li a{ margin: 0 10px; color:#D8EDF3; text-decoration:none; }
#navigator ul li a:hover{ color:#BFFFBF; }

#section h1{ margin: 14px 0 0 8px; color: #fff; letter-spacing: 2px; font-size:20px;margin-bottom:5px;}

#search form{ float:right; margin: 14px 8px 0 0; }
#search form input.text{ width: 120px; }
#search form select{ margin: 0 4px; width: 120px; }

.containerInside{ padding: 0 10px 10px 10px; }

div#left-side .containerInside ul{ margin:0; padding:0;  }
div#left-side .containerInside ul li{ margin-left:40px; padding:0; }
div#left-side .containerInside a{ color:#56799E }

ul.categories{ margin:0; padding:0; list-style: none; }
ul.categories li{  }
ul.categories li.dsp{ margin:10px 0; border-top: 1px solid #A1C5FB; border-bottom:1px solid #7F9AC2; }
ul.categories li a{ color:#D8EDF3; font-weight: bold; text-decoration: none; }
ul.categories li a:hover{ color:#BFFFBF; }

#footer a{color:#868077; font-weight:bold; }
#footer a:hover{ color:brown; }

div.navPath{ font-size:10px; }

/* products */
img.categoryImage{ float:left; margin: 10px 10px 10px 0; }
h1.categoryName{ font-size: 24px; margin: 10px 0; }
h2.products{ clear:both; font-size:18px; color:darkred; }
table.products{ width:100%; }
table.products tr.par{ background:#ededed; }
table.products td.image{ width:130px; }

/* right side */
h2.featured{ color:beige; font-size:14px; font-style:italic; }

/* search results */
table.productSearch{ width:100%; margin-top:10px; }
table.productSearch td{ vertical-align:top; }
table.productSearch td.productPicture{ width:130px; }
table.productSearch td h3{ font-size:12px; font-weight: bold; font-family: Georgia, serif; margin-top:0px; }
div.price{ font-weight:bolder; font-style:italic; color:brown; }

/* pager */
table.pager{ background-color:#F3F2F1; }
table.pager td{ background-color:beige; border: 1px solid #ccc; padding:2px 4px; font-family:monospace; font-size:12px;}
table.pager td .currentPage{ font-weight:bolder; text-decoration:underline; }
table.pager td a{ text-decoration:none; color:chocolate; }

/* shopping cart */
table.cart{ width:100%; background-color:#ccc; }
table.cart th{ background-color: #999; color:#fff; }
table.cart td{ background-color: #F3F2F1; }

/* news */
dl.news{ margin:0; padding:0; margin-bottom: 26px; }
dl.news dd.date{ font-size:10px; color: #aaa; font-style:italic; }

/* contact */
dl.address{ margin:0; padding:0; margin-bottom:20px; width:50%; float:left; }
dl.address dt{ font-style:italic; font-size:14px; font-weight:bold; padding-left:24px; }
dl.address dt.sw{ background: url("../images/swiss_flag_s.gif") no-repeat left center; }
dl.address dt.de{ background: url("../images/german_flag_s.gif") no-repeat left center; }
dl.address dd{ font-style:italic; }

/* messages */
div.error{ color:crimson; font-weight:bold; }
div.success{ color:darkgreen; font-weight:bold; }

/* other elements */
.hide{ display: none; }
.show{ display: block; }
.show_{ display: inline; }
.underline{ text-decoration: underline; }
.r{ text-align: right; }
.l{ text-align: left; }
.c{ text-align: center; }
.b{ font-weight: bold; }
.s{ text-decoration: line-through; }
.u{ border-bottom: 1px dashed; }
.underline{ text-decoration: underline; }
.b{ font-weight: bolder; }
.i{ font-style:italic; }
.up{/* text-transform:uppercase; */}
img,form{ border: 0; margin: 0; padding: 0; }
.fr{ float: right !important; }
.fl{ float: left !important; }
br.clear{ clear: both; }
hr{ width:100%; height:2px; }
td{ vertical-align:top; }

/*************************************************
COULOIR
*************************************************/
/* Container that gets resized and holds the photo */
#container_ {margin: 0 auto;position: relative;
	width: 200px;	/* Initial width */
	height: 200px;	/* Initial height */
	background: #fff url(../images/loading_meter.gif) 50% 50% no-repeat;border: 5px solid #FF8E00;overflow: hidden;}

/* Inner container for photo */
#PhotoContainer { visibility: hidden; }

/* Temporary image for preloads */
#TempPhoto { visibility: hidden; display: inline; }

/* Counter for photos */
#Counter{color: #323232;}
#Caption{color: #323232;}
#LinkContainer {position: absolute;top: 0;left: 0;height: 200px;width: 200px;z-index: 100;background-color: transparent;display: none;}
#PrevLink {display: block;float: left;height: 200px;width: 100px;}
#NextLink {display: block;float: right;height: 200px;width: 100px;z-index: 100;}
#PrevLink:hover, #NextLink:hover{text-decoration: none;}
#PrevLink:hover{background: transparent url(../images/previous.png) 20% 50% no-repeat;}
#NextLink:hover{background: transparent url(../images/next.png) 80% 50% no-repeat;}
#PrevLink span, #NextLink span { display: none; }