/*============================================================
 Import the reset css
============================================================*/
@import "reset.css";

body, form * {
	font-family: "Century Gothic", AppleGothic, sans-serif;
	/*background: transparent url(../img/960_grid_16.png) scroll no-repeat 50% 0;*/
}

.inner {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	/*background: transparent url(../img/960_grid_16.png) scroll no-repeat 50% 0;*/
}

#topBar,
#topBar .inner {
	background: #000;
	color: #fff;
}

#mastHead .inner {
	margin: 30px auto 20px;
}

/*-- The space is made for optional top pagination on 
	  products/shop page by #products element, so it 
	  doesn't jump without pagination --*/
#products-page #mastHead .inner,
#home-page #mastHead .inner {
	margin-bottom: 0;
}

/*-- Make sure that space after #mastHead is equal on
	  products/shop and product pages --*/
#product-page #mastHead .inner {
	margin-bottom: 30px;
}

#mastHead h1 {
	float: left;
	text-indent: -9000px;
	font-size: 75px;
	letter-spacing: 5px;
	text-shadow: 1px 1px 2px #000;
	text-shadow: 1px 1px 2px #000;
}

#mastHead h1 a {
	display: block;
	outline: none;
	width: 180px;
	height: 89px;
	background-color: #fff;
	background: transparent url(../img/logo.png) scroll no-repeat 0 0;
	color: #000;
}

#main .inner {
	font-size: 13px;
	color: #666;
	min-height: 324px;
}

/*============================================================
 -mainNav
============================================================*/
#mainNav {
	float: left;
	height: 24px;
	margin: 20px 0 20px 70px;
	border-bottom: 2px solid #000;
	position: relative;
}

#mainNav li {
	float: left;
	margin-right: 15px;
	padding-bottom: 2px;
	margin-bottom: -9px;
}

#mainNav li:last-child {
	margin-right: 0;
}

/*-- have to be a separate rule as IE doesn't
	  understand last-child and ignoring the 
	  whole rule --*/
#mainNav li.last {
	margin-right: 0;
}

#mainNav li a,
#cart h3 {
	display: block;
	font-size: 16px;
	text-transform: uppercase;
	padding: 0 4px;
	color: #000;
	outline: none;
}

/*-- Mark the selected page. Similar behavior when hovering 
	  over it --*/
#home-page #mainNav .home-page a,
.shop #mainNav .products-page a,
#freebies-page #mainNav .freebies-page a,
#about-page #mainNav .about-page a,
#faq-page #mainNav .faq-page a,
#contact-page #mainNav .contact-page a,
.cart #mainNav .cart-page a,
#mainNav li a:hover,
#mainNav li a:active {
	color: #000;
	border-bottom: 7px solid #000;
	padding-bottom: 2px;
}

#mainNav li a:hover {
	color: #666;
	border-color: #666;
}

/*============================================================
 -cart [at the header]
============================================================*/
#cart {
	float: right;
	margin: 8px 10px 8px 0;
}

#cart * {
	float: left;
}

#cart h3 {
	margin: 0 4px;
	padding: 0;
	color: #fff;
}

/*============================================================
 -sideNav
============================================================*/
#sideNav {
	float: left;
	width: 135px;
	margin: 7px 12px 0 18px;
	padding: 28px 20px 28px 15px;
	text-transform: uppercase;
	border-right: 2px solid #888;
	font-size: 14px;
}

#sideNav ul {
	float: right;
}

#sideNav li a {
	display: block;
	padding: 6px 4px 6px 20px;
	color: #666;
	outline: none;
	background: transparent url(../img/dotsVertical.png) no-repeat scroll -20px center;
}

#sideNav li a:hover,
#sideNav li a:active {
	color: #000;
	background: transparent url(../img/dotsVertical.png) no-repeat scroll 0 center;
}

/*-- span covers the rollover img --*/
#sideNav span {
	display: block;
	background-color: #fff;
}

#sideNav p {
	text-transform: capitalize;
	font-size: 12px;
	color: #666;
}

/* -sideNav [contact page] ---------------------------------*/
#contact-page #sideNav {
	width: 160px;
	margin-left: 0px;
	padding-right: 13px;
}

