/* *************************** 
   Eric Meyer reset 
   ***************************/
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, strong, sub, sup, tt, var,
dl, dt, dd, ol, 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;
}
ol, 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: "" "";
}

/* *************************** 
   hide rule 
   ***************************/

.hide { text-indent: -9999px; }

em { font-style: oblique;}


.invisible { visibility: hidden; }
body { 

       font-family: Helvetica,Arial,Geneva,sans-serif;
       font-size: small; /* for IE5/Win */
       voice-family: "\"}\"";
       voice-family: inherit;
	   font-size: medium; /* for compliant browsers */ 
	   color: #34363E;
	   background: #EFF0E8 url(http://www.edutrix.be//img/body-bg.png) top left repeat-x;
	 }

html>body { font-size: medium; /* be nice to Opera */ }

/* *************************** 
   overall structure
   ***************************/

#container { 
             width: 920px;
			 margin:  0 auto;
			 text-align: left;
			 background: #fff;
			 position: relative; /*for absolute positioned sub navigation */
			 margin-top: 5px;
			 
             
			
			}



#content
{
display: inline-block;
background: #fff;
height: 100%;
margin-top: 5px;
}
			
#content_main
{

float: right;
width: 690px;
background: #fff;
padding-bottom: 25px;
font-size: 95%;
}			


#content_sub
{
float: left;
width: 230px;
background: #fff;

}

#siteinfo
{
clear: both;

width: 100%;
background: #2C2D35;
display: inline-block; /* Hack to make it always have the margin-top */ }

#wrap {
width: 920px;
margin: 0 auto;
text-align: left;
background: #34363E;

}


/* header and branding */

body.home #header {
background: transparent url(http://www.edutrix.be//img/branding-home.png) top left no-repeat;
height: 333px;
width: 100%;
margin-top: 5px;
display: inline-block;
}

body.about #header {
background: transparent url(http://www.edutrix.be//img/branding-about.png) top left no-repeat;
height: 333px;
width: 100%;
margin-top: 5px;
display: inline-block;
}

body.contact #header {
background: transparent url(http://www.edutrix.be//img/branding-contact.png) top left no-repeat;
height: 333px;
width: 100%;
margin-top: 5px;
display: inline-block;
}

body.binfo #top {
background: transparent url(http://www.edutrix.be//img/branding-sub.png) top left no-repeat;
height: 200px;
width: 100%;
margin-top: 5px;
display: inline-block;
}

body.gamma #top {
background: transparent url(http://www.edutrix.be//img/branding-gamma.png) top left no-repeat;
height: 200px;
width: 100%;
margin-top: 5px;
display: inline-block;
}

body.order #top {
background: transparent url(../img/branding-order.png) top left no-repeat;
height: 200px;
width: 100%;
margin-top: 5px;
display: inline-block;
}


body.home #branding {
background: transparent url(http://www.edutrix.be//img/heading1-home.png) top left no-repeat;
height: 195px;
width: 66%;
margin-top: 106px;
margin-left: 233px;
}

body.about #branding {
background: transparent url(http://www.edutrix.be//img/heading1-about.png) top left no-repeat;
height: 195px;
width: 66%;
margin-top: 106px;
margin-left: 233px;
}

body.contact #branding {
background: transparent url(http://www.edutrix.be//img/heading1-contact.png) top left no-repeat;
height: 195px;
width: 409px;
margin-top: 106px;
margin-left: 280px;
}

body #branding p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 150%;
font-style:italic;
color: #fff;
padding-top: 10px;
padding-right: 30px;
padding-left: 0px;
letter-spacing: 1,5px;
line-height: 120%;
}

body.contact #branding p {
padding-left: 30px;
}

/* main content */

#hp-nieuw {
float: left;
width: 280px;


} 


#hp-bestelinfo{
float: right;
width: 360px;
letter-spacing: 108%;
line-height: 108%;
padding-right: 20px;
} 

#content_main #hp-bestelinfo h2
{
margin-left: 0
}

#content_main #hp-bestelinfo p
{
padding-left: 0;
}

