/*
Main body elements - font, size, margin, background, etc
*/
body {
/* ------- MAIN BACKGROUND COLOUR OF SITE ------- */
	background-color:#333333;
/* ------- FONT COLOUR OF NON CONTENT PARTS OF SITE ------- */
	color:#FFFFFF;
	margin:0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
}
/*
Links: colour, weight, no underline
*/
a {
	color: #FF0000;
	font-weight: bold;
	text-decoration: none;
}
/*
Links: change colour when hover
*/
a:hover {
	color: #000000;
	text-decoration: none;
}
/*
The little colour swatch icons
*/
a.icon {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}
a.icon:hover {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
/*
details of headline at top of page
*/
h1.headline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #FFFFFF;
	background-color: #FF0000;
	font-weight: bold;
	display:inline;
	padding: 3px;
}
/*
boxed headings at the top of the sidebars (our t-shirts, shopping basket, bestsellers)
*/
.sidebarheaderleft {
	background-color: #990000; 
	padding: 5px; 
	margin-right: 20px;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: bold;
}
.sidebarheaderright {
	background-color: #990000; 
	padding: 5px; 
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: bold;
}
/*
div box for social networking buttons
*/
.socialnetwork {
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 5px;
}
/*
sub headers on other pages - terms and conditions
*/
h2 {
/* ------- FONT COLOUR FOR PAGE SUBHEADS ------- */
	color: #330000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}
/*
details of subheadline below headline
*/
h2.headline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #ffffff;
	background-color: #000000;
	font-weight: bold;
	display:inline;
	padding: 3px;
}
/*
headlines - all pages
*/
.headertitle {
	margin-bottom:0.3em;
	line-height:1.7em;
}
/*
main page wrapper - sets width, etc - all pages
*/
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 960px;
	position: relative;
	background-image: url(/images/columns.jpg);
}
/*
page header margins and background
*/
#header {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
/* ------- HEADER BACKGROUND COLOUR - MATCHES BACKGROUND COLOUR OF PAGE ------- */
	background: #333333;
	border-bottom: 5px solid #ff0000;
}
/*
left sidebar
*/
#side-a {
	float: left;
	width: 155px;
	padding-right: 5px;
/* ------- LEFT COLUMN BACKGROUND COLOUR - MATCHES BACKGROUND COLOUR OF PAGE ------- */
	background: #333333;
}
/*
right sidebar
*/
#side-b {
	float: right;
	width: 160px;
/* ------- RIGHT COLUMN BACKGROUND COLOUR - MATCHES BACKGROUND COLOUR OF PAGE ------- */
	background: #333333;
}
/*
fake columns
*/
#container {
}
/*
main content part of page
*/
#content { 
	float: left;
/*	width: 65%;*/
	width: 630px;
	background: #ffffff;
	color:#000000;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 5px;
	padding-right: 5px;
}
/*
footer at bottom of page
*/
#footer {
	clear: both;
/* ------- FOOTER BACKGROUND COLOUR - MATCHES BACKGROUND COLOUR OF PAGE ------- */
	background: #333333;
	padding-top: 5px;
	border-top: 5px solid #ff0000;
}
/*
links outside main content area
*/
.templatelinks {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
}
/*
links outside main content area - hover property
*/
.templatelinks:hover {
	color: #FF0000;
}
/*
text at top left of front page - front page
*/
#fronttext {
	padding: 5px;
	width: 290px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}
/*
Titles at top of boxes on front page
*/
.frontsubtitle {
	text-align:center;
	font-size:1.1em;
	padding-bottom:8px;
	padding-top:8px;
	font-weight:bold;
	border-bottom: 3px solid #dedede;
	border-radius: 15px 15px 0px 0px; 
	-moz-border-radius: 15px 15px 0px 0px; 
	-webkit-border-radius: 15px 15px 0px 0px;
	color:#FFF;
	background:#333;
	-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
}
/*
random t-shirt picture on right of front page - front page
*/
#frontrandompic {
	padding: 5px;
	width: 300px;
	margin-left: 5px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
	margin-top: 10px;
}
/*
photograph on bottom left of front page - front page
*/
#frontphoto {
	padding: 5px;
	margin-top: 5px;
	width: 180px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
	min-height: 430px;
}
/*
random t-shirt designs at bottom right of front page - front page
*/
#frontboxpics {
	padding: 5px;
	margin-top: 5px;
	width: 600px;
	margin-left: 5px;
	float: left;
	min-height: 430px;
}
#frontboxgrad {
	min-height: 430px;
	background: rgb(222,222,222); 
	background: -moz-linear-gradient(top, rgba(222,222,222,1) 9%, rgba(222,222,222,1) 27%, rgba(255,255,255,1) 82%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(9%,rgba(222,222,222,1)), color-stop(27%,rgba(222,222,222,1)), color-stop(82%,rgba(255,255,255,1))); 
	background: -webkit-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	background: -o-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	background: -ms-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#ffffff',GradientType=0 ); 
	background: linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
}
/*
------- OVERLAID CAPTIONS - FRONT PAGE -------
*/
.image-unit {
	float:left; /* necessary if you wish to have text wrap along the right of this caption/image block */
	width:185px; /* set to the width of the image, or greater. This implies that you will have a consistent sizing convention for these images. */
	padding-left: 10px;
	padding-top:5px;
}
.image-unit .image {
	display:block;
	height:120px;
	width:180px;
	padding: 5px;
}
.image-unit a.num-links {
	background-color:#000000; /* This is the background color of the caption strip */
	color:#ffffff; /* font-color */
	margin-top:-135px; /* This pulls the caption up. If you apply position:relative to .image-unit and .image, you can see the effects of this margin-top are more evident.*/
	padding:1px 0 0px 5px;
	position:absolute; /* pulls the caption out of the document flow, and allows your element to be re-positioned with regard to its parent box (in this case, .image-unit)*/
	width:140px; /* again, a variant dimension based off of the width of the image */
	opacity: 0.40;
	filter: alpha(opacity=40);
}
.image-unit a.num-links:hover{
	background-color:#ff0000;
	color:#ffffff;
	opacity: 1;
	filter: alpha(opacity=100);
}
/*
------- END OVERLAID CAPTIONS - FRONT PAGE -------
*/

