* {margin:0;padding:0; border: 0;}
ul, ol, li {list-style-type:none;}
a {color: #007dd9; text-decoration: underline;}
a:hover {color: #fff; background: #007dd9; text-decoration: none;}

body {
font: 62.5% "Arial", Helvetica, sans-serif; 
margin: 0 auto 10px auto;
text-align: center;
background: #eef5fa url(images/sky.jpg) 0px 35px repeat-x;
color: #092241;
}







/* navigation */
#nav-contain {
width: 100%;
height: 60px;
background: transparent url(images/nav-bg.gif) top left repeat-x;
float: right;
}
#nav {
height: 35px;
width: 900px;
margin: auto;
}
#nav ul {
height: 35px;
float: right;
border-right: 1px solid #3c83b3;
}
#nav li {
color: #fff;
float: left;
font: bold 1.3em/2.7em  "Arial", Helvetica, sans-serif; 
list-style: none;
}
#nav li a {
color: #fff;
float: left;
display: block;
height: 35px;
border-left: 1px solid #3c83b3;
padding: 0 18px;
text-decoration: none;
}
#nav li.one a:hover,
#nav li.one a.active {background: #40a7ec;}
#nav li.two a:hover,
#nav li.two a.active {background: #cc0017;}
#nav li.three a:hover,
#nav li.three a.active {background: #ff7d00;}
#nav li.four a:hover,
#nav li.four a.active {background: #ffb700;}
#nav li.five a:hover,
#nav li.five a.active {background: #5dc312;}
#nav li.six a:hover,
#nav li.six a.active {background: #2d1686;}
#nav li.seven a:hover,
#nav li.seven a.active {background: #5f0b83;}
#nav li.eight a:hover,
#nav li.eight a.active {background: #ff007a;}
#nav li.nine a:hover,
#nav li.nine a.active {background: #0076cc;}


#sub-nav {
height: 25px;
margin: auto;
width: 900px;
}
#sub-nav ul {
height: 25px;
float: right;
background: #deecf5;
}
#sub-nav li {
float: left;
margin: 7px 0 0 0;
font: bold 1.2em/1em  "Arial", Helvetica, sans-serif; 
list-style: none;
border-right: 1px solid #7fb2d6;
}
#sub-nav li a {
float: left;
padding: 0 20px;
text-decoration: none;
background: none;
color: #004576;
}
#sub-nav li a:hover {text-decoration: underline;}

#sub-nav ul.books {padding: 0 25px 0 0;}
#sub-nav ul.books li a:hover, #sub-nav ul.books li a.active {color: #cc0017;}
#sub-nav ul.music {padding: 0 25px 0 0;;}
#sub-nav ul.music li a:hover, #sub-nav ul.music li a.active {color: #ff7d00;}
#sub-nav ul.kids {padding: 0 25px 0 0;}
#sub-nav ul.kids li a:hover, #sub-nav ul.kids li a.active {color: #f8b201;}
#sub-nav ul.office {padding: 0 25px 0 0;}
#sub-nav ul.office li a:hover, #sub-nav ul.office li a.active {color: #5dc312;}
#sub-nav ul.fairtrade {padding: 0 25px 0 0;}
#sub-nav ul.fairtrade li a:hover, #sub-nav ul.fairtrade li a.active {color: #2d1686;}














#wrapper { 
width: 900px;
margin: auto;
text-align: left;
}
#logo { 
width: 300px;
height: 200px;
float: left;
}
#logo img { 
margin: 25px 0 0 0; 
float: left;
}
h1 {
text-align: right;
float: right;
width: 550px;
color: #fff;
font: bold 2.3em/0.7em  "Arial", Helvetica, sans-serif; 
margin: 50px 22px 0 0;
padding: 0 0 0 0;
}
h1 span {
font: normal 0.6em/1em  "Arial", Helvetica, sans-serif; 
}
h1 strong {
color: #03528b;
line-height: 1.5em;
}
h2 {
font: bold 2.4em/1em  "Arial", Helvetica, sans-serif; 
margin: 0 0 12px 0;
color: #03528b;
}
h3 {
color: #03528b;
font: bold 2em/1em  "Arial", Helvetica, sans-serif; 
margin: 0 0 10px 0;
}
h4 {
font: normal 1.6em/1.2em  "Arial", Helvetica, sans-serif; 
margin: 0 0 12px 0;
color: #03528b;
}
h5 {
margin: 0 1px;
background: #dbe8f1;
color: #03528b;
padding: 0 0 0 10px ;
font: bold 1.6em/1.8em  "Arial", Helvetica, sans-serif; 
border-bottom: 1px solid #799cb4;
}
h6 {
font: bold 2.4em/1.5em  "Arial", Helvetica, sans-serif; 
margin: 0 0 12px 0;
color: #03528b;
border-top: 1px solid #799cb4;
border-bottom: 1px solid #799cb4;
}
p {
font: normal 1.3em/1.3em  "Arial", Helvetica, sans-serif; 
margin: 0 0 12px 0;
}