#hp-bestelinfo li {
font-style: italic;
}

#content_main p {

padding: 2px 20px 8px 20px;
letter-spacing: 1,5px;
line-height: 120%;
}



#content_main p, li, ol
{ margin-bottom: 8px;}

#content_main a
{
color: #A22A8F;
text-decoration: none;
font-weight: bold;
}

#content_main a:hover, #content_main a:focus
{
color: #fff;
background-color: #A22A8F;
font-weight: bold;
}


#content_sub  li, ol
{ margin: 0;}


/* Footer */

#wrap ol
 
 
{ width: 100%;
  float:left;
  background: #34363E;
  color: #fff;
}

#wrap li
{ 
  float: left;
  width: 27%;
  padding: 3%;
  
}

#wrap dt
{ color: #30C8EB;
  font-style:italic;
  font-size: 115%;
  margin-bottom: 10px;
}

#wrap dd
{ padding-left: 30%;
  color:#DAF5FC;
  line-height: 110%;
  font-size: 90%;
  margin-bottom: 9px;
}

dd.linkthru a 
{ font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 80%;
  color: #7DC242;
  background: transparent url(http://www.edutrix.be//img/link.png) center left no-repeat;
  padding: 4px 0 4px 22px;
  height: 20px;
 }

#footer-order 
{ background: #34363E url(http://www.edutrix.be//img/order_icon.png) top left no-repeat; }

#footer-enews 
{ background: #34363E url(http://www.edutrix.be//img/enews_icon.png) top left no-repeat; }

#footer-contact
{ background: #34363E url(http://www.edutrix.be//img/contact_icon.png) top left no-repeat; }

#footer-rss
{ background: #34363E url(http://www.edutrix.be//img/rss_icon.png) top left no-repeat; }


/* *************************** 
   headers
   ***************************/
   
h1 {
font-family: Georgia, "Times New Roman", Times, serif, Times, serif;
font-size: 210%;
font-weight: bold;
color: #fff;
padding-top: 20px;
padding-right: 30px;
letter-spacing: 2px;
}

body.contact h1 {
margin-left: 30px;
}

#crumb h1 {

font-size: 130%;
font-weight: bold;
color: #fff;
padding-top: 0;
padding-right: 30px;
letter-spacing: 2px;
}



h2 {
background: transparent url(http://www.edutrix.be//img/h2-bg.gif) top left no-repeat; 
font-family: Georgia, "Times New Roman", Times, serif, Times, serif;
padding-left: 30px;
margin-left: 15px;
font-size: 120%;
color: #34363E;
}

h3
{
padding-left: 20px;
margin-top: 10px;
font-weight: bold;
font-size: 95%;
}

#logo {
display: block;
height: 65px;
width: 230px;
overflow: hidden;
margin-top: 12px;
}

#logo img {
	float: none;
	border: none;
	margin: 0; }
	
#logo:hover img, #logo:focus img {
	margin-top: -66px; }


/* *************************** 
   navigation
   ***************************/
   
#navigation {
width: 230px;
margin-top: 30px;

}

/* activ states */

body.home #index a   {
display: block;
background: transparent url(http://www.edutrix.be//img/activ-home.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

body.gamma #gamma a   {
display: block;
background: transparent url(http://www.edutrix.be//img/activ-gamma.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}	

body.order #bestel a   {
display: block;
background: transparent url(http://www.edutrix.be//img/activ-order.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

body.about #wij a   {
display: block;
background: transparent url(http://www.edutrix.be//img/activ-about.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

body.contact #contact a   {
display: block;
background: transparent url(http://www.edutrix.be//img/activ-contact.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

/* default states */

#index a   {
display: block;
background: transparent url(http://www.edutrix.be//img/nav-home.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#gamma a   {
display: block;
background: transparent url(http://www.edutrix.be//img/nav-gamma.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}	

#bestel a   {
display: block;
background: transparent url(http://www.edutrix.be//img/nav-order.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#wij a   {
display: block;
background: transparent url(http://www.edutrix.be//img/nav-about.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#contact a   {
display: block;
background: transparent url(http://www.edutrix.be//img/nav-contact.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

/* hover states */

#index a:hover, #index a:focus  {
display: block;
background: transparent url(http://www.edutrix.be//img/hover-home.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#gamma a:hover, #gamma a:focus   {
display: block;
background: transparent url(http://www.edutrix.be//img/hover-gamma.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}	

#bestel a:hover, #bestel a:focus  {
display: block;
background: transparent url(http://www.edutrix.be//img/hover-order.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#wij a:hover, #wij a:focus  {
display: block;
background: transparent url(http://www.edutrix.be//img/hover-about.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#contact a:hover, #contact a:focus  {
display: block;
background: transparent url(http://www.edutrix.be//img/hover-contact.png) top left no-repeat;
height: 40px;
width: 230px;
text-indent: -99999px;
}

#subnav {
position: absolute;
top: 20px;
right: 20px;
}

body.binfo #subnav {
position: absolute;
top: 20px;
left: 246px;
}

body.gamma #subnav {
position: absolute;
top: 20px;
left: 246px;
}

body.order #subnav {
position: absolute;
top: 20px;
left: 246px;
}


#subnav li {
float: right;
padding-left: 7px;
}

body.binfo #subnav li, body.gamma #subnav li, body.order #subnav li  {
float: left;
padding-right: 7px;
}

#subnav li a
{
color: #00BBE7;
font-size: 92%;
}

#subnav .end {
border-right: 1px solid #00BBE7;
padding-right: 7px;
}

/* sidebar */

#postit
{
margin-top: 20px;
height: 185px;
width: 175px;
}

#postit-top
{
background: transparent url(http://www.edutrix.be//img/postit_top.png) top left no-repeat;
height: 99px;
}

#postit-top a
{
display: block;
height: 99px;
width: 175px;
}

#postit-bottom
{
background: transparent url(http://www.edutrix.be//img/postit_bottom.png) top left no-repeat;
height: 88px;
}

#postit-bottom a
{
display: block;
height: 83px;
width: 175px;
}
		

/* pages */

/*indexpage*/

 .buttons{padding:5px;
          margin: 0 auto;}
.buttons span{color:#A22A8F;padding:0 5px;cursor:pointer;font:14px Verdana}
.buttons span.active, .buttons span:hover{background:#A22A8F;color:#fff}
.mask2{
margin: 0 0 10px 70px;
width: 140px;
	overflow: hidden;
position: relative;
	}

#box2{
	position:relative;
	width: 140px;
	overflow: hidden;

}
#box2 span{
	display:block;
	float:left;
width: 140px;
overflow: hidden;
position: relative;

}

/*gamma*/

ul#prod {
padding: 10px 20px 20px 20px;

}

ul#prod li{
float: left;
width: 140px;
padding-right: 20px;
padding-bottom: 20px;
}


#content_main .prod-fiche a, #content_main .prod-fiche a:hover { 
display: block;
border: none;
background: none;
color: #EF3E34;

}

#content_main .prod-fiche span { 
display: block;
border: none;
background: none;
font-size:80%;
height: 50px;
text-align: center;
}







/*productfiche*/

#prod-desc {
font-size: 110%;
}

#prod-desc img {
float: left;
width: 250px;
padding-left: 20px;
margin-bottom: 15px;
}

div.prod-detail {
float: right;
text-align: left;
width: 380px;
}

div.prod-detail h4 {
font-size: 140%;
padding-left: 20px;
padding-bottom: 12px;
}

p.prijs {
font-size: 130%;
color: #F68121;
font-weight: bold;
}

.desc {
clear: both;
}



/*bestelinfo */
body.binfo dl
{
padding: 0 20px;
}

body.binfo #crumb, body.gamma #crumb, body.order #crumb
{
padding: 130px 100px 10px 35px;
}

#faq dt {text-indent: -99999px;}

dd.question {font-weight: bold;
           }

body.binfo #content_main {
letter-spacing: 1,5px;
line-height: 120%;
}

/*sitemap */

dl.sitemap {
margin-top: 8px;
}

#content_main div#sitemap a, #content_main div#sitemap a:visited
{
color: #00BBE7;
text-decoration: underline;
border-bottom: none;
font-variant:small-caps;
background-color: #fff;
}

#content_main div#sitemap dd {
font-style:italic;
font-size: 90%;
}

/*contact */

#cp-form {
margin-left: 15px;
float: left;
width: 440px;
background: transparent url(http://www.edutrix.be//img/contact_bg.png) top left no-repeat;
}


#cp-contact {
float: right;
width: 190px;
margin-top: 50px;
font-size: 110%;
letter-spacing: 150%;
text-align: right;
padding-right: 20px;
}

#cp-contact ul {
margin-bottom: 35px;
}


