/* This is the stylesheet for www.cremedor.co.uk */  
/* Comments look like this */

/* ----------------------------TOP BAR WITH LOGO AND SEARCH BOX---------------------*/

/* Here we define the top area, that contains the logo and the search bar */

#topbar {     float: left;
    position: relative;
    width: 99%;
    padding: 0% 1% 0% 0%;
    margin: 0 0 0 0;     
    background: #ffffff;	/*this is the background colour*/
    color: #000;			/*this is the text colour*/
    border: solid #000 1px;
    border-bottom: none;
    } 
* html #topbar {
    width: 100%; 
}

/* The Logo */
.creme {
    float: left;
    position: relative;
    width: 280px;
    height: 75px;
    border: none;
    } 

/* The box that says 'to order a copy...click here' */
#brochure {
    float: right;
    margin: 15px 0% 0 0;
    text-align:center;
    position: relative;
    width:  20%;
    padding: 1% 1% 1% 1%;
    background: #800000;
    color: #fff;
    border: solid #000000 0px;
    } 

/* The Search Box */
#search {
    float: right;
    position: relative;
    padding: 5px 5px 5px 5px;
    margin: 15px 0px 0px 0;
    background: #ffffff;
    color: #000;
    border: none;
    }
* html #search {width: 7%;}
#search b{font-weight:bold; font-size:10pt;}



/*-----------------------------MENU BAR-------------------------------------*/

/* This is the background section behind the menu */

#por  {
     z-index:10;
     float: left;
     position: relative;
     width:  96%;
     padding: 1% 2% 1% 2%;
     margin: 0 0 0 0;
     background: #800000;
     color: #fff;
     border: solid #000 1px;
     } 
* html #por {
     width: 100%; 
}
/* This is the Menu Font */
.m0l0i {
	font-family: Arial;
	font-size: 12px;
	font-weight : bold;
	}


/*-------------------------------MAIN SECTION--------------------------*/


/* This bit describes the main content area, below the menu - basically the background */

#content  {     
    float: left;
    position: relative;
    width:  93%;
    padding: 2% 2% 2% 5%;
    margin: 0 0 0 0;
    background: #ffffff;
    color: #000;
    border: solid #000 1px;
    border-top: none;
    }
* html #content {
    width: 100%; 
}

/* These next three sections are defining the areas that hold the content */
/* They are called according to which side they float on */
/*-------------LEFT SIDED CONTENT--------*/
#leftcon  {
    float: left;
    position: relative;
    width:  45%;
    padding: 1% 1% 1% 1%;
    margin: 0 9% 5% 0;
    background: #ffffff;
    color: #000;
    border: none;
 } 
* html #leftcon {
    width: 45%;
    margin: 0% 10% 3% 0%;
}

/*The next line makes the image sit to the left of the text*/
#leftcon img {border:none; float:left;}	
/*And this line defines the size and font of the headings*/
#leftcon b{font-family:    "Palatino Linotype";     color:  #505864;  font-size: 12pt; font-weight : bold}

/*-------------RIGHT SIDED CONTENT--------*/
#rightcon  {
    float: left; 
    position: relative;
    width:  45%;
    padding: 1% 1% 1% 1%;
    margin: 5% 0 0 0;
    background: #ffffff;
    color: #000;
    border: none;
 } 
* html #rightcon {
    width: 45%;
    margin: 5% 0% 0% 0%;
}

#rightcon img {border:none; float:right;}
#rightcon b{font-family: "Palatino Linotype";     color:  #505864;  font-size: 12pt; font-weight : bold}

/*-------------CENTRED CONTENT--------*/

#centrecon  {
    float: left;
    text-align:center;
    position: relative;
    width:  85%;
    padding: 1% 1% 1% 1%;
    margin: 1% 10% 0 5%;
    background: #ffffff;
    color: #000;
    border: none;
 } 
* html #centrecon {
    width: 85%;
    margin: 1% 10% 0% 2%;
}

#centrecon img {border:none; float:right;}
#centrecon b{font-family:"Palatino Linotype";     color:  #505864;  font-size: 12pt; font-weight : bold}


/*-------------OTHER THINGS, LIKE THE ORDER FORM LAYOUT-------------------*/

/* The 'contact us' box on the customer service page */
#contact  {
     float: left;
     position: relative;
     width:  85%;
     padding: 2% 2% 2% 2%;
     margin: 0 0 10px 0;
     background: #fff;
     color: #000;
     border: solid #000 1px;
        }
/* The order form box layout */
#order {
     float: left;
     margin: 0 0% 0 0%;
     position: relative;
     width:  25%;
     padding: 2% 2% 2% 2%;
     background: #cc9900;
     color: #000;
     border: solid #000000 1px;
     } 
.input {
    width: 200px;
    background-color: #ffffff;	/*the input fields*/
    }
.bginput{
    width: 500px;
    background-color: #ffffff;	/*the big input fields*/
	}
td{font-weight:bold; font-size:10pt;}


/*---------------------GENERIC STUFF---------------------------*/

/*This next section will only appear on pages with not much content*/
/*It will look like a bar at the bottom, and perhaps the top*/
body    {
     margin: 0;
     padding:    0;
     font-family:   verdana, arial, helvetica, sans-serif;
     color:  white;
     font-size: 8pt;
     background-color:   #800000;
    }

/*This section is all about how the links look*/
/*At the moment they are black text, with an underline when you hover over them*/
a  {
     text-decoration: none;
     font-weight: bold;
     color:#000;
     }
a:link  {
     color:  #000;
     text-decoration: none;
     }
a:visited   {
     color:  #000;
     text-decoration: none;
     }
a:active    {
     color:  #000;
     text-decoration: none;
     }
a:hover {
     color:  #000;
     text-decoration: underline;
    }