/*
------- OVERLAID CAPTIONS - DESIGN PAGE -------
*/

.image-unit-formats {
	float:left; /* necessary if you wish to have text wrap along the right of this caption/image block */
	width:40px; /* set to the width of the image, or greater. This implies that you will have a consistent sizing convention for these images. */
}
.image-unit-formats .image-format {
	display:block;
	height:20px;
	width:40px;
	padding: 5px;
}
.image-unit-format-img {
	border: 1px solid #000000;
}
.image-unit-formats a.num-links-formats {
	background-color:#000000;
	color:#ffffff;
	margin-top:-40px;
	padding:1px 0 0px 5px;
	position:absolute;
	width:50px;
	font-size: 0.7em;
	opacity: 0.02;
	filter: alpha(opacity=2);
}
.image-unit-formats a.num-links-formats:hover{
	background-color:#ff0000;
	color:#ffffff;
	opacity: 1;
	filter: alpha(opacity=100);
}
/*
------- END OVERLAID CAPTIONS - DESIGN PAGE -------
*/


/*
putting images to the left of text on the catalogue page - catalogue page
*/
.leftimg{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
/*
clearing floated divs to subsequent content appears below. - catalogue page
*/
div.spacer {
	clear: both;
}
/*
The titles of categories. on the category index page - category page
*/
.cataloguecategory {
	color: #990000;
	line-height: 20px;
	font-size: 1em;
}
/*
Placing thumbnails floated left with text below - category page
*/
div.float {
	float: left;
	padding: 5px;
	text-align: center;
	width: 190px;
	height: 150px;
}
/*
div containing picture of design - 300x300px - design page
*/
#designimage {
	position: relative;
	padding: 5px;
	width: 300px;
	float: left;
	text-align:center;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}
/*
picture of design - 300x300px - design page
*/
#designimage img {
	display: block;
}
/*
description of design - design page
*/
#designdescription {
	padding: 5px;
	width: 295px;
	margin-left: 5px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}
/*
container block containing available formats and photo - design page
*/
#designavailable {
	margin-top: 5px;
	padding: 5px;
	width: 610px;
}
/*
block containing photo - design page
*/
#designphoto {
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
	margin-left: 5px;
}
/*
block containing add to basket form - designformat page
*/
#orderform {
	padding: 5px;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
	margin: 5px;
	float: left;
	border-width: 1px;
	border-style:dotted;
	border-color:#FF0000;
	width: 290px;
/*	width: 45%;*/
}
/*
block containing format details - designformat page
*/
#format_blurb {
	margin-top: 5px;
	margin-left: 15px;
	padding: 5px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}
