/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */



.sIFR-hasFlash h2 {
	visibility: hidden;
	font-size: 18px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	font-size: 19px;
}

/******************************************************************** BEGIN CSS **************/


* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;	
	font-family: Arial, sans-serif;
	background: url(/img/site/bg.gif);
	color: #000000;
}

div#container {
	background: url(/img/site/bg_gradient.gif) repeat-x;
	padding-top: 10px;
}

div#site {
	width: 770px;
	background: #000;
	border: 1px solid #000;
	margin: auto;
	margin-bottom: 10px;
}

h1 span {
	display: none;
}

h1 {
	width: 770px;
	height: 82px;
	background: url(/img/site/header.gif) no-repeat;
}

h2 {
	font-family: "Arial Narrow", Arial Narrow, Arial, sans-serif;
}

h3 {
	font-size: 1.2em;
}

img {
	border: 0;
}

a#skip {
	position: absolute;
	left: -9999px;
}

/**************************************************************************** ZOEKDING + ZOEKEN *************************/

div#zoeken {
	position: absolute;
	margin-top: -43px;
	margin-left: 500px;
	width: 250px;
	height: 30px;
	text-align: right;
}


div#zoeken input#zoeken_submit {
	border: 0;
	width: 18px;
	height: 18px;
	background: url(/img/site/btn_zoeken.gif) no-repeat;
	margin-left: 5px;
}

span.zoeknummer {
	float: left; 
	width: 30px;
}





/**************************************************************************** MENU *************************/

#nav {
	height: 29px;
	background: url(/img/site/bg_menu.gif) repeat-x;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
}

#nav li { /* all list items */
	float: left;
	font-size:11px;
}

#nav li a span {
	display: none;
}

#nav li a.home { width: 57px; height: 29px; background: url(/img/site/btn_home.gif); }
#nav li a.home:hover { background-position: 57px 0; }
#nav li a.producten { width: 87px; height: 29px; background: url(/img/site/btn_producten.gif); }
#nav li a.producten:hover { background-position: 87px 0; }
#nav li a.winkel { width: 81px; height: 29px; background: url(/img/site/btn_winkel.gif); }
#nav li a.winkel:hover { background-position: 81px 0; }
#nav li a.muziekleraren { width: 109px; height: 29px; background: url(/img/site/btn_muziekleraren.gif); }
#nav li a.muziekleraren:hover { background-position: 109px 0; }
#nav li a.aanbiedingen { width: 101px; height: 29px; background: url(/img/site/btn_aanbiedingen.gif); }
#nav li a.aanbiedingen:hover { background-position: 101px 0; }
#nav li a.occasions { width: 84px; height: 29px; background: url(/img/site/btn_occasions.gif); }
#nav li a.occasions:hover { background-position: 84px 0; }
#nav li a.prikbord { width: 77px; height: 29px; background: url(/img/site/btn_prikbord.gif); }
#nav li a.prikbord:hover { background-position: 77px 0; }
#nav li a.concertagenda { width: 112px; height: 29px; background: url(/img/site/btn_concertagenda.gif); }
#nav li a.concertagenda:hover { background-position: 112px 0; }

#nav li ul { /* second-level lists */
	position: absolute;
	background: #231f20;
	width: 125px;
	padding-top: 5px;
	padding-bottom: 5px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul li {
	float: left;
	line-height: 17px;
}

#nav li ul li a {
	height: auto;
	text-decoration: none;
	color: #fff;
	padding-left: 17px;
	background: url(/img/site/dot_yellow.gif) no-repeat;
	background-color: #231f20;
	background-position: 7px 7px;
	width: 105px;
}

#nav li li a:hover {
	color: #ffe01a;
	background: url(/img/site/dot_yellow.gif) no-repeat;
	background-color: #231f20;
	background-position: 7px 7px;
}

#nav li li a.productgroep:hover {
	background: url(/img/site/dot_yellow_hover.gif) no-repeat;
	background-color: #231f20;
	background-position: 7px 6px;
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -22px 0 0 122px;
	background: #ffe01a;
}

#nav li ul ul li a {
	background: url(/img/site/dot_black.gif) no-repeat;
	background-color: #ffe01a;
	background-position: 7px 7px;
	color: #000;
}

#nav li ul ul li a:hover {
	background: url(/img/site/dot_black.gif) no-repeat;
	background-color: #ffe01a;
	background-position: 7px 7px;
	text-decoration: underline;
	color: #000;	
}