#sideNav p {
	margin-top: -5px;
	margin-bottom: 15px;
}

.sideLink {
	text-transform: lowercase;
}

#sideNav #sideSkype * {
	display: inline-block;
	vertical-align: middle;
	cursor:pointer;
}

/*-- insert border by default, so that element doesn't
	  jump when it's hovered over and underlined --*/
#sideNav #sideSkype span {
	border-bottom: 1px solid #fff;
}

#sideNav #sideSkype:hover span {
	border-bottom-color: #333;
}

/*============================================================
 -photos
 Shop photos [shop page] & Scrollable photos [product page]
============================================================*/
#products {
	overflow: hidden;
	margin-left: 180px;
	margin-top: 20px;
}

/*-- Make space for optional top pagination on products/shop 
	  page, so content doesn't jump when it is/isn't there --*/
#products-page #products {
	margin-top: 30px;
}

#products .product {
	float: left;
	width: 187px;
	margin: 0 50px 30px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	position: relative;
}

/*-- Overwrite the previous properties for SCROLLABLE PHOTOS 
	  [product page] --*/
#pics {
	float: left;
	width: 318px; /*to fit styled img correctly*/
	height: 318px;
	margin-left: 70px;
	position: relative;
}

.status {
	position: absolute;
	background-color: #555;
	background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	top: 12px;
	left: 12px;
	padding: 0 10px;
	text-transform: uppercase;
	z-index: 1;
}


/*============================================================
 -teeColour : T-shirt colour styling [product page]
============================================================*/
.teeColour {
	margin: 0 0 15px;
	overflow: hidden;
}

.teeColour .swatch,
.teeColour #colourDetails {
	float: left;
}

.teeColour .swatch {
	width: 98px;
	height: 32px;
	margin-right: 10px;
}

.teeColour span {
	font-size: 11px;
	float: left;
	margin-right: 8px;
}

.teeColour .name {
	text-transform: capitalize;
	font-size: 12px;
	color: #333;
	width: 340px;
	margin-top: -1px;
}

.teeColour .std {
	margin-right: 7px;
	padding-left: 5px;
	border-left: 1px solid #ccc;
	text-transform: uppercase;
}

.teeColour .std.first {
	padding: 0;
	border: none;
}

/*============================================================
 -photos shadow styling
============================================================*/
a.img,
#pics {
	display: block;
	outline: none;
}

/* Img common shadow styling --------------------------------*/
div .imgStyle {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ccc;
	padding: 5px;
	-moz-box-shadow: 1px 1px 5px #ccc;
}

a.img:hover .imgStyle,
a.img:hover .title,
a.img:hover .price {
	color: #000;
	border-color: #000;
}

/* Img [products/shop & home pages] ------------------------*/
#products .img img {
	height: 175px;
	width: 175px;
	margin-bottom: 15px;
}

/* Img [product page] --------------------------------------*/
#pics .img img {
	width: 300px;
	height: 300px;
}

/* Img [cart page] -----------------------------------------*/
#cart-body .img img {
	width: 75px;
	height: 75px;
}

/*============================================================
 -pagination [products/shop page]
============================================================*/
#pagination_top {
	margin-bottom: 10px;
}

#pagination_bottom {
	margin-top: -20px;
}

.pagination {
	float: right;
	display: inline;
	margin: 0 119px 1px;
	font-size: 12px;
	color: #666;
}

.pagination * {
	margin-left: 5px;
}

.pagination * * {
	margin: 0;
}

.current {
	font-weight: bold;
	font-size: 14px;
}

.pagination .disabled {
	color: #999;
}

.pagination .show_all {
	margin-right: 8px;
	padding-right: 10px;
	border-right: 1px solid #ccc;
}

/*============================================================
 -content
============================================================*/
#content {
	float: left;
	width: 460px;
	margin-left: 48px;
	font-size: 13px;
}

#content.noSideNav,
.noSideNav {
	margin-left: 250px;
	width: 520px; /*540 580px;*/
}

/*============================================================
 -promo : promotion links [product page]
============================================================*/
#promo {
	float: right;
	overflow: hidden;
	width: 135px;
}

