/************************************************************************



	GLOBAL CSS

	==========



	Provides all global styles for the site which more specific sections 

	can be built on using the layered css technique



	Author:		Tom Harman

				Nick Watson

				Tom Fletcher

				[www.optixsolutions.co.uk]



	Listing Order:

	==============



	Universal

	Forms

	General Structure / Layout

	Navigation Elements

	Header Elements

	Body Elements

	Footer Elements

	Messages



************************************************************************/



/***********************************************************************

	UNIVERSAL STYLES

************************************************************************/



body {

	font-size: .7em;

	background: url('../i/layout/bg.gif');

}



html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th {

	font-family: Verdana, Arial, Helvetica, sans-serif;

}



div#content ul {

	list-style-type: disc;

	list-style-position: inside;

	margin-left: 0;

	padding-left: 1em;

	text-indent: -1em;

}



a {

	color: #666;

}



div#content a {

	color: #222;

}



h1 {

	padding-top: 10px;

	color: #000033;

	font-size: 1.2em;

}



p {

	padding-top: 10px;

}



h1.rpr {

	color: #D18F2E;

	padding: 20px;

	font-size: 1.1em;

}

/***********************************************************************

	FORMS

************************************************************************/



fieldset, legend {

	border: none;

}



legend {

	background: transparent;

	font-size: 1em;

	font-weight: bold;

	margin: 1em 0;

	padding: 0 .5em;

}



label {

	float: left;

	padding: 0 1em 0 0;

	text-align: right;

}



form fieldset div {

	clear: both;

	display: block;

	margin-bottom: .5em;

	padding: 0;

}



div.submit {

	clear: both;

	text-align: center;

	width: auto;

}



div.multi input {

	border: 0;

	width: auto;

}

 

form 									{ width: 100%; }



label		 							{ float: left;	height: 22px; width: 45%; }



fieldset div input,

fieldset div select,

fieldset div textarea  			{ width: 45%; }



fieldset div input.small,

fieldset div select.small,

fieldset div textarea.small 	{ width: 25%; }



label.req {

	font-weight: bold;

}



label.req:before {

	content: "* ";

}



div.req label, div.req p		{ font-weight: bold; }



div.multi label 					{ height: 22px; }



div.req label:before, 

div.req p:before {

	content: "* ";

}



input:focus, textarea:focus {

	background: #fafafa;

	color: #000;

}



fieldset div input, 

fieldset div select, 

fieldset div textarea  {

	border: 1px solid #aaa;

	color: #333;

	font-weight: normal;

	padding: 1px;

}



div.submit input {

	background: #777;

	border: 1px solid #333;

	color: #fff;

	font-weight: bold;

	padding: 1px .7em;

	width: auto;

}

form#search-box fieldset {

	margin-top: 20px;

	margin-left: 6px;

}

form#search-box fieldset input#search{

	width: 100px;

	border: 1px solid #CCC;

}

form#search-box fieldset input#search-submit {

	width: 52px;

	postion: absolute;

	text-indent: -999em;

	letter-spacing: -133px;

	border: none;

	background: url('../i/layout/search.gif') no-repeat;

}

select#category-select {

	margin-left: 7px;

	margin-top: 12px;

	width: 145px;

	border: 1px solid #CCC;

}

form#mailing-box fieldset {

	margin-top: 30px;

	margin-left: 6px;

}

form#mailing-box fieldset input#email{

	width: 100px;

	border: 1px solid #CCC;

}

form#mailing-box fieldset input#mailing-submit {

	width: 40px;

	postion: absolute;

	text-indent: -999em;

	letter-spacing: -133px;

	border: none;

	background: url('../i/layout/join.gif') no-repeat;

}

/***********************************************************************

	GENERAL STRUCTURE/LAYOUT

************************************************************************/

div.container{

	width: 766px;

	margin: 0 auto;

}

div.header{

	width: 766px;

}

div.body{

	width: 766px;

	background: url(../i/layout/body-repeat.jpg) repeat-y;

}

div.footer{

	margin: 0 auto;

	width: 766px;

}

div.footer ul{

	display: inline;

}

div.footer ul li{

	float: left;

	margin-left: 15px;

	color: #AAA;

	border-left: 1px dotted #AAA;

	padding-left: 5px;

	font-size: 0.9em;

}

div.footer ul.footright{

	float: right;

	margin-right: 30px;

}

ul#breadcrumb {

	margin-top: 10px;

	height: 20px;

}

ul#breadcrumb li {

	list-style: none;

	display: inline;

	margin-right: 10px;

	font-size: 0.9em;

}