.red {color: #cc0017;}
.orange {color: #ff7d00;}
.yellow {color: #f8b201;}
.green {color: #5dc312;}
.violet {color: #2d1686;}
.purple {color: #5f0b83;}
.magenta {color: #ff007a;}
.turquoise {color: #0076cc;}




/* columns */

ul#columns {
width: 900px;
display: inline;
margin: 0 0 25px;
float: left;
background: transparent url(images/vert-ruler.gif) 620px 0px repeat-y;
}
ul#columns li.left {
width: 600px;
float: left;
}
ul#columns li.right {
width: 260px;
float: right;
}







/* left side elements */
#products {
width: 600px;
float: left;
margin: 0 0 20px 0;
background: transparent url(images/product-box-bg.gif) top left no-repeat;
}
#products #left { 
width: 170px; 
float: left; 
}
#products #left img {
border-bottom: 1px solid #799cb4; 
background: #fff;
margin: 1px 0 0 0;
padding: 4px 4px 4px 4px; 
float: left;
border-left: 1px solid #799cb4;
}
#products #right { 
width: 430px; 
float: right;
}
#products #right #copy {height: 135px;}
#products #right h3 {
margin: 0 20px 10px 20px; 
padding: 15px 0 0 0;
-}
#products #right p {
margin: 0 20px 10px 20px; 
font: normal 1.2em/1.2em  "Arial", Helvetica, sans-serif; 
}
#products #right h5 {
border-top: 1px solid #799cb4;
font: bold 1.5em/1.2em  "Arial", Helvetica, sans-serif; 
margin: 15px 1px 0 0;
padding: 8px 20px 12px 20px;
background: #dbe8f1;
}
#products #right h5 span {
font: normal 0.8em/1.2em "Arial", Helvetica, sans-serif; 
}
#products #right h5 img {
float: right;
}
#clearall {
clear: both;
}







/* contact form elements */

table#form {
font: normal 1.3em/1.3em "Arial", Helvetica, sans-serif; 
margin: 20px 0;
text-align: left;
}
table#form td {padding: 5px 10px;}
table#form input, 
table#form textarea {
background: #fff ;
border:  1px solid #849bc7;
color: #0c2751;
padding: 3px 5px;
font: normal 1em/1.3em "Arial", Helvetica, sans-serif; 
}
table#form select {
border:  1px solid #849bc7;
color: #0c2751;
padding: 2px;
}
table#form input.send {
width: 53px;
height: 25px;
background: transparent url(images/send.gif) no-repeat;
outline: none;
border: 0;
padding: 0;
}	
table#form input.send:hover {
border: 0;
padding: 0;
background: transparent url(images/send.gif) no-repeat 0 -25px;
}













/* right side elements */
#right-box {
width: 260px;
margin: 25px 0 0 0;
border-top: 1px solid #799cb4;
background: #fff url(images/right-box-bg.gif) top left repeat-y;
}
#right-box div {
width: 260px;
padding: 0 0 20px;
background: transparent url(images/right-box-bottom.gif) bottom left no-repeat;
}
#right-box p {
margin: 10px 10px 0 10px;
color: #03528b;
 font-size: 1.2em;
}









ol#links-list {
width: 600px;
margin: 15px 0;
padding: 0;
float: left;
}
ol#links-list li {
width: 140px;
float: left;
}
ol#links-list h5 {
margin: 0 10px 10px 0;
background: #dbe8f1;
color: #03528b;
padding: 0 0 0 8px ;
font: bold 1.6em/1.4em  "Arial", Helvetica, sans-serif; 
border: 1px solid #799cb4;
}
ol#links-list h5 span {font-size: 0.9em;}
ol#links-list h5 a {text-decoration: none;color: #03528b;}
ol#links-list h5 a:hover {color: #fff; background: #007dd9;}

ol#links-list li ol#links li {
font: normal 1.3em/1.1em  "Arial", Helvetica, sans-serif; 
margin: 3px 0;
padding: 0 0 0 10px;
background: url(images/arrow.gif) 5px 5px no-repeat;
}

img.border {
background: #fff;
border: 1px solid #799cb4;
margin: 0 0 15px 0;
padding: 4px;
}











/* footer */
#footer {
width: 900px;
margin: auto;
clear: both;
border-top: 4px solid #03528b;
}
#footer p {
padding: 10px 0;
float: left;
 font-size: 1.2em;
color: #03528b;
}
#footer ul {
width: 175px;
margin: 10px 0 0 0;
float: right;
}
#footer ul li {
font: normal 1.2em/1.2em  "Arial", Helvetica, sans-serif; 
margin: 0 0 0 20px;
float: right;
}