#promo > * {
	float: left;
	margin: 0 0 10px 0;
}

#promo a {
	border: none;
}

a.aaLink img {
	width: 135px;
	height: 42px;
	margin-bottom: 0;
}

#promo div#tweetMe {
	clear: left;
}

/*-- Overwrite addthis styles to make it shorter in width --*/
.addthis_default_style .addthis_separator {
	margin: 0 -2px !important;
}

.addthis_default_style .at300b, .addthis_default_style .at300m {
	padding:0 1px !important;
}

/*============================================================
 -product : product's descriprion [product page]
============================================================*/
.product .title {
	display: block;
	min-height: 40px;
	margin-left:5px;
	font-size: 14px;
	color: #666;
}

#main p.price {
	font-size: 24px;
	letter-spacing: -1px;
	margin-bottom: 5px;
	float: none;
}

.product .price {
	float: right;
	margin: 5px 5px 0;
}

.price {
	color: #666;
	font-size: 16px;
	font-weight: bold;
}

.clear {
	clear: both;
}

/*============================================================
 -inventory [product page]
============================================================*/
#inventory {
	margin-top: 25px;
	padding-bottom: 15px;
}

#product_inventory li {
	position: relative;
	margin-top: 10px;
	background-color: #F4F4F4;
	clear: both;
	color: #333;
}

#product_inventory .inventory_option {
	padding: 3px 5px 0;
	display: block;
}

#product_inventory .inventory_bar {
	display: block;
	height: 3px;
	position: relative;
	background: #bbb;
}

#product_inventory .inventory_bar em {
	display: none;
	float: left;
	width: 200px;
	margin: 5px 0 10px;
}

#product_inventory li.sold_out {
}

#product_inventory .inventory_status {
	position: absolute;
	top: 3px;
	right: 5px;
}

/*============================================================
 -cart [cart page]
============================================================*/
#cart-table {
	text-align: left;
	width: 100%;
	border-bottom: 2px solid #888;
}

/* Cart Table Columns --------------------------------------*/

#col-img 		{ width: 90px; }
#col-item		{ width: 340px; }
#col-price		{ width: 65px; }
#col-qty			{ width: 40px; }
#col-total		{ width: 65px; }
#col-options	{ width: 30px; }

/* Cart Table Header ---------------------------------------*/

#cart-head th {
	border-bottom: 2px solid #888;
	color: #444;
}

#cart-head th {
	padding: 11px 0 4px;
	text-transform: uppercase;
	font-size: 14px;
}

#cart-head #head-item {
	padding-left: 12px;
}

#head-options span {
	display: none;
}

/* Cart Table Body -----------------------------------------*/

#cart-body tr {
	border-bottom: 1px solid #ccc;
}

#cart-body td,
#cart-body th {
	padding: 9px 12px 9px 0;
	vertical-align: middle;
}

#cart-body .item-options {
	font-size: 11px;
}

#cart-body .item-img {
	padding-left: 12px;
}

#cart-body .item-img a.img {
	width: 95px; /*to fit styled img correctly*/
	height: 95px;
	margin: 0;
	font-size: 10px;
}

#cart-body tr.row-alt {
	background: #F6F6F6;
}

#cart-body .item-qty input {
	width: 25px;
	padding: 0 2px;
	border: 1px solid #888;
}

#cart-body .item-total {
	font-weight: bold;
}

#cart-body .item-price,
#cart-body .item-total {
	letter-spacing: 1px;
}

#cart-body a {
	color: #000;
}

#cart-body .item-options a {
	color: #888;
}

#cart-body a:hover,
#cart-body a:active {
	text-decoration: underline;
}

/* Cart Footer ---------------------------------------------*/

#cart-footer {
	margin: 10px 0;
	text-align: right;
}

#cart-footer div {
	padding: 10px 0 10px ;
}

#cart-footer .cart-update {
	padding-bottom: 0;
}

#cart-footer button {
	width: 137px;
}

#cart-footer #country {
	width: 160px;
	margin-left: 5px;
	padding: 2px;
}

#cart_discount_code {
	display: inline-block;
	width: 130px;
	margin-bottom: 2px;
}