ul#breadcrumb li.current a {

	color: #FF6600;

}

div#products {

	padding-top: 20px;

}

div#products div.product {

	margin-left: 10px;

	margin-bottom: 10px;

	width: 510px;

	height: 65px;

	float: left;

}

div#products div.productitem {

	margin-left: 10px;

	width: 510px;

	height: 30px;

	float: left;

}

div#products div.productheader {

	margin-left: 10px;

	margin-bottom: 10px;

	width: 510px;

	background: #EEE;

	height: 25px;

	float: left;

}

* html div#products div.productheader {

	margin-left: -10px;

}

div#products div.productheader2 {

	margin-left: 10px;

	margin-bottom: 0px;

	margin-top: 10px;

	width: 510px;

	background: #EEE;

	height: 25px;

	float: left;

}

* html div#products div.productheader2 {

	margin-left: -10px;

}

div#products div.productfooter {

	margin-left: 10px;

	margin-bottom: 10px;

	width: 510px;

	font-weight: bold;

	height: 25px;

	float: left;

}

* html div#products div.productfooter {

	margin-left: -10px;

}

div#products div.productfooter2 {

	margin-left: 10px;

	width: 510px;

	font-weight: bold;

	height: 25px;

	float: left;

}

* html div#products div.productfooter2 {

	margin-left: -10px;

}

* html div#products div.product {

	margin-left: -10px;

}

* html div#products div.productitem {

	margin-left: -10px;

}

div.prodimage {

	position: absolute;

	width: 60px;

	height: 65px;

}

div.product-description {

	position: absolute;

	margin-left: 65px;

	width: 220px;

}

div.productitem div.product-description h1 {

	padding-top: 0px;

}

div.productitem div.product-description p.cartattributes {

	margin-top: -8px;

}

div.attributelist {

	position: absolute;

	margin-left: 295px;

	width: 135px;

	margin-top: 5px;

	padding-left: 5px;

	text-align: center;

}

div#products div.product div.attributelist div.attributes div.attrselect img {

	display: inline;

	float: none;

	margin-top: 2px;

	cursor: pointer;

}

span.attrtitle {

	color: #555;

}

input.quantity {

	width: 20px;

	padding-left: 4px;

	border: 1px solid #CCC;

	margin-top: 5px;

}

input.cartsubmit {

	width: 25px;

	height: 18px;

	background: url('../i/layout/addtocart.gif') no-repeat;

	border: none;

	text-indent: -999em;

	letter-spacing: -133px;

	cursor: pointer;

}

div.productprice {

	position: absolute;

	margin-top: 5px;

	margin-left: 450px;

}

div.productprice span.exvat {

	font-size: 1.1em;

	font-weight: bold;

	color: #CC6600;

}

div.productprice span.incvat {

	color: #666;

	font-size: 0.9em;

}

.tooltip{

	width: 400px;

	color:#000;

	text-decoration:justify;

}



.tooltip img{

	float: left;

	padding-right: 5px;

	padding-bottom: 2px;

}



.tooltip span.top{

	padding:30px 8px 5px;

    background: url(../i/layout/bt.gif) no-repeat top;

}



.tooltip b.bottom{

	padding: 30px 8px 0;

    background: url(../i/layout/bt.gif) no-repeat bottom;

}

input#checkoutlink {

	float: right;

	margin-bottom: 10px;

	border: 1px dashed #FF6600;

	font-weight: bold;

	padding: 10px;

	background: #EAF2FF;

	cursor: pointer;

}

input#checkoutlink:hover {

	background: #AFD7FE;

}

form#payment {

	float: right;

	width: 350px;

	padding-top: 5px;

	padding-bottom: 15px;

	margin-bottom: 10px;

}

form#payment fieldset {

	background: #EAF2FF;

}

form#payment fieldset label {

	margin-top: 8px;

	clear: both;

}

form#payment fieldset input {

	height: 19px;

}

form#payment fieldset input, form#payment fieldset textarea {

	margin-top: 10px;

	width: 150px;

	background: #F0F8FF;

	font-size: 1em;

	border: 1px solid #85ADEB;

}

form#payment fieldset input#submit {

	background: #AFD7FE;

	padding: 10px;

	font-weight: bold;

	height: 35px;

	float: right;

	margin-bottom: 10px;

	margin-right: 29px;

}

form#payment fieldset span.error {

	margin-bottom: 10px;

	margin-right: 20px;

	float: right;

}

form#payment img {

	float: right;

}

form#payment fieldset textarea {

	overflow: auto;

}

