@charset "UTF-8";

/* With thanks to Ingeborg from redbanana webdesign (www.redbanana.be) for the 
  building blocks - a beatiful and solid design */

/* Adapted for Natural Selection's Product Catalogue (www.natural-selection-clothing.be) by
  by Dee Stevens, Binalogic Consultants +32 2 494 997 478 ) */

/* Site Colors:
	#333333 - grey black for regular text
	#336DD7 - blue for h2 text
	#7DC318 - green for h3 text
	#ced4f0 - blue background colour in #page and #footer section
	#74b301 - The green for the links
	#5073f5 - The blue for the links */

/* Natural Selection */


/* Universele selector */
* {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

/* Basics*/
body {
	color: #666;
	font-size: 14px;
	font-weight: normal;
	background-image: url(../web_site_images/bg-natsel.jpg);
}
/* Wrapper */
#wrapper {
	width: 970px;
	height: 560px;
	margin: 20px auto 0px auto;
        background-image: url(../web_site_images/bg-site.png);
	background-repeat: no-repeat;
}

/*Upper Wrapper - everything except for the footer*/
#wrapper-boven {
	width: 970px;
	height: 537px;
	margin: 0px;
	padding: 0px;
	float: left;
}

/*Lower wrapper - just the footer area*/
#wrapper-onder {
	width: 970px;
	height: 23px;
	margin: 0px;
	padding: 0px;
	float: left;
	color: #74b301;
	font-size: 12px;	
}

/*Left section of the Footer area*/
 #footer-left {
	width: 250px;
	height: 23px;
	margin: 0px;
	padding: 0px;
	float: left;
}

#footer-middle {
	width: 260px;
	height: 23px;
	margin: 0px;
	padding: 0px;
	float: left;
	text-align:right;
}

#footer-right {
	width: 376px;
	height: 23px;
	margin: 0px;
	padding: 0px;
	float: left;
	text-align:right;
}

/* Includes header, strip down LHS, Nav, Pagecontents, all placed from the left */
#wrapper-left{
	width: 930px;
	height: 537px;
	margin: 0px;
	padding: 0px;
	float: left;
}

/* This is for the 30px strip down the RHS */
#wrapper-right{
	width: 30px;
	height: 537px;
	margin: 0px;
	padding: 0px;
	float: right;
        /*background: #cbd4f0;*/
}

.wrapper-header{
	width: 930px;
	height: 70px;
	margin: 0px;
	padding: 0px;
	float: left;
        /*background-image: url(../web_site_images/dee-header.png);
	background-repeat: no-repeat;
	background-color: #cbd4f0;*/
}

.wrapper-content-left{
	width: 20px;
	/* Required to increase this by 30px cos header is 70px instead of 100px */
        height: 467px;
	margin: 0px;
	padding: 0px;
	float: left;
        /*background-image: url(../web_site_images/dee-menu-img.png);
	background-repeat: no-repeat;
	background-color: #cbd4f0;*/
}

/* This is the navigation area */
.wrapper-content-text{
	width: 140px;
	height: 467px;
	margin: 0px;
	padding: 0em;
	/* background-image: url(../img/kader.png); */
	/*background-image: url(../web_site_images/dee-menu-img.png);
	background-repeat: no-repeat;
	background-color: #cbd4f0*/
	float: left;
}

/* Unordered list of Category Groups in the LH Navigation area*/
.categorygroups {
    padding-left: 0;
    /* dss 22/6/09 */
    padding-top: 4.75em;
    list-style: none;
    /* dss 22/6/09 */
    line-height: 150%;
}

/* Upper nav area*/
.staffuppernavmenu {
    padding-left: 0;
    padding-top: 1.5em;
    line-height: 150%;
    font-weight: bold;
}

/* Staff's Unordered list of Category Groups in the LH Navigation area*/
.staffcatgrpmenu {
    padding-left: 0;
    padding-top: .5em;
    line-height: 150%;
    /* add a box to scroll through */
    height: 380px;
    /*width: 300px;*/
    overflow: auto;
    background-color: white;
}
/* Define the style used in Category Group Li(sts)
Given that they're all links, I could have defined it as a link style as opposed to in the php!!*/
.bold {
    font-weight: bold;
}

/*Unordered list of Product Categories (for each Category Group) in the Nav area*/
.productcategories {
   padding-left: 1.5em;
   list-style: square;
   /* explicitely make normal else it picks up the bold defined in the php for the categorygroups for IE only !! */
   font-weight: normal;
}
/*Staff's list of Product Categories (for each Category Group) in the Nav area*/
.staffproductcatmenu {
   padding-left: 0.5em;
   list-style: none;
   /* explicitely make normal else it picks up the bold defined in the php for the categorygroups for IE only !! */
   font-weight: normal;
}

/* This is the page-content area */
.wrapper-content-right{
    width: 350px;
    height: 467px;
    margin: 0px;
    padding-top: 12px;
    float: left;
}

/* Staff's page-content area */
.staffwrapper-content-right{
    width: 350px;
    height: 467px;
    margin-left: 2em;
    padding-top: 0.5em;
    float: left;
}

