/*
-------------------------------------------------
URI: http://www.jp-commercialkitchens.co.uk/
Created by Forte Trinity
-------------------------------------------------

CONTENTS

1: SITE MASTER SETUP (including reset from Tripoli)

2: TYPOGRAPHY/DESIGN 

3: LAYOUT
	3.1 main form
	3.2 container
	3.3 header
	3.4 content
	3.5 primary content
	3.6 secondary content
	3.7 tertiary content
	3.8 footer
	
4: GLOBAL ELEMENTS / CONTROLS
	4.1 accessibility
	
5: TEMPLATE / PAGE SPECIFIC
	
6: USEFUL CLASSES

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */
* { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal }
/* end of import */
body { height:100%; text-align:center; min-width:775px;  background:#efefef  }
ul { list-style:disc outside }
ol { list-style:decimal outside }

/* -----------------------------------------------
2. TYPOGRAPHY / DESIGN
----------------------------------------------- */

html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space }
h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 }
h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
h3 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
h4 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
h5 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
h6 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
p {  font-size:1.2em; color:#000; margin:0 0 12px 0; line-height:160% }
a { color:#3c3c3c }
a:hover { color:#747474; text-decoration:underline }

ul { margin:0 0 12px 0; font-size:1.1em }
ol { margin:0 0 12px 0; font-size:1.1em }
dl { margin:0 0 12px 0; font-size:1.1em }
hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none }
address { font-size:1.1em; color:#000; font-style:normal; margin-bottom:20px; line-height:140% }
blockqoute {  }
table { border-top:1px solid #ccc;  border-left:1px solid #ccc }
th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc }
fieldset { border:1px solid #ccc; }
legend { background:#fff; }
label { font-size:1.1em }
textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 }
img { border:none }

/* -----------------------------------------------
3. LAYOUT
----------------------------------------------- */

/* 3.1 - main form */
form.main { width:100%; height:100% }

/* 3.2 - container */
div#container { text-align:left;  margin:0 auto; width:858px; background:#fff; padding:0 20px }

/* 3.3 - wrapper */
div#wrapper {  }

/* 3.4 - header */
div#header { padding:20px 0 0 0  }
div#header img { float:left; padding-bottom:20px }

ul#contact-details { float:right; text-align:right }
ul#contact-details li { list-style:none }

/* 3.5 - content */
div#content { background:url(../images/backgrounds/content-bg.jpg) repeat-y }

/* 3.6 - primary content */
div#primary-content { width:670px; float:right; position:relative }
div#primary-content-inner { width:475px; padding:0 10px; background:#efefef }

/* 3.7 - secondary content */
div#secondary-content { width:150px; float:left; padding:15px }

/* 3.7 - tertiary content */
div#tertiary-content {  }

/* 3.8 - page banner */
div#page-banner { width:858px; height:247px }

/* 3.9 - footer */
div#footer { background:#fff; padding:10px; color:#747474; margin-top:20px }


/* -----------------------------------------------
4. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* 4.1 - accessibility */
ul#skiplinks { display:none }
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } 
ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto }
ul#text-resize { text-align:right; background:#fff; font-size:1.4em; padding:10px 0 10px 0 }
ul#text-resize li { display:inline; list-style:none }

/* 4.2 - primary navigation */
ul#primary-navigation-outer { clear:both; width:858px; }
ul#primary-navigation { clear:both; background:url(../images/backgrounds/primary-nav-bg.jpg) repeat-x; height:99px; border-top:3px solid #fff }
ul#primary-navigation li {float:left; padding:10px 14px 11px 14px; margin:0; list-style:none; border-right:1px solid #fff }
ul#primary-navigation li.last {float:left; padding:10px 15px 11px 15px; margin:0; list-style:none; border-right:none }
ul#primary-navigation li a {color:#fff; text-decoration:none; font-size:1.2em; font-weight:bold }
ul#primary-navigation li a:hover {color:#6dbfd7}

ul#primary-navigation li.shop { background:#6dbfd7; border-right:3px solid #fff; padding-bottom:13px }
ul#primary-navigation li.search { width:828px; color:#fff; font-weight:bold; float:left; padding:20px 15px 11px 15px; list-style:none; border-right:none }
ul#primary-navigation li.search label { padding:10px }
ul#primary-navigation li.search input.text { padding:10px; margin:5px 15px 5px 0; }

ul#cart-links { float:right }
ul#cart-links li { float:left; list-style:none; padding:0 0 0 10px }
ul#cart-links li a {color:#999999; text-decoration:none }
ul#cart-links li a:hover {color:#56bedc}


#primary-navigation {clear: both;} 
#primary-navigation li {position: relative; float:left;} 
/*#primary-navigation li ul {position: absolute; z-index:100; left: -158px; top: -269px; display: none; border: white 2px solid; width:858px; }*/
#primary-navigation li ul {position: absolute; z-index:100; left: -154px; top: -250px; display: none; border: white 2px solid; width:858px; height: 246px; }
#primary-navigation li a {display: block; }
#primary-navigation li a:hover { } 
#primary-navigation li ul li { border: none; padding: 5px 10px; width:122px; float:left }
#primary-navigation li:hover ul, #primary-navigation li.over ul {display: block;  font-size: 0.8em; background: #73bfd6; color: white; } 
#primary-navigation li:hover ul li:hover, #primary-navigation li.over ul li.over { background: #BDD1D6; }

/* works in ff/safari */
#primary-navigation li:hover ul li:hover ul li, #primary-navigation li.over ul li.over ul li {display: block; width:93px;} 



/* 4.3 - footer links */
ul#footer-links { float:right; list-style:none; font-size:0.9em; }
ul#footer-links li {float:left; margin:0 0 0 5px}
ul#footer-links li a { color:#747474; text-decoration:none }
ul#footer-links li a:hover {color:#c5a6cb} 
div#footer span { float:left; margin:0 0 0 0 }
div#footer span a { font-size:0.9em; color:#747474; text-decoration:none }
div#footer span a:hover {color:#c5a6cb}


/* -----------------------------------------------
5. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */

/* index page */
ul#index-contact-info { position:absolute; top:4px; right:10px }
ul#index-contact-info li { list-style:none; color:#fff; text-align:right }
ul#index-contact-info li a { color:#fff; text-decoration:none; font-weight:bold }
ul#index-contact-info li a:hover { color:#c5a6cb }

ul.side-list {}
ul.side-list li { list-style:none; padding:5px 0 }
ul.side-list li a {color:#fff; text-decoration:none; font-weight:bold }
ul.side-list li a:hover {color:#8c4996}
ul.side-list li ul { margin: 0 0 0 10px; padding: 0 }
ul.side-list li ul li { margin: 6px 0px; padding: 0 }
ul.side-list li ul li a { font-size: 0.8em }

div#products {}
div#products ul {  }
div#products ul li { position:relative; width:290px; height: 16em; padding:14px; margin:0 10px 10px 0; list-style:none; border:1px solid #d7d7d7; float:left }
div#products ul li img { float:right }
div#products ul li h2 { font-size:1.8em; color:#7abfd3; line-height: 1.0em }
div#products ul li a { background:#767676; color:#fff; text-decoration:none; font-weight:bold; padding:5px }
div#products ul li a:hover { color:#c5a6cb } 
div#products ul li .special-offers { position:absolute; bottom:10px; left:10px }
div#products ul li .price { font-size:1.4em; color:#8c4996 }

div#product-details { padding-left:15px }
div#product-details img { float: right }
div#product-details h2 { margin-top:25px }
div#product-details ul li { list-style:none; line-height:190% }
div#product-details table { width:100% }
div#product-details table th { padding:10px; background: #efeded}
div#product-details table td { padding:10px }
div#product-details table td fieldset { border: none }
div#product-details table td fieldset legend { display: none }
div#product-details table td fieldset li.submit_fldset label { display: none }
div#product-details table td fieldset li { float: left }
div#product-details table td fieldset li input[type=text] { width: 40px; margin-right: 5px }
div#product-details input { }

div.index-product-box { width:300px; float:left; border:1px solid #d7d7d7; padding:14px; margin:0 4px 4px 0 }
div.index-product-box.last { width:300px; float:left; border:1px solid #d7d7d7; padding:14px; margin:0 0 4px 0 }
div.index-product-box img { float:right }
div.index-product-box h2 { font-size:1.8em; color:#7abfd3 }
div.index-product-box a { background:#767676; color:#fff; text-decoration:none; font-weight:bold; padding:5px }
div.index-product-box a:hover { color:#c5a6cb } 

dl.index-product-box-lower { width:164px; float:left; margin-right:3px }
dl.index-product-box-lower dt { background:#7abfd3;  color:#fff; font-weight:bold; padding:9px }
dl.index-product-box-lower dd { padding:10px 18px; border:1px solid #d8d5de; margin:5px 0 }
dl.index-product-box-lower dd p { font-size:1.0em; padding:5px 0 }
dl.index-product-box-lower dd h2 { font-size:1.1em; font-weight:bold; color:#7abfd3 }
dl.index-product-box-lower dd a { display:block; color:#8e5099; font-weight:bold; display:block; background:url(../images/backgrounds/grey-arrow.jpg) no-repeat 0% 0%; margin-bottom:10px; padding-left:20px; margin-top:20px }
dl.index-product-box-lower dd a:hover { color:#747474; text-decoration:underline }

div#branding { width:814px; margin:20px auto }

h1.ttl-main { font-size:1.8em; color:#fff; background:url(../images/backgrounds/main-ttl-bg.jpg) repeat-x; padding:11px }
h2.ttl-main { font-size:1.8em; color:#fff; background:url(../images/backgrounds/main-ttl-bg.jpg) repeat-x; padding:11px }
h2.ttl-medium { font-size:1.4em; color:#7bc0d3;  padding:11px 11px 0 0 }
h3.ttl-medium { font-size:1.4em; color:#7bc0d3;  padding:11px 11px 0 0 }
h2.ttl-small { font-size:1.4em; color:#8c4996;  padding:11px 11px 11px 0; border-bottom:1px solid #af94b5 }

/* subpages */
div#subpages p { padding:0 12px }
div#subpages ul { padding:0 12px; margin-left:30px }
div#subpages ul li { padding-bottom:10px }
div#subpages h2,h3,h4,h5,h6 { padding:0 12px }

/* compliance */
div#compliance { padding:27px}

.product-list-1 { float:left; width:205px; height:18em; padding:5px; margin-bottom:40px }
.product-list-1 dt {font-size:1.4em; font-weight: bold; color:#7abfd3; line-height: 1.0em; text-align:center; margin-bottom:20px }
.product-list-1 dd { text-align:center }
.product-list-1 dd.image { }
.product-list-1 a { color:#767676;  text-decoration:none; font-weight:bold; }
.product-list-1 a:hover { color:#c5a6cb } 


#basketContents, #secpay { width: 100% }
#basketContents fieldset, #secpay fieldset { border: none }
#basketContents legend, #secpay legend { display: none }
#basketContents th, #basketContents td, #secpay th, #secpay td { padding: 4px; font-size: 1.2em;  }
#basketContents td.price, #secpay td.price  { text-align: right }
#basketContents td.edit, #basketContents th, #secpay td.edit, #secpay th { text-align: center }

#customerDetails { list-style: none; margin: 20px 0; padding: 0 }
#customerDetails li { float: left; margin-right: 10px; width: 180px; padding: 0 }
#customerDetails li h3 { font-size: 1.2em; margin: 0; padding: 0 }
#customerDetails li dl { margin: 0; padding: 0 }
#customerDetails li dt { float: left; clear: left; margin-right:5px }

div#basescript { margin:0 auto; width:838px; text-align:left }
div#basescript h1 { font-size:1.1em; color:#000; margin-top:50px }
div#basescript p { font-size:1.1em; color:#000 }

div#basewords { width:838px; margin:auto; text-align:center; color:#747474!important }

#proceed-to-payment { text-align: right }

/* -----------------------------------------------
6. USEFUL CLASSES
----------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.clr { clear:both;  }
.la { text-align:left }
.ra { text-align:right }
.ca { text-align:center }
.fl { float:left }
.fr { float:right }
.vt { vertical-align:top }
.vm { vertical-align:middle }
.vb { vertical-align:bottom }
.nb { border:0 none }
.bold-text { font-weight:bold }


h1.proj {
margin-bottom: 0;
}

.project {
width: 330px;
float: left;
border: 0;
margin: 0 0 9px 0;
position: relative;
height: 490px;
}

.lh {
margin-left: 0;
margin-right: 9px;
}

.rh {
}

.project h1 {
padding: 10px;
background: #6dbfd7;
margin: 0;
line-height: 1.5em;
}

.project img {
/*float: left;*/
margin: 5px 0 10px 0;
width: 330px;
height: 248px;
display: block;
}

.project p {
text-align: justify;
text-justify: newspaper;
}

.project .link {
position: absolute;
bottom: 0;
width: 320px;
font-size: 12px;
font-weight: bold;
margin: 0;
color: #fff;
padding: 5px;
text-align: right;
/*background: #c6a6cd;*/
border-top: 1px solid #6dbfd7;
border-bottom: 5px solid #6dbfd7;
}

.project a:link, .project a:visited {
/*color: #fff;*/
}

br.clear {
clear: both;
}

.pagenav {
display: block;
height: 1em;
margin: 5px 0; padding: 0;
text-align: right;
/*float: left;*/
}

.pagenav li { display: inline; margin: 0; padding: 0 20px; border-left: 1px solid #000; color: #ccc; }

#leftlink { border: 0; }