@charset "UTF-8";

/* Wildecard selector om te zorgen dat alle defaults van de verschillende browsers worden opgeheven */
* { 
	margin: 0px;
	padding: 0px;
}

body  {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background: #CC0099 url(../_images/bg_pattern.jpg) repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container  {
	position: relative; /* adding position: relative allows you to position the nested elements relative to this container */
	width: 700px;
	margin: 0 auto; /* de eerste waarde is voor de top en left margin, de tweede waarde is voor links en rechts  */
	text-align: left; /* this overrides the text-align: center on the body element. vooral voor IE noodzkelijk */
}

/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
#clearfloat { 
	clear:both;
	height:0;
	line-height: 0px;
}

/* ---- #header styles ---- */
#header/* position container elements */
   {
	position: relative; /* zorgt ervoor dat alle nested elements refereren naar deze container ipv de parent containers */
	height: 120px;
	background: #000000 url(../_images/logo_shirts.gif) no-repeat;
	padding-right: 0px;
	padding-left: 0px;
	color: #FFFFFF;
}

#header #logoImage {
	position: absolute; /* positioneert zicht adhv de parent container */
	top: 0;
	left: 0;
	height: 120px;
	width: 120px;
	background: url(../_images/logo.gif) top left no-repeat;
	margin-left: 15px;
}

/* -- main navigation styles -- */
#header #navMain img {
	border: hidden; /* firefox toont een kader rond img links, dus hiermee de oplossing */
	border-color: #000000; /* windows explorer toont het kader rond img links nog wel dus vandaar zwart gemaakt */
	border-width: 0px; /* windows explorer toont het kader rond img links nog wel dus met het geven van een dikte van 0px opgelost */
}

#header #navMain ul {
	margin: 0;
	padding: 0;
	padding-bottom: 12px;
	position: absolute; /* positioneert zicht adhv de parent container */
	left: 160px;
	bottom: 0;
	list-style: none; /* standaard browser lijst tekens, bv bullets e.d. */
}

#header #navMain ul li {
	float: left; /* aangeven van deze float moet echt in de li tag, in ul werkt hij niet */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
}

/* -- individuele main navigation knoppen styles -- */
#header #navMain #homoLink {
	background: url(../_images/_menu/buttonHomo.gif) top left no-repeat;
}
#header #navMain #homoLink a {
	padding: 0 0; /* eerste waarde is voor de top en bottom, tweede waarde is voor links en rechts */
	text-decoration: none; /* xxxxxxxxxxxxx */
	color: #000000; /* xxxxxxxxxxxxx */
	width: 67px; /* breedte van het block (niet nodig ivm spacer) */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
	background: url(../_images/_menu/buttonHomo.gif) 0 -21px no-repeat;
}
#header #navMain #homoLink a:hover {
	background-image: none;
}

#header #navMain #lesboLink {
	background: url(../_images/_menu/buttonLesbo.gif) top left no-repeat;
}
#header #navMain #lesboLink a {
	padding: 0 0; /* eerste waarde is voor de top en bottom, tweede waarde is voor links en rechts */
	text-decoration: none; /* xxxxxxxxxxxxx */
	color: #000000; /* xxxxxxxxxxxxx */
	width: 83px; /* breedte van het block (niet nodig ivm spacer) */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
	background: url(../_images/_menu/buttonLesbo.gif) 0 -21px no-repeat;
}
#header #navMain #lesboLink a:hover {
	background-image: none;
}
#header #navMain #unisexLink {
	background: url(../_images/_menu/buttonUnisex.gif) top left no-repeat;
}
#header #navMain #unisexLink a {
	padding: 0 0; /* eerste waarde is voor de top en bottom, tweede waarde is voor links en rechts */
	text-decoration: none; /* xxxxxxxxxxxxx */
	color: #000000; /* xxxxxxxxxxxxx */
	width: 94px; /* breedte van het block (niet nodig ivm spacer) */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
	background: url(../_images/_menu/buttonUnisex.gif) 0 -21px no-repeat;
}
#header #navMain #unisexLink a:hover {
	background-image: none;
}
#header #navMain #designLink {
	background: url(../_images/_menu/buttonDesigns.gif) top left no-repeat;
}
#header #navMain #designLink a {
	padding: 0 0; /* eerste waarde is voor de top en bottom, tweede waarde is voor links en rechts */
	text-decoration: none; /* xxxxxxxxxxxxx */
	color: #000000; /* xxxxxxxxxxxxx */
	width: 88px; /* breedte van het block (niet nodig ivm spacer) */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
	background: url(../_images/_menu/buttonDesigns.gif) 0 -21px no-repeat;
}
#header #navMain #designLink a:hover {
	background-image: none;
}

/* -- rechter navigation styles -- */
#header #navRechts img {
	border: hidden; /* firefox toont een kader rond img links, dus hiermee de oplossing */
	border-color: #000000; /* windows explorer toont het kader rond img links nog wel dus vandaar zwart gemaakt */
	border-width: 0px; /* windows explorer toont het kader rond img links nog wel dus met het geven van een dikte van 0px opgelost */
}