/* Headline text in page content area */
h2 {
     /* dss 22/6/09  Margin top not dropping in ie, it seems*/
     padding-top: 0.6em;
    /*margin-top: 0.6em;*/
    color: #7dc318;
    font-size: 24px;
    font-weight: bold;
}
/* 'Welcome' Text on Welcome page */
h4 {
    font-size: 12px;
    color: #336dd7;
    font-weight: normal;
    line-height: 150%;
    margin-top: 1em;
}



/*Text displaying info about each Category Groups on the Page */
.category_group_content {
    padding-top: 1em;
    font-size: 12px;
    color: #336dd7;
    font-weight: normal;
    width: 350px;
    /* dss 22/6/09 */
    line-height: 150%;
}

/* Text displaying info about the Product Categories on the Page plus the tables below it  */
.product_category_content { 
    padding-top: 0.75em;
    font-size: 12px;
    color: #336dd7;
    font-weight: normal;
    /* Text lines up on screen with .products below */
    width: 350px;
    /* dss 22/6/09 */
    /* max height is 500px; */
    height: 380px;
    line-height: 150%;
}

/* list of products - highlighting those which are visible in catalogue */
.vis_y_n {
    background-color: pink;
    width: 300px;
}

/* Unordered List of Products (for each Product Category) in the Nav area */
.products {
    /* drop a little under the text which appears above it */
    margin-top: 0.75em;
    border: 1px solid #333;
    padding-left: 4em;
    list-style: square;
    color: #333;  /*don't really need to specify this here as this class is nested withint the one above */
    height: 340px;
    width: 350px;
    overflow: auto;
    background-color: white;
    
    
}



/* Table information here, cos our thumbnails & data are in table data_cells */
table, th, tr, td { 
	border-collapse: collapse; 
	vertical-align: top; 
	font-size: 14px; 
	line-height: 150%;
        padding:0;
}

/* Product listings on the Product Category page (small thumbnails)
================================================================== */
/* 1. 1st data box containing color information. */
/* 2nd & 3rd info boxes contain Size & Eur. */
#ProdCat_ThumbData td { 
	font-size: 0.8em;
	width:80px;
        text-align: center;
}
/* colour text for the three data cells */
#datacolor1 { 
    color: #666;
} 
#datacolor2 { 
    color: #666;
} 
#datacolor3 { 
    color: #666;
} 
#ProdCat_ThumbImg td {
	padding-top: 0em; 
	padding-bottom: 0em; 
	text-align: center;
	width: 240px;
} 
/* Text displaying info about the Product on the Page plus the tables below it  */
.product_content { 
    padding-top: 0.5em;
    font-size: 12px;
	color: #336dd7;
    font-weight: normal;
    width: 350px;
    line-height: 150%;
}

.product_content p {
	font-size: 0.8em;
	font-weight: normal;
}


/* Box the tables */
.product_boxedtable {
	margin-top: .75em;
	border: 1px solid #333;
	width: 300px;
	background-color: white;
}

/* Chosen Product on the Page (larger thumbnail)
=============================================== */
/* 1. 1st data box containing color information. */
/* 2nd & 3rd info boxes contain Size & Eur. */
#Product_ThumbData td { 
	padding-top: 0.15em; 
	font-size: 0.8em;
	width:100px;
        text-align: center;
}
/* colour text for the three data cells */
#datacolor1_product { 
    color:#666;
} 
#datacolor2_product { 
    color: #666;
} 
#datacolor3_product { 
    color: #666;
}
/* A little 2 data-cell table to display the brand & Product Code */
#Product_ThumbData2 td { 
	font-size: 0.8em;
	width:150px;
        text-align: center;
}
#brandcolor_product { 
    color: #666;
}
#ProdCodecolor_product { 
    color: #666;
} 


/* Unknown height of image, so box border on 3 sides only */
#Product_ThumbImg td {
	padding-top: 0.15em; 
	padding-bottom: 0.25em;
	text-align: center;
	width: 300px;
}

/* "moving below" or "clearing" the floated image.  Not always wanted!! */
.clear_both {	
	clear: both;
}

/*standard links*/
a:link, a:visited{
	color: #74b301;
	text-decoration: none;
}
a:hover, a:active{
	color: #5073f5;
	text-decoration: none;
}

/*CategoryGroup link colours (nav area) */
a.catgrplnk:link, a.catgrplnk:visited{
	color: #5073f5;
}
a.catgrplnk:hover, a.catgrplnk:active{
	color: #74b301;
	text-decoration: none     
}

/*ProductCategory link colours (nav area) */
/* NB: At the moment, these cols are the same as the site cols, but we can change
  them easily here! */
a.prdcatlnk:link, a.prdcatlnk:visited{
	color:#74b301;
	text-decoration: none;     
}


a.prdcatlnk:hover, a.prdcatlnk:active{
	color: #5073f5;
	text-decoration: none;      
}

/*binalogic link*/
a.binalogic:link, a.binalogic:visited{
	color: #74b301;
	text-decoration: none;
}
a.binalogic:hover, a.binalogic:active{
	color: #ed1b1b;
	text-decoration: none;
}

/*  The End  June 2009 */