/***********************************************************
Global CSS for Smiggle
***********************************************************/

@import "/css/reset.css";
@import "/css/header.css";
@import "/css/footer.css";
@import "/css/forms.css";
@import "/css/navs.css";


/* Global Tags 
**************************/

html, body { width:100%; height:100%; }

body {
	margin: 0;
	font-size: 80%;
	/*font-family: "Helvetica Light", Helvetica, Arial, sans-serif;*/
	font-family: Arial, sans-serif;
	background: white url(/images/misc/background_global.jpg) center 28px repeat-x;
	color: #666;
}

@font-face {
	font-family: 'CernshandwritingRegular';
	src: url('/fonts/cerns_handwriting-webfont.eot');
	src: local('?'), url('/fonts/cerns_handwriting-webfont.woff') format('woff'), url('/fonts/cerns_handwriting-webfont.ttf') format('truetype'), url('/fonts/cerns_handwriting-webfont.svg#webfontBhibddOJ') format('svg');
	font-weight: normal;
	font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 0.3em 0;
	font-weight: bold;
	color: black;
}

h1 {
	width: 548px;
	margin: -25px 0 0.6em -30px;
	padding: 0.5em 0.8em;
	font-size: 200%;
	text-align: left;
	font-weight: normal;
	color: white;
	background: #4dc5e2;
	/*border: solid 1px #23a7c7;*/
	border: solid 1px #CCC;
	border-radius: 10px; behavior: url(/css/ie-css3.htc); -moz-border-radius: 10px; -webkit-border-radius: 10px;
	_border-radius: none; /* turn off the border radius for IE6 here, causes bugs */
	position: relative;
	z-index: 1;
}
body.account #content h1, 
body.checkout #content h1, 
body.fun #content h1 {
	width: auto;
	_height:70px;
	margin: 0 0 1.3em 0;
	padding: 0;
	font-size: 240%;
	color: black;
	background: none;
	border: none;
	border-radius: 0; behavior: none; -moz-border-radius: 0; -webkit-border-radius: 0;
	display: block;
	font-family: 'CernshandwritingRegular', Arial, sans-serif;
}
body.account #content h1 img, 
body.checkout #content h1 img,
body.fun #content h1 img { margin-bottom:-25px; padding-right:15px; }



h2 { font-size: 130%; }
h3 { font-size: 110%; }


p {
	padding-bottom: 1em;
}

ul {
	padding-left: 2em;
}

ol {
	margin: 0 1em 1.5em 2.2em;
}

li {
	
}