#header #navRechts{
	margin: 0;
	padding-top: 15px;
	padding-right: 15px;
	position: absolute; /* positioneert zicht adhv de parent container */
	right:0px;
	width: 112px;
	height: 108px;
	list-style: none; /* standaard browser lijst tekens, bv bullets e.d. */
	background: url(../_images/stipjes.gif) left top no-repeat;
	display: block;
}

#header #navRechts #homeLink {
	float: right;
	height: 19px;
	width: 36px;
	background: url(../_images/_menu/buttonHome.gif) top right no-repeat;
}
#header #navRechts #homeLink:hover {
	background: url(../_images/_menu/buttonHome.gif) top left no-repeat;
}

#header #navRechts #winkelwagenLink {
	float: right;
	height: 19px;
	width: 94px;
	background: url(../_images/_menu/buttonWinkelwagen.gif) top right no-repeat;
}
#header #navRechts #winkelwagenLink:hover {
	background: url(../_images/_menu/buttonWinkelwagen.gif) top left no-repeat;
}

#header #navRechts #voorwaardenLink {
	float: right;
	height: 22px;
	width: 97px;
	background: url(../_images/_menu/buttonVoorwaarden.gif) top right no-repeat;
}
#header #navRechts #voorwaardenLink:hover {
	background: url(../_images/_menu/buttonVoorwaarden.gif) top left no-repeat;
}

#header #navRechts #overonsLink {
	float: right;
	height: 16px;
	width: 61px;
	background: url(../_images/_menu/buttonOverons.gif) top right no-repeat;
}
#header #navRechts #overonsLink:hover {
	background: url(../_images/_menu/buttonOverons.gif) top left no-repeat;
}

#header #navRechts #contactLink {
	float: right;
	height: 14px;
	width: 52px;
	background: url(../_images/_menu/buttonContact.gif) top right no-repeat;
}
#header #navRechts #contactLink:hover {
	background: url(../_images/_menu/buttonContact.gif) top left no-repeat;
}

#kaderRoze {
	margin: 0;
	padding: 0;
	position: absolute; /* positioneert zicht adhv de parent container */
	bottom: 0;
	height: 2px;
	width: 700px;
	background: #CC0099
}

/* ---- #mainContent styles ---- */
#mainContent  {
	position: relative; /* zorgt ervoor dat alle nested elements refereren naar deze container ipv de parent containers */
	background-color: #FFFFFF;
	left: 0px;
	top: 0px;
}

#mainContent  iframe {
	min-height: 650px;
	width:700px;
	border:thick;
	border-color:#66CCFF;
}

/* ----#ove ons pagina ----*/
#mainContent #kopij {
	position: relative; /* zorgt ervoor dat alle nested elements refereren naar deze container ipv de parent containers */
	background-color: #FFFFFF;
	height: 450px;
	left: 0px;
	top: 0px;
	padding: 20px;
}

#mainContent #kopij h1 {
	font-size: 15px;
	font-weight: bold;
	color: #CC0099;
}

#mainContent #kopij p {
	font-size: 12px;
	color: #000000;
}

#mainContent #kopij a {
	color: #CC0099;
	text-decoration: none;
}

#mainContent #kopij a:hover {
	color: #FF99CC;
	text-decoration: none;
}

#mainContent #kopij strong {
	text-weight: bold;
}

/* ----#nieuw pagina ----*/
#mainContent #nieuw {
	padding-top: 40px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 20px;
	widht: 700px;
	height: 490px;
	background:url(../_images/kopje_nieuw.gif) 15px 15px no-repeat;
}
#mainContent #nieuw #nieuwContainer {
	height: 153px;
}
#mainContent #nieuw #nieuwContainer ul{
	position: absolute; /* positioneert zicht adhv de parent container */
	list-style: none; /* standaard browser lijst tekens, bv bullets e.d. */
}
#mainContent #nieuw #nieuwContainer ul li {
	width: 152px;
	float: left; /* aangeven van deze float moet echt in de li tag, in ul werkt hij niet */
	display: block; /* zorgt ervoor dat het hele blockgedeelte een actief/hotspot gedeelte is */
	margin-right: 20px;
}

/* ---- #footer styles ---- */
#footer   {
	position: relative; /* zorgt ervoor dat alle nested elements refereren naar deze container ipv de parent containers */
	background-color: #000000;
	height: 30px;
	padding-top: 5px;
	padding-right: 20px;
	color: #FFFFFF;
	font-size: 10px;
}

#footer p {
	padding-top: 6px;
	padding-left: 20px;
}
#footer a {
	color:#CC0099;
	text-decoration: none;
}
#footer a:hover {
	color: #FF99CC;
	text-decoration: none;
}

#footer #kaderRoze {
	margin: 0;
	padding: 0px;
	position: absolute; /* positioneert zicht adhv de parent container */
	top: 0;
	height: 2px;
	width: 700px;
	background: #CC0099;
}