#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li.sfhover ul ul, 
#nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li.sfhover ul, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

/*******************************************************************************************************/


div#visual {
	width: 770px;
	height: 110px;
	background-repeat: no-repeat;
}

div#main {
	float: left;
	clear: both;
	width: 770px;
	background: url(/img/site/bg_main.gif) repeat-y;
}

div#content {
	float: left;
	width: 570px;
	min-height: 500px;
	_height: 500px;
}

div#pagina {
	padding: 20px;
}

div#pagina p {
	padding: 12px;
	font-size: 1.1em;
}

div#pagina a {
	text-decoration: none;
	font-weight: bold;
	color: #131000;
}

div#pagina a:hover { text-decoration: underline; }

div#sidebar {
	float: left;
	width: 199px;
	padding-left: 1px;
}

div#sidebar a {
	color: #000000;
}

div#footer {
	width: 770px;
	clear: both;
	background-color: #231f20;
	line-height: 29px;
	color: #fff;
}

div.clear {
	clear: both;	
}

div#footer h3 {
	border-bottom: 1px solid #FFE01A;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	margin-bottom: 10px;	
	font-family: "Arial Narrow", Arial Narrow, Arial, sans-serif;
}

div#footer div.about {
	width: 370px;
	float: left;	
	padding: 10px 20px;
	line-height: 14px;	
	padding-top: 10px;
}

div#footer div.products,
div#footer div.brands {
	padding-top: 10px;
	width: 160px;
	float: left;	
}

div#footer div.brands {
	margin-right: 20px;	
}

div#footer div.brands ul li {
	width: 60px;	
	line-height: 16px;
}

div#footer div.products ul li {
	width: 100px;	
	line-height: 16px;
}

div.footer-bottom {
	border-top: 1px solid #FFE01A;
	height: 30px;
	margin: 20px 20px 0px 20px;
}

div#footer div.footer-left,
div#footer div.footer-right {
	width: 50%;
	float: left;	
}

div#footer div.footer-left,
div#footer div.footer-right li.copyright {
	font-family: "Arial Narrow", Arial Narrow, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.1em;
}

div#footer div.footer-right li.copyright,
div#footer div.footer-left span.sol {
	color: #FFE01A;
}

div#footer div.footer-right li.copyright {
	background: none;
}

div#footer div.footer-right ul {
	float: right;
	margin-right: -5px;
}

div#footer div.footer-right ul li {
	padding: 0 5px;
}

ol#webtrail {
	display: block;
	height: 17px;
	padding-top: 3px;
	background: #231f20;
	color: #ffe01a;
	font-size: 1.1em;
}

ol#webtrail li a {
	color: #d7d7d7;
	text-decoration: none;
}
ol#webtrail li a:hover { text-decoration: underline; }


ol#webtrail li {
	list-style: none;
	float: left;
	padding-left: 15px;
	background: url(/img/site/webtrail.gif) no-repeat;
	background-position: 5px 5px;
}
ol#webtrail li.eerste { background: 0; }

h3.about,
h3.contact,
h3.nieuwsbrief {
	height: 20px;
	background: url(/img/site/header_nieuwsbrief.gif) no-repeat;
	margin-left: -1px;
}

h3.about {
	background: url(/img/site/header_about.gif) no-repeat;
}

h3.contact {
	background: url(/img/site/header_contact.gif) no-repeat;
}

h3.about span,
h3.contact span,
h3.nieuwsbrief span {
	display: none;
}

p.contact,
p.about {
	padding: 8px 10px 12px;	
}

h3.merken {
	height: 20px;
	background: url(/img/site/header_merken.gif) no-repeat;
	margin-left: -1px;
}

h3.merken span {
	display: none;
}

div#merken img {
	float: left;
}

fieldset#nieuwsbrief {
	border: 0;
	padding: 10px;
	
	font-size: 1.1em;
}

fieldset#nieuwsbrief legend {
	display: none;
}

fieldset#nieuwsbrief input {
	width: 160px;
	border-width: 1px;
	margin-top: 10px;
	margin-bottom: 5px;
}

fieldset#nieuwsbrief input#submit {
	width: 65px;
	font-size: 1.0em;
	margin-left: 33px;
	margin-bottom: 0;
	margin-top: 0;
}

fieldset#nieuwsbrief a {
	color: #262626;
}