a {
	color: #333;
	text-decoration: underline;
}
h1 a { color: white; }
table a { color: #0078ca !important; }

a:hover, a:focus, a:active {
	color: #4dc5e2;
	text-decoration: none;
	outline: none;
}
h1 a:hover, h1 a:focus, h1 a:active { color: white; }

a img {
	border: none;
}

/* A boxlink is <a> tag which contains multiple elements */
.boxlink {
	display: block;
	border: dashed 1px #d1d7e0;
	background: #f3f4f6;
}
.boxlink:hover, .boxlink:focus, .boxlink:active {
	border: solid 1px #d1d7e0;
	background: #edf1f6;
	text-decoration: none;
}


/* Use this tag for special words which needs capitalisation,  */
/* add a title to further explain its meaning.   */
acronym, abbr {
	text-transform: none;
	/*cursor: help;*/
	border-bottom: dotted 1px #DDD;
}

hr {
	border: none;
	border-top: solid 1px #71a7cd;
	*border-bottom: solid 1px white;
	margin: 1em 2em;
	*margin: 0.2em 2em;
}



table {
	margin: 0 4% 1.5em 4%;
	width: 90%;
	padding-bottom: 1em;
	background: url(/images/misc/table_border_horiz.gif) bottom left repeat-x;
	border: none;
	color: #0078ca;
	/*font-weight: bold;*/
	*position: relative;
}

table caption {
	text-align: left;
	font-size: 110%;
	margin: 1.2em 0 0.5em 1.5em;
	*padding: 0 0 0.5em 1.5em;
	font-weight: bold;
	color: #0078ca;
}

table thead tr {
	background: #333;
	height: 51px;
	border: solid 1px #CCC;
}
table thead th {
	text-align: left;
	color: white;
	background: url(/images/misc/table_head_leftend.gif) right no-repeat;
	vertical-align: middle;
	padding: 0.2em 1.5em;
}
table thead th:first-child, table thead th.first-child { background: url(/images/misc/table_head_leftend.gif) left no-repeat; }
table thead th:last-child, table thead th.last-child { background: url(/images/misc/table_head_rightend.gif) right no-repeat; }

table thead th:first-child, table tbody td:first-child,
table thead th.first-child, table tbody td.first-child{ padding-left: 2em; }
table thead th:last-child, table tbody td:last-child,
table thead th.last-child, table tbody td.last-child{ padding-right: 2em; }

table tr.last-child td { *padding-bottom: 1em; }

table tbody td {
	margin: 0;
	padding: 0.2em 0.5em;
	vertical-align: top;
}
table tbody td a { color: #0078ca; }
table tbody td.tablestripe { background: #edf7fd;}
/*table tbody tr:hover, table tbody tr:hover td.tablestripe { background: #f0f8fd; }*/
table td.currency { text-align: right; white-space: nowrap; }

/*table.reciept table {
	_width: 97.5%;
}*/


/* Wrapper classes
************************************/
.wrapper {
	margin: 0 auto;
	width: 980px;
	text-align: center;
	/*border: solid 1px yellow;*/
	z-index: 0;
	min-height: 650px;
	_height: 650px;
}

#content {
	width: 548px;
	margin: 110px 0 0 190px;
	*margin-top: 110px;
	_margin-left: 185px;
	padding: 0 1.5em 1em 1.5em;
	_padding-right: 0.5em;
	text-align: left;
	background: white;
	border: solid 1px #ccc;
	border-radius: 10px; behavior: url(/css/ie-css3.htc); -moz-border-radius: 10px; -webkit-border-radius: 10px;
	_border-radius: none; /* turn off the border radius for IE6 here, causes bugs */
}

body.account #content,
body.checkout #content,
body.fun #content {
	width: 793px;
	padding: 0;
	margin: 20px 0 0 185px;
	_margin-left: 180px;
	border-radius: none; behavior: none;  -moz-border-radius: 0; -webkit-border-radius: 0;
	border: none;
	background: transparent;
	
}

body.account #content .middle,
body.checkout #content .middle { 
	background: white url(/images/misc/bag_bg_side.gif) right repeat-y; 
	padding: 1em 1.5em 2em 2.5em;
	border-left: solid 1px #EEE;
	_border-left: none;  /* fix IE6 bottom image hacked */
	_position: relative; /* fix IE6 peekaboo, do not apply to IE7+ causes buttons to jump */
}
body.fun #content .middle {
	padding: 0 1.5em 1em 1.5em;
	_padding-right: 0.5em;
	background: #d7d7d7;
}



/* Common Classes
************************************/

/* Server Environment Message */
#server-name {
	padding: 0.1em 0.4em;
	font-family: Courier, monospace;
	text-transform: none;
	position: absolute;
	left: 0;
	font-weight: bold;
	color: #F00;
}

/* Special text (ie, Sale, sold out, reduced price etc...) */
.special {
	color: #bb132a;
}

/* All phone numbers format */
.phone {
	white-space: nowrap;
	/*color: #996600;*/
	font-weight: bold;
}


/* Header for CSR backend view */
.csr {
	display: block;
	padding: 0.6em;
	background: #00CC66;
	border: solid 2px #006633;
	font-weight: bold;
	color: black;
	text-align: center;
}


/* Break, splits content and pins backgrounds */
.break {
	clear: both;
}



/* Colour crew text where the word "colour" appears in multiple colours */
.colourcrew-name .first { color:#e51d9b; }
.colourcrew-name .second { color:#a7a9ac; }
.colourcrew-name .fourth { color:#0082c8; }
.colourcrew-name .fifth { color:#90298c; }
.colourcrew-name .sixth { color:#5ebd7b; }






/* global menu, inline with bar separator */
.menu {
	list-style-type: none;
	padding: 0 1em;
}

.menu li {
	display: inline;
	white-space: nowrap;
}

.menu li a {
	padding: 0 0.6em;
	border-right: solid 1px #CCC;
	white-space: nowrap;
}

.menu li:last-child a,
.menu li.last-child a {
	border-right: none;
}

.menu a.active {
	font-weight: bold;
}



/* Popup windows 
***********************************************/
body.popup {
	background-position: center top;
}

body.popup .wrapper {
	width: auto;
	min-height: 0px;
	_height: 0px;
	text-align: center;
}

body.popup .logo {
	width: 173px;
	height: 64px;
	padding: 10px;
	margin: 0 auto;
}

body.popup #content {
	width: 650px;
	margin: 30px auto 20px auto;
}

body.popup #content h1 {
	width: 650px;
	margin: -25px 0 0.6em -30px;
	
}