.total-shipping,
.total-price {
	display: inline-block;
	width: 70px;
}

#update-btn-footer,
#cart_discount_code,
#cart-shipping-tax .total-shipping,
.total-price, button.checkout-btn {
	margin-left: 20px;
}

#cart-footer .cart-total {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 18px 0 15px;
}

#cart-footer #cart-shipping-tax {
	padding: 0;
}

#cart-footer .cart-total {
	overflow: hidden;
}

#cart-footer .cart-total h3 {
	font-size: 16px;
	letter-spacing: 1px;
	margin: 0;
}

#cart-footer .cart-total p {
	margin-bottom: 0;
	font-size: 12px;
	color: #666;
}

#cart-footer .cart-update *,
#cart-footer .cart-checkout * {
	vertical-align: middle;
}

/*============================================================
 -buttons
============================================================*/
button:focus {
	outline:none;
}

.button {
	background-color:#ddd;
	border:1px solid #bbb;
	color:#222;
	margin:10px;
	padding:4px;
	text-transform: capitalize;
	font-size: 12px;
	outline: none;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
 	-moz-box-shadow: 1px 1px 2px #aaa;
}

.impact {
	background-color:#ccc;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

.cart-checkout a {
	font-size: 14px;
	padding: 5px 12px;
	margin-right: 0;
}

.button:hover {
	background-color: #eee;
}

#cartLinks #view {
	background-color: #eee;
}

#cartLinks #view:hover {
	background-color: #fff;
}

#cartLinks a {
	margin: 0 0 0 8px;
	padding: 1px 4px;
}

#cart-page button {
	margin-right: 0;
}

#allProducts {
	float: right;
	margin: 0 119px 5px;
	padding: 7px 0;
	text-align: center;
	font-size: 15px;
	width: 187px;
}

/*============================================================
 -styling : General Content Styling
============================================================*/
h2, h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 7px;
	color: #000;
}

h3 {
	text-transform: capitalize;
	font-size: 14px;
}

h4 {
	color: #000;
}

.para {
	margin-bottom: 15px;
}

#content.section {
	border: none;
}

div.section {
	border-bottom: 1px solid #ccc;
}

.section {
	margin-bottom: 10px;
	overflow: hidden;
}

.section p {
	margin-bottom: 15px;
	clear: both;
}

.section ul.links {
	float: left;
	margin-bottom:15px;
	width: 300px;
	font-size: 14px;
}

.section ul.links li {
	padding-left: 16px;
	margin-bottom: 4px;
	background: transparent url(../img/dot.png) scroll no-repeat -3px 3px;
}

.section a,
.para a {
	color: #666;
	border-bottom: 1px dotted #666;
	outline: none;
}

.section a:hover,
.para a:hover {
	color: #444;
	border-bottom: 1px solid #444;
}

ul.links p {
	font-size: 12px;
	margin: 7px 0 7px 10px;
	padding-left: 7px;
	border-left: 1px solid #ccc;
}

ul.links p.toShow {
	display:none;
}

.toggle {
	cursor:pointer;
}

.emph {
	font-weight: bold;
}

/* To Top links --------------------------------------------*/
#main .toTop {
	float: right;
	clear: left;
	text-transform: capitalize;
	padding: 0 15px;
	margin:0 0 4px;
	font-size: 11px;
	color: #999;
	background: transparent url(../img/toTop.png) scroll no-repeat 100% 11%;
	border: none;
	outline: none;
}

#main .toTop:hover {
	color: #444;
	background: transparent url(../img/toTop.png) scroll no-repeat 100% 93%;
	border: none;
}

/*============================================================
 -order form [product page]
============================================================*/
#order {
	margin: 15px 0 10px;
}

#order #options {
	width: 215px;
	height: 23px;
	vertical-align: middle;
}

#order button {
	width: 160px;
	margin-left: 20px;
	padding: 0;
	vertical-align: middle;
}

/*============================================================
 -contact form [contact page]
============================================================*/
#contact-form {
	padding: 10px 0;
	overflow: hidden;
}

#contact-form * {
	float: left;
	font-size: 13px;
}

#contact-form label,
#contact-form #captchaImg,
#contact-form p,
#contact-form button {
	clear: left;
}