/*
formatting row in add to basket form - designformat page
*/
div.row {
  	clear: both;
  	padding-top: 5px;
}
/*
each of the item labels in add to basket form - designformat page
*/
div.row span.label {
  	float: left;
  	width: 80px;
  	text-align: right;
	padding-right: 10px;
}
/*
option form fields in basket form - designformat page
*/
div.row span.formw {
  	text-align: left;
}
/*
block also liked items - design and design formatpage
*/
#alsoliked {
	margin-top: 5px;
	padding: 5px;
	width: 610px;
}
/*
block containing user picturea - design page
*/
#designcustpics {
	margin-top: 5px;
	padding: 5px;
	width: 610px;
	overflow-x: auto;
}
/*
form buttons - basket and checkout pages
*/
input.btn{
	font-family:'trebuchet ms',helvetica,sans-serif;
	font-size: 90%;
	font-weight:bold;
	border: 1px solid maroon;
	background-color: red;
	border-radius: 4px;
	box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
	-o-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
	-webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
	-moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
	color: white;
	text-shadow: 0 1px 1px black;
	padding: 2px 8px;
}
/*
form buttons - basket and checkout pages
*/
input.wishbtn{
	font-family:'trebuchet ms',helvetica,sans-serif;
	font-size: 90%;
	font-weight:bold;
	border: 1px solid #8ec1da;
	background-color: #ddeef6;
	border-radius: 4px;
	box-shadow: inset 0 1px 3px #fff, inset 0 -5px 15px #cbe6f2, 0 2px 1px #8ec1da;
	-o-box-shadow: inset 0 1px 3px #fff, inset 0 -5px 15px #cbe6f2, 0 2px 1px #8ec1da;
	-webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -5px 15px #cbe6f2, 0 2px 1px #8ec1da;
	-moz-box-shadow: inset 0 1px 3px #fff, inset 0 -5px 15px #cbe6f2, 0 2px 1px #8ec1da;
	color: #3985a8;
	text-shadow: 0 1px 1px #fff;
	padding: 2px 8px;
}
/*
Box around affiliate sign-in
*/
div.affiliatebox {
	float:left;
	margin: 10px;
	padding: 10px;
	width: 260px;
	height: 100px;
	border-color:#FF0000;
	border-style:solid;
	border-width: 2px;
}
/*
Formatting text to small red capitals for use on checkout pages
*/
.smallcapsred {
	color: #FF0000;
	font-variant: small-caps;
	text-align:center;
}
/*
position of the search box
*/
#search {
	position:absolute;
	right:0px;
	top:20px;
}
/*
the sizing for the "show us your shirts" div
*/
div.showusfloat {
	float: left;
	padding: 10px;
	text-align: center;
	width: 180px;
	height: 210px;
	overflow:auto;
}
/*
the basket contents on the right sidebar
*/
.rightbasket {
	padding-top:0.2em;
	padding-bottom:0.2em;
	margin-left: 20px;
	border-bottom: 1px solid #999999;
}
/*
for hidden text (screen readers)
*/
.hidden {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/*
---------------------- Thumbnails for Bestsellers ----------------------
*/

.bestthumbnail{
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	position: relative;
	z-index: 0;
}

.bestthumbnail:hover{
	color: #FF0000;
	background-color: transparent;
	z-index: 50;
}

.bestthumbnail span{ /*CSS for enlarged image*/
	position: absolute;
/* ------- MAIN BACKGROUND COLOUR OF SITE ------- */
	background-color: #333333;
	padding: 3px;
	left: -1000px;
	border: 2px solid #990000;
	visibility: hidden;
	color: #ffffff;
	text-decoration: none;
}

.bestthumbnail span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
}

.bestthumbnail:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: 0;
	left: -220px; /*position where enlarged image should offset horizontally */
}
/*
---------------------- End Thumbnails for Bestsellers ----------------------
*/

/*
---------------------- This is for the ticker on the front screen ----------------------
*/
.newsticker-jcarousellite { 
	width:300px;
	background: rgb(222,222,222); 
	background: -moz-linear-gradient(top, rgba(222,222,222,1) 9%, rgba(222,222,222,1) 27%, rgba(255,255,255,1) 82%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(9%,rgba(222,222,222,1)), color-stop(27%,rgba(222,222,222,1)), color-stop(82%,rgba(255,255,255,1))); 
	background: -webkit-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	background: -o-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	background: -ms-linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#ffffff',GradientType=0 ); 
	background: linear-gradient(top, rgba(222,222,222,1) 9%,rgba(222,222,222,1) 27%,rgba(255,255,255,1) 82%); 
	-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
}
.newsticker-jcarousellite ul li{ 
	list-style:none; 
	display:block; 
	padding-bottom:1px; 
	margin-bottom:5px; 
}
.newsticker-jcarousellite .thumbnail { 
	float:left; 
	width:120px; 
}
.newsticker-jcarousellite .info { 
	float:right; 
	width:180px; 
}
.newsticker-jcarousellite .info span.cat { 
	display: block; 
	font-size:10px; 
	color:#808080; 
}
.clear { 
	clear: both; 
}

/*
---------------------- CSS For Admin Pages ----------------------
*/
div.admincontent {
	margin: 20px;
	padding: 20px;
	background-color:#FFFFFF;
	color:#000000;
}
div.adminitem {
	padding-bottom: 10px;
	padding-top: 0px;
	border-bottom-color:#FF0000;
	border-bottom-style:dashed;
	border-bottom-width:1px;
}
div.column1 {
	float: left;
	width: 200px;
}
div.column2 {
	float: left;
	width: 200px;
}
div.column3 {
	float: left;
	width: 200px;
}
div.column3long {
	float: left;
	width: 600px;
}
div.column4 {
	float: left;
	width: 200px;
}
div.column5 {
	float: left;
	width: 200px;
}
div.column1wide {
	float: left;
	width: 250px;
}
div.column2wide {
	float: left;
	width: 250px;
}
div.column3wide {
	float: left;
	width: 250px;
}
div.column4wide {
	float: left;
	width: 250px;
}
/*
---------------------- End CSS For Admin Pages ----------------------
*/