/* General HTML elements */
form, p, h1, h2, h3, h4, h5, h6, div, img, ul, ol, li, blockquote, dl, dt, dd { margin: 0; padding: 0; }
body { font: 62.8% Arial, Helvetica, sans-serif; background: #fff; color: #000; text-align: center; margin: 0; padding: 0; }
img { border: none; }
a { color: #006; }
a:visited { color: #009; }
a:focus { color: #00f; }
a:hover { color: #00f; }
a:active { color: #000; }
p { margin: 15px; font-size: 1.2em; }
address { margin: 15px; font-size: 1.2em; font-style: normal; }
h1 { font-size: 2em; color: #fff; background: #7900c3; font-family: Verdana, Arial, Helvetica, sans-serif; }
h1 img { display: block; }
h2 { font-size: 1.8em; margin: 15px; }
h3 { width: 329px; height: 26px; line-height: 26px; text-indent: 15px; margin: 15px; padding: 0; font-size: 1.1em; color: #fff; background: #7900c3 url("../gfx/header-background.gif") top left no-repeat; }
ul, ol { margin: 15px; font-size: 1.2em; padding-left: 2em; }
ul ul, ul ol, ol ul, ol ol { font-size: 1em; }
blockquote { font-style: italic; }
cite { font-style: normal; }
dt { font-size: 1.3em; font-weight: bold; margin: 15px 15px 0 15px; }
dd { font-size: 1.2em; margin: 0 15px 15px 15px; }

/* Useful Classes */
.left { float: left; }
.right { float: right; }
.clear_left { clear: left; }
.clear_right { clear: right; }
.clear_both { clear: both; }
.center { text-align: center; }
.error, .errors { color: #f00; }
.hide { display: none; }
strong.org a.url { text-decoration: none; color: #000; }
img.left, img.right { display: block; margin: 10px 20px; }

/* Container */
div#container { width: 726px; margin: 0 auto; background: #fff url("../gfx/schoolkids.jpg") bottom left no-repeat; }
div#container.cms { background-image: none; }
div.colour_swatch { width: 75px; height: 75px; float: right; margin: 0 10px 15px 0; border: 1px solid #000; }
span.colour_swatch { border: 1px solid #000; padding: 0 3px; margin: 0 3px; }

/* Container Inner */
div#inner_container { background: transparent url("../gfx/girl-with-bag.jpg") bottom right no-repeat; }
div#inner_container.cms { background-image: none; }
a#skip_navigation { color: #fff; text-decoration: none; display: block; padding: 2px; margin: 0; }
a#skip_navigation:focus, a#skip_navigation:hover { background: #7900c3; }
a#skip_navigation:active { color: #ff0; }

/* Main menu on left */
ul#main_menu { padding: 0; margin: 5px 0 140px 0; float: left; width: 166px; font-size: 1em; }
ul#main_menu li { padding: 0; list-style-type: none; margin: 5px 0; }
ul#main_menu li a { display: block; width: 166px; height: 26px; text-indent: 24px; text-align: left; color: #fff; font: bold 1.2em/26px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background: #7900c3 url("../gfx/button-background.gif") top left no-repeat; }
ul#main_menu li a:visited { color: #ccc; }
ul#main_menu li a:focus, ul#main_menu li a:hover { color: #ff0; background: #460070 url("../gfx/hover_button-background.gif") top left no-repeat; }
ul#main_menu li a:active { color: #f00; }

/* Second menu on right */
div#right_column { padding: 0; margin: 0; width: 166px; float: right; text-align: center; }

/* Boxes */
div.box { background: #7900c3 url("../gfx/box-background.gif") top left repeat-y; color: #fff; margin: 0; /* was 10px 0 */ padding: 0; }
div.box h2 { padding: 0; margin: 0; background: transparent; }
div.box p { padding: 0; margin: 0 5px; }
img.end { display: block; }

/* Central Content */
div#content { background: #f1e5f9; width: 370px; margin: 0 auto; text-align: left; padding: 5px 0; }
div#content.large { width: 550px; float: right; background: transparent; }
div#content.large h3 { background: transparent; padding: 0; font-size: 1.5em; margin: 15px; text-indent: 0; color: #000; width: auto; }
div#cms_content { width: 550px; margin: 0 auto; text-align: left; padding: 5px 0; float: right; }
p#content_end { height: 1px; font-size: 1px; padding: 0; margin: 0; clear: both; }

/* Latest News */
ul#latest_news { margin: 20px; padding: 0; font-size: 1em; }
ul#latest_news li { list-style-type: none; }
ul#latest_news li p { font-size: 1em; padding: 0; margin: 2px 0; }
ul#latest_news li h4 { font-size: 1.2em; padding: 0; margin: 2px 0; }
ul#latest_news li p strong { font-size: 1.2em; }
ul#latest_news li a { color: #000; }
ul#latest_news li a:visited { color: #303; }
ul#latest_news li a:focus, ul#latest_news li a:hover { color: #00f; }
ul#latest_news li a:active { color: #f00; }

/* CMS Manager Lists */
ul.manager_list { margin: 5px; padding: 0; font-size: 1em; }
ul.manager_list li { display: inline; list-style-type: none; }
ul.manager_list li a { font-size: 1.1em; line-height: 110%; float: left; text-align: center; width: 90px; height: 145px; padding: 5px 5px 0 5px; margin: 3px; border: 1px solid #000; color: #fff; background: #7900c3; text-decoration: none; }
ul.manager_list li a:visited { color: #eee; }
ul.manager_list li a:focus, ul.manager_list li a:hover { color: #7900c3; background: #fff; }
ul.manager_list li a:active { color: #f00; background: #000; }
ul.manager_list li a img { border: 1px solid #000; margin: 5px 0 0 0; }

ul.subsections { margin: 5px; padding: 0; font-size: 1em; }
ul.subsections li { display: inline; list-style-type: none; }
ul.subsections li a { font-size: 1.2em; float: left; padding: 5px ; margin: 3px 3px 10px 3px; border: 1px solid #000; color: #fff; background: #7900c3; text-decoration: none; }
ul.subsections li a:visited { color: #eee; }
ul.subsections li a:focus, ul.subsections li a:hover { color: #7900c3; background: #fff; }
ul.subsections li a:active { color: #f00; background: #000; }

/* Product Lists */
img.product_shot { margin: 0 0 15px 15px; float: right; }
ul.product_list { margin: 5px 17px; padding: 0; font-size: 1em; }
ul.product_list li { display: inline; list-style-type: none; }
ul.product_list li a { font-size: 1.1em; line-height: 110%; float: left; text-align: center; width: 90px; height: 120px; padding: 5px 5px 0 5px; margin: 4px; border: 1px solid #000; color: #fff; background: #7900c3; text-decoration: none; }
ul.product_list li a:visited { color: #fff; }
ul.product_list li a:focus, ul.product_list li a:hover { color: #000; background: #fff; }
ul.product_list li a:active { color: #f00; background: #000; }
ul.product_list li a img { border: 1px solid #000; margin: 5px 0 0 0; }

/* Forms */
form { display: inline; }
label { display: block; float: left; width: 150px; padding: 3px 5px 0 0; }
div.box label { display: block; float: none; width: auto; padding: 0; }
label.inline { display: inline; float: none; width: auto; padding: 0; }
input.button { cursor: pointer; margin: 2px; border: 1px solid #000; color: #fff; font: bold 1em Verdana, Arial, Helvetica, sans-serif; padding: 2px 4px; background: #7900c3; }
div.box input.button { border: 1px solid #fff; }
input.button:focus, input.button:hover { border: 1px solid #ff0; color: #ff0; }
input.button:active { border: 1px solid #f00; color: #f00; }
input.quantity { margin: 0; padding: 1px; font-size: 0.9em; width: 25px; text-align: center; }
input.text { margin: 0; padding: 1px; font-size: 0.9em; }
input { vertical-align: middle; }
fieldset { border: 1px solid #7900c3; margin: 10px 5px; padding: 5px 10px; clear: both; }
fieldset p { margin: 5px 0; }
legend { padding: 0 10px; font-size: 1.3em; font-weight: bold; }
select#school_selector { font-size: 1em; }

/* Tables */
table { margin: 0 0 0 15px; font-size: 1em; color: #000; border: 1px solid #000; background: #fff; }
caption { font-size: 1.2em; padding: 2px 15px; color: #000; margin: 0; text-align: left; }
th { text-align: left; padding: 2px 3px; font-size: 1.1em; }
td { text-align: center; padding: 2px 3px; font-size: 1.1em; }
thead tr, tr.sizes { background: #7900c3; color: #fff; }
tr.even, tr.quantities { /*background: #eee; background: #f1e5f9;*/ background: #faf5ff; }
tr.tax { background: #ddd; }
tr.tax th, tr.tax td { font-size: 1.3em; }
tr.pre_tax { background: #ccc; }
tr.pre_tax th, tr.pre_tax td { font-size: 1.3em; }
tr.delivery { background: #ccc; }
tr.delivery th, tr.delivery td { font-size: 1.3em; }
tr.grand_total { background: #7900c3; color: #fff; }
tr.grand_total th, tr.grand_total td { font-size: 1.8em; }

/* Footer */
p#copyright { clear: both; font-size: 1em; text-align: right; height: 45px; line-height: 70px; padding: 0 5px; margin: 0; background: #fff url("../gfx/footer-background.gif") top left repeat-x; border-top: 1px solid #fff; }