#contact-form sup {
	float: none;
}

#contact-form label {
	text-align: right;
	margin-top: 10px;
	width: 100px;
	text-transform: capitalize;
	font-weight: bold;
	color: #444;
}

#contact-form input,
#contact-form select,
#contact-form textarea,
#captcha-div {
	width: 290px;
	margin: 10px 0 0 20px;
	padding: 2px 1px 2px 4px;
}

#contact-form select {
	width: 297px;
}

#captcha-div,
#contact-form p,
#contact-form button {
	margin-left: 120px;	
}

#contact-form button {
	margin-top: 25px;
	width: 60px;
}

#contact-form .desc {
	margin: -15px 0 10px;
	float: none;
}

#contact-form sup {
	font-weight: bold;
	border: none;
	color: red;
}

#captcha-div {
	width: 290px;
	height: 50px;
	border: 1px solid #000;
	margin-left: 120px;
}

#contact-form textarea {
	height: 150px;
	font-size: 13px;
}

/*-- error styling --*/
#contact-form input.error,
#contact-form select.error,
#contact-form textarea.error {
	border: 1px solid red;
	background-color: #f9f9f9;
}

#contact-form label.error {
	margin: 2px 0 0 122px;
	font-size: 11px;
	font-weight: normal;
	width: 290px;
	text-align: left;
	text-transform: none;
}

/*============================================================
 -footer
============================================================*/
#footer {
	height: 100px;
	text-transform: uppercase;
	font-size: 12px;
	color: #666;
	/*background: transparent url(../img/footer.png) scroll no-repeat 0 0;*/
}

#footer .inner {
	border-top: 2px solid #444;
	padding: 10px 10px 0;
	margin-top: 50px;
}

#footerNav {
	float: left;
	margin: 0 80px 20px 70px;
}

/* Social media links --------------------------------------*/
.footerSocial {
	float: right;
	margin-left: 10px;
}

.footerSocial li {
	overflow: hidden;
	margin-bottom: 5px;
}

.footerSocial li span {
	line-height: 24px;
	font-size: 11px;
	text-transform: lowercase;
}

.footerSocial li .network {
	text-transform: uppercase;
}

.footerSocial img {
	float: left;
	height: 24px;
	width: 24px;
	background-color: #fff;
	margin: 0 5px;
}

#footer .footerSocial a {
	color: #888;
}

#footer .footerSocial a:hover {
	border: none;
}

/* -footerNav ----------------------------------------------*/
#footerNav li {
	float: left;
	padding:5px 5px 5px 15px;
	background:transparent url(../img/slash.png) no-repeat scroll 0 50%;
}

#footerNav li:first-child {
	padding-left: 0;
	background: none;
}

#footer p {
	margin: 15px 0;
	text-transform: none;
	font-size: 11px;
	clear: both;
}

#picsNav a,
.pagination a,
.sideLink,
#footer a {
	color: #666;
	outline: none;
}

#picsNav a:hover,
.pagination a:hover,
.sideLink:hover,
#footer a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}

/*============================================================
 -freeBag [home, products/shop, freebies pages]
============================================================*/
#freeBag {
	display: block;
	overflow: hidden;
	margin: 13px 0;
	padding: 5px 10px;
	border: 0;
	color: #fff;
	background-color: #4F749F;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 0.8px;
	text-align: center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
 	-moz-box-shadow: 1px 1px 2px #aaa;
}

#product-page #freeBag {
	margin-top: 25px;
}

#freeBag:hover {
	background-color: #999;
}

/*============================================================
 -freebies [freebies page]
============================================================*/
.freebiesPics img {
	float: left;
	width: 175px;
	height: 175px;
	margin: 8px 35px 20px 0;
}

/*============================================================
 -about [about page]
============================================================*/
#designer img {
	height: 120px;
	width: 157px;
	float: left;
	margin: 4px 20px 8px 0;
}

#designer p {
	clear: none;
	margin-left: 195px;
}

/*============================================================
 -terms [terms page]
============================================================*/
#terms-page #content ul {
	list-style: disc outside none;
	margin-left: 15px;
	margin-bottom: 15px;
}