form#payment fieldset input.warning, form#payment fieldset textarea.warning {

	background: #FDB8B0 url('../i/layout/error.jpg') top right no-repeat;

}

form#payment fieldset input.normal, form#payment fieldset textarea.normal {

	background: #F0F8FF;

}

/***********************************************************************

	HEADER ELEMENTS

************************************************************************/

div.header-top{

	width: 766px;

	height: 103px;

}

div.header-logo{

	width: 291px;

	height: 103px;

	float: left;

	background: url(../i/layout/header-logo.jpg) no-repeat;

}

div.header-logo-bowling{

	width: 291px;

	height: 103px;

	float: left;

	background: url(../i/layout/header-logo-bowling.jpg) no-repeat;

}

div.header-logo-plain{

	width: 291px;

	height: 103px;

	float: left;

	background: url(../i/layout/header-logo-plain.jpg) no-repeat;

}

div.header-image, div.header-bowling-image{

	width: 475px;

	height: 103px;

	float: right;

}

div.header-image{

	background: url(../i/layout/header-image.jpg) no-repeat;

}

div.header-bowling-image{

	background: url(../i/layout/header-bowling-image.jpg) no-repeat;

}

div.header-nav{

	width: 766px;

	height: 47px;

	background: url(../i/layout/header-nav.gif) no-repeat;

}

div.header-nav-clothing{

	width: 766px;

	height: 47px;

	background: url(../i/layout/header-nav-clothing.gif) no-repeat;

}

div.header-nav-bowling{

	width: 766px;

	height: 47px;

	background: url(../i/layout/header-nav-bowling.gif) no-repeat;

}

ul.product-list li.sub {

	list-style: none;

}

ul.product-list li.sub ul li {

	list-style: none;

	border-bottom: none;

	margin-left: 0px;

}

ul.product-list li.sub ul li a {

	color: #537DAC;

}

div.nav div.nav-middle ul.product-list li ul li.subactive a {

	color: #FF6600;

}

h1.random{

	padding-bottom: 20px;

	color: #537DAC;

}

ul.mainsubs li {

	list-style: none;

	padding-left: 20px;

	padding-top: 5px;

	padding-bottom: 5px;

	border-bottom: 1px dotted #999;

}

/***********************************************************************

	BODY ELEMENTS

************************************************************************/

div.body-header{

	width: 766px;

	height: 72px;

	background: url(../i/layout/body-header.jpg) no-repeat;

}



div.footer{

	width: 766px;

	height: 33px;

	background: url(../i/layout/body-bottom.jpg) no-repeat;

}



div#content {

	margin-left: 210px;

	width: 520px;

	color: #666;

}

div#accessibility {

	line-height: 16px;

	text-align: justify;

}

div#accessibility h1 {

	padding-bottom: 10px;

}

div#cart {

	float: right;

	margin-top: 40px;

	margin-right: 20px;

	font-size: 0.9em;

	color: #666;

}

* html div#cart {

	margin-right: 10px;

}

div#cart span {

	color: #FF6600;

}

div#cart a{

	position: absolute;

	margin-top: -21px;

	margin-left: 176px;

	width: 95px;

	height: 17px;

	letter-spacing: -133px;

	text-indent: -999em;

}

p.cartattributes{

	font-size: 0.9em;

	color: #999;

}

span.minus a {

	text-indent: -999em;

	letter-spacing: -133px;

	background: url('../i/layout/minus.gif') no-repeat;

	width: 16px;

	height: 16px;

	display: block;

	float: left;

	margin-right: -50px;

	margin-left: 40px;

}

span.plus a {

	text-indent: -999em;

	letter-spacing: -133px;

	background: url('../i/layout/plus.gif') no-repeat;

	width: 16px;

	height: 16px;

	display: block;

	margin-left: -20px;

	margin-right: 30px;

	margin-top: -13px;

	float: right;

}

* html span.plus a {

	margin-right: 10px;

}

* html span.minus a {

	margin-left: 20px;

}

* html span.quantity {

	margin-left: -40px;

}

/***********************************************************************

	NAVIGATION

************************************************************************/

div.nav-one ul li, div.shops ul li{

	display: inline;

}

div.nav-one ul{

	margin-left: 20px;

	margin-top: 18px;

	float: left;

}

div.nav-one ul li a, div.shops ul li a{

	float: left;

	text-indent: -999em;

	letter-spacing: -133px;

	margin-left: 15px;

}

div.nav-one ul li#home a{

	width: 29px;

	height: 10px;

	background: url('../i/layout/nav-home.gif') no-repeat;

}