div#footer ul {
	list-style: none;
}

div#footer li {
	float: left;
	background: url(/img/site/bg_footer_bullet.gif) no-repeat 0 6px;
	padding: 0 10px;
	font-size: 1.1em;
}

div#footer li.eerste {
	background: none;
}

div#footer a {
	text-decoration: none;
	color: #fff;
}

div#footer a:hover {
	color: #ffe01a;
}

div#footer div.footer-right li {
	background: url(/img/site/li_footer.gif) no-repeat 0 10px;
}


/****************************************************************** HOME ******************/

div.aanbieding {
	float: left;
	display: inline;
	width: 250px;
	height: 120px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-right: 15px;
}

div.aanbieding div.aanbieding_pic {
	float: left;
	display: inline;
	width: 98px;
	height: 98px;
	border: 1px solid #131000;
	background-repeat: no-repeat;
	background-position: center center;
	margin-top: 0px;
}

div#pagina div.aanbieding p {
	float: left;
	display: inline;
	width: 140px;
	padding: 0;
	padding-left: 10px;
}

div.aanbieding span.oudeprijs,
div.product span.oudeprijs {
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: line-through;
}

div.aanbieding span.nieuweprijs {
	font-weight: bold;
	font-size: 1.6em;
	color: #d43c00;
}

/****************************************************************** PRODUCTEN ******************/

div.paginaselect {
	text-align: center;
	margin: 5px 0;
	
}

div#content div.paginaselect a {
	font-weight: normal;
}

div#content div.paginaselect a.pagina {
	font-size: 1.1em;
	padding: 0 5px;
	color: #231f20;
	font-weight: normal;
}

div#content div.paginaselect a.active {
	font-weight: bold;
}

div#content div.paginaselect a.pagina:hover {
	border: 1px solid #231f20;
	padding: 0 4px;
	text-decoration: none;
}



div.product {
	border-top: 1px dashed #666666;
	padding: 8px 0 12px;
	height: 100px;
}

div.oneven {
	background: #dfdfdf;
}

div#content div.product p {
	padding: 0;
}

ul.home_products li {
	float: left;	
}

ul.home_products div.product {
	width: 250px;
	height: auto;	
}

div.product div.product_pic {
	float: left;
	display: inline;
	width: 98px;
	height: 98px;
	border: 1px solid #131000;
	background-repeat: no-repeat;
	background-position: center center;
	margin-right: 10px;	
	cursor: pointer;
}

div.product div.product_pic_large {
	width: 250px;
	height: 250px;	
}

ul.home_products {
	display: inline-block;
	list-style-type: none;	
}

ul.home_products div.product h3 {
	margin-bottom: 5px;
}

ul.home_products div.product div.product_pic_large {
	width: 200px;
	height: 200px;	
	margin-right: 50px;
	margin-bottom: 5px;
}

div.product div.product_pic_small {
	width: 75px;
	height: 75px;
	margin-top: 2em;
}

div.product div.product_pic_extraHeight {
	height: 350px;	
}

div.product div.last {
	margin-right: 0;	
}

div.vergroot {
	position: absolute;
	width: 18px;
	height: 18px;
	margin-top: 80px;
	margin-left: 80px;
}

div.product div.product_pic_small div.vergroot {
	margin-top: 53px;
	margin-left: 53px;
}

div.product div.product_pic_large div.vergroot {
	margin-top: 232px;
	margin-left: 232px;
}

ul.home_products div.product div.product_pic_large div.vergroot {
	margin-top: 182px;
	margin-left: 182px;		
}

div.product div.product_pic_extraHeight div.vergroot {
	margin-top: 332px;	
}

div#content div.product p a.vraag {
	font-weight: normal;
	text-decoration: underline;
	color: #e76d00;
}	

div.product span.nieuweprijs {
	font-weight: bold;
	font-size: 1.4em;
}

fieldset#producten {
	border: 0;
	margin-bottom: 10px;
}

fieldset#producten legend {
	display: none;
}

fieldset#producten input {
	font-size: 1.0em;
}

fieldset#producten select {
	font-size: 1.0em;
	width: 75px;
}

div.product-sitemap h3 {
	border-bottom: 1px dashed #666666;	
	padding: 5px;
}

div.product-sitemap ul {
	margin-left: 12px;
	margin-top: 10px;
	float: left;
	width: 238px;
	font-weight: bold;
	list-style-type: none;
}