#educform {
padding: 30px;
 
}


#educform label,  #op-form label {
display: block;
margin: 20px 0 10px 0;
font-weight: bold;
color: #666;
letter-spacing: 300%;
}

#educform input[type=text], #op-form input[type=text] {
	border: 1px solid #c8c8c8;
	font-size: 104%;
	color: #333;
	line-height: 5px;
	padding: 5px;
	margin-bottom: 5px;
	width: 360px;
}

#newsletter input[type=text] {
	border: 1px solid #c8c8c8;
	color: #333;
	line-height: 2px;
	padding: 2px;
	margin-bottom: 5px;
}

#educform input[type=text]:hover,  #educform input[type=text]:active, #educform input[type=text]:focus, #op-form input[type=text]:hover, #op-form input[type=text]:active,  #op-form input[type=text]:focus {
	border: 1px solid #c8c8c8;
	background: #EFF0E8;
}

#educform select#country, #op-form select#country {
	border: 1px solid #c8c8c8;
	font-size: 104%;
	color: #333;
	line-height: 5px;
	padding: 5px;
	margin-bottom: 5px;
}

#educform textarea, #op-form textarea  {
	border: 1px solid #c8c8c8;
	margin-bottom: 20px;
	font-size: 104%;
	font-family: Helvetica,Arial,Geneva,sans-serif;
	padding: 5px;
}