div.nav-one ul li#aboutus a{

	width: 52px;

	height: 10px;

	background: url('../i/layout/nav-aboutus.gif') no-repeat;

}

div.nav-one ul li#embroidery a{

	width: 65px;

	height: 10px;

	background: url('../i/layout/nav-embroidery.gif') no-repeat;

}

div.nav-one ul li#contactus a{

	width: 52px;

	height: 10px;

	background: url('../i/layout/nav-contactus.gif') no-repeat;

}

div.shops ul{

	margin-top: 18px;

	float: right;

	margin-right: 20px;

}

div.shops ul li#onlineshop a{

	width: 80px;

	height: 12px;

	background: url('../i/layout/nav-onlineshop.gif') no-repeat;

}

div.shops ul li#clothing a{

	width: 53px;

	height: 12px;

	background: url('../i/layout/nav-clothing.gif') no-repeat;

}

div.shops ul li#bowling a{

	width: 97px;

	height: 12px;

	background: url('../i/layout/nav-bowling.gif') no-repeat;

}

div.shops ul li#clothing-clothing a{

	width: 53px;

	height: 12px;

	background: url('../i/layout/nav-clothing-active.gif') no-repeat;

}

div.shops ul li#bowling-bowling a{

	width: 97px;

	height: 12px;

	background: url('../i/layout/nav-bowling-active.gif') no-repeat;

}

div.left-nav{

	width: 185px;

	float: left;

}

div.nav{

	margin-left: 15px;

	margin-top: 10px;

	width: 185px;

}

div.nav-top{

	width: 185px;

	height: 12px;

	background: url(../i/layout/panel-top.jpg) no-repeat;

}

div.nav-middle{

	width: 185px;

	padding-left: 10px;

	background: url(../i/layout/panel-repeat.jpg) repeat-y;	

}

div.nav-bottom{

	width: 185px;

	height: 11px;

	background: url(../i/layout/panel-bottom.jpg) no-repeat;

}

div.spacer {

	height: 10px;

	clear: both;

}

ul.gender {

	margin-left: 15px;

	height: 18px;

}

ul.gender li {

	float: left;

}

ul.gender li a{

	display: block;

	text-indent: -999em;

	letter-spacing: -133px;

}

ul.gender li#mens-active a {

	width: 37px;

	height: 18px;

	background: url('../i/layout/mens-active.gif') no-repeat;

}

ul.gender li#mens-inactive a {

	width: 37px;

	height: 18px;

	background: url('../i/layout/mens-inactive.gif') no-repeat;

}

ul.gender li#womens-inactive a {

	width: 100px;

	height: 18px;

	background: url('../i/layout/womens-inactive.gif') no-repeat;

}

ul.gender li#womens-active a {

	width: 100px;

	height: 18px;

	background: url('../i/layout/womens-active.gif') no-repeat;

}

ul.product-list {

	margin-top: 5px;

	width: 140px;

	margin-left: 10px;

}

ul.product-list li {

	list-style-image: url('../i/layout/bullet.gif');

	margin-left: 10px;

	padding-top: 3px;

	padding-bottom: 3px;

	border-bottom: 1px dotted #999;

}

ul.product-list li.bulactive{

	list-style-image: url('../i/layout/bulletactive.gif');

}

div#cards {

	background: url('../i/layout/cards.gif') top no-repeat;

	color: #999;

	width: 140px;

	height: 50px;

	margin-top: 10px;

	padding-top: 60px;

	text-align: center;

	margin-left: 10px;

	font-size: 0.9em;

}

div.mailing-list {

	background: url('../i/layout/join-mailing-list.gif') 5px 0px no-repeat ;

	width: 165px;

}

div.logo-phone {

	background: url('../i/layout/pinpoint.gif') top left no-repeat;

	margin-top: 20px;

	margin-left: 20px;

	padding-top: 35px;

	padding-left: 15px;

	height: 54px;

	text-align: left;

	width: 150px;

	font-size: 0.9em;

	color: #999;

}

img.emb-im {

	float: right;

	margin-left: 10px;

	margin-bottom: 10px;

}

img.bni-im {

	float: left;

	margin-right: 10px;

	margin-top: 10px;

}

/***********************************************************************

	FOOTER ELEMENTS

************************************************************************/



/***********************************************************************

	MESSAGES

************************************************************************/



.error, .notice, .message { 

	color: #b22;

	font-weight: bold;

}



.error ol li {

	font-weight: normal;

	list-style-type: lower-roman;

	list-style-position: inside;

	margin-left: 0;

	padding-left: 1em;

	text-indent: 1em;

}