div.product-sitemap ul li ul {
	margin-left: 0;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 20px;	
}

div#pagina div.product-sitemap ul li ul a {
	font-weight: normal;	
}

div#pagina div.product-sitemap ul li ul a:hover {
	color: orange;	
	font-weight: bold;
	text-decoration: none;	
}

/****************************************************************** MUZIEKLERAREN ******************/

table#muziekleraren {
	width: 520px;
	font-size: 1.1em;
}

table#muziekleraren th {
	font-weight: normal;
	border-bottom: 1px dashed #666666;
	text-align: left;
}

table#muziekleraren th.pic {
	width: 86px;
}

table#muziekleraren th.naam {
	width: 250px;
}

table#muziekleraren th.instrument {
	width: 84px;
}

table#muziekleraren th.plaats {
	width: 100px;
}

table#muziekleraren td {
	padding: 10px 0;
}

table#muziekleraren td.naam {
	padding-right: 75px;
}

table#muziekleraren td.pic {
	text-align: center;
}

table#muziekleraren td.plaats,
table#muziekleraren td.instrument {
	font-weight: bold;
}

/****************************************************************** PRIKBORD ******************/

table#prikbord {
	width: 100%;
	font-size: 1.1em;
	color: #404040;
	margin-top: 10px;
}

table#prikbord a {
	color: #404040;
	font-weight: normal;
}

table#prikbord th,
table#prikbord td {
	padding: 3px;
}

table#prikbord th {
	text-align: left;
	font-weight: bold;
	color: #404040;
}

table#prikbord tr.oneven td {
	background: #dfdfdf;
}

table#prikbord tr.even td {
	background: #ffffff;
}

table#prikbord tr.hover td {
	background: #ffe01a;
}

fieldset#prikbord_plaatsen {
	border: 0;
	font-size: 1.1em;
}

fieldset#prikbord_plaatsen label {
	width: 100px;
	padding-right: 5px;
	float: left;
	clear: left;
	margin-bottom: 5px;
	text-align: right;
}

fieldset#prikbord_plaatsen label.kort {
	width: 46px;
	clear: none;
}

fieldset#prikbord_plaatsen input {
	float: left;
	width: 375px;
	margin-bottom: 5px;
}

fieldset#prikbord_plaatsen input.kort {
	width: 160px;
	margin-bottom: 15px;
}

fieldset#prikbord_plaatsen input#plaatsen {
	width: 100px;
	float: right;
	margin-top: 10px;
	margin-right: 70px;
}

fieldset#prikbord_plaatsen textarea {
	float: left;
	width: 375px;
	height: 100px;
}

span.ad {
	color: #d43c00;
	font-weight: bold;
}

div#content p a.terug {
	font-weight: normal;
	text-decoration: underline;
	color: #d43c00;
}

label.error {
	color: red;
	font-weight: bold;
}

span.error {
	color: red;
}

/****************************************************************** CONCERTAGENDA ******************/

table#concertagenda {
	width: 100%;
	font-size: 1.1em;
}

table#concertagenda th {
	text-align: left;
	border-bottom: 1px dashed #666666;
	font-weight: normal;
	padding: 10px;
}

table#concertagenda td {
	padding: 10px;
	font-weight: bold;
}

table#concertagenda td.pic img {
	float: left;
	padding-right: 10px;
}

table#concertagenda td.pic {
	padding: 10px;
	font-weight: normal;
}

table#concertagenda td.pic a {
	color: #ea8400;
}

table#concertagenda tr.lijn td {
	border-bottom: 1px dashed #666666;
}

/****************************************************************** CONTACT ******************/

fieldset#contact {
	border: 0;
	font-size: 1.1em;
	margin-top: 20px;
}

fieldset#contact label {
	width: 100px;
	padding-right: 5px;
	float: left;
	clear: left;
	height: 20px;
	margin-bottom: 5px;
	text-align: right;
}


fieldset#contact input {
	float: left;
	width: 160px;
	margin-bottom: 5px;
}

fieldset#contact input.kort {
	width: 60px;
}

fieldset#contact input.lang {
	width: 375px;
}


fieldset#contact input#plaatsen {
	width: 100px;
	float: right;
	margin-top: 10px;
	margin-right: 70px;
}

fieldset#contact textarea {
	float: left;
	width: 375px;
	height: 100px;
}