#educform textarea:hover, #educform textarea:active, #educform textarea:focus, #op-form textarea:hover, #op-form textarea:active, #op-form textarea:focus
 {
	border: 1px solid #c8c8c8;
	background: #EFF0E8;
}


#opt-form h1 {
background: #34363E url(http://www.edutrix.be//img/step_one.gif) top left no-repeat;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
width: 84%;
margin:0;
margin-bottom: 15px;
padding:0;
padding-top: 10px;
padding-left:75px;
}

#opt-form h1#steptwo {
background: #34363E url(http://www.edutrix.be//img/step_two.gif) top left no-repeat;
}

#opt-form {
margin-left: 30px;
margin-top: 100px;
}

#opt-form h2 {
margin: 15px 0 0 0;
}

#opt-form p {
margin-left:  0;
margin-top: 15px;
}



 #opt-form label {
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
color: #999;
letter-spacing: 200%;
}



#opt-form input[type=text] {
	border: 1px solid #c8c8c8;
	font-size: 14px;
	color: #333;
	padding:2px;
	margin-bottom: 3px;
	width: 200px;
}


 #opt-form input[type=text]:hover, #op-form input[type=text]:active,  #op-form input[type=text]:focus {
	border: 1px solid #c8c8c8;
	background: #EFF0E8;
}



#opt-form textarea  {
	border: 1px solid #c8c8c8;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: Helvetica,Arial,Geneva,sans-serif;
	padding: 2px;
}

#opt-form textarea:active, #op-form textarea:focus
 {
	border: 1px solid #c8c8c8;
	background: #EFF0E8;
}

#opt-form .ofinfo {
float: left;
width: 250px;
}

#opt-form ol {
float: right;
width: 350px;
}

#opt-form input[type=submit] {
font-size: 140%;
color: #333;
}



/* newsletter */

#newsletter {
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
padding: 10px;
background: #333;
width: 85%;
}