/* - - - - - - - - - - - - - - - - - - - - -

Title : SkyCart
Author : www.skywire.co.uk

Description : Main Styles
$Rev: 893 $: Revision of last commit
$Author: Jack Barham $:  Author of last commit

- - - - - - - - - - - - - - - - - - - - - */

@media screen {

/* - - - - - - - - - - - - - - - - - - - -
	GLOBAL
	
- - - - - - - - - - - - - - - - - - - -*/
	.clear {clear:both;}
	a, img, input, button {outline:none;}


/* - - - - - - - - - - - - - - - - - - - -
	LAYOUT
- - - - - - - - - - - - - - - - - - - -*/
	html, body {margin:0;padding:0;height:100%;}
	body {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;background:#FFFFFF;}
	#wrapper {width:960px;margin:0 auto;padding:20px 0 20px 0;}


/* - - - - - - - - - - - - - - - - - - - -
	CONTENT - ALL PAGES
- - - - - - - - - - - - - - - - - - - -*/
	#main-content {width:720px;float:left;}
	#box-top-container {width:200px;float:left;}
	#breadcrumb {height:15px;margin-bottom:10px;}
	.box-other {margin-bottom:20px;}
	#side-content {width:180px;margin-right:40px;float:left; text-align:left;}
	#box-top {padding-bottom:10px;border-bottom:1px solid #CCCCCC;margin-bottom:10px;}
	#top-box-product-title {float:right;width:495px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #cccccc;}
	#title-logo {float:right; width:200px; text-align:right;}
	#top-box-product {width:495px; float:right;}
	.product-list {float:left; margin-right:25px; width:140px;}
	.product-list p {text-transform:uppercase;}
	#product-image-large {width:720px;height:406px;}
	#product-thumb-wrap {width:720px;height:60px;background-color:#000000;display:none;}
	#product-thumb-image {position:relative;left:197px;top:9px;float:left;}
	#product-thumb-image li {float:left;}
	#product-thumb-movie {position:relative;left:165px;top:9px;float:left;}
	#box-top-text {margin-top:10px;text-align:left;}
	
	 /* #container-1 {display:none;} */


/* - - - - - - - - - - - - - - - - - - - -
	TYPOGRAPHY / HEADING
- - - - - - - - - - - - - - - - - - - -*/

	/*  headings */
	h1, h2, h3, p {text-align:left;}
	
	#side-content h2 {margin-bottom:15px;font-size:18px;font-weight:bold;text-transform:uppercase;color:#666666;}
	#side-content li {margin-bottom:3px;}
	#side-content li a {text-transform:uppercase;font-weight:bold;font-size:13px;color:#666666;text-decoration:none;}
	#side-content li a:hover {text-decoration:underline;}
	
	.product-list a {text-decoration:none;}
	
	#main-content h2, #main-content h3 {font-size:20px;color:#000000;padding-bottom:10px;font-weight:bold;}
	#main-content #product-box-text h3 {font-size:15px;}
	.brand-box h4 {color:#000000;margin-bottom:5px;text-transform:uppercase;font-weight:bold;}
	#side-content-list h2 {font-size:18px;color:666666;text-transform:uppercase;font-weight:bold;}
	#top-box-product-title h3 {float:left;position:relative;bottom:-12px; display:block; width:200px;}

	p {color:#666666;line-height:1.2em;margin-bottom:15px;font-size:13px;}
	#breadcrumb p {font-size:11px;text-transform:uppercase;}
	#product-thumb-movie p {float:left;text-transform:uppercase;color:#FFFFFF;font-size:12px;line-height:1.2em;padding-top:7px;}
	.brand-box p {text-transform:uppercase; font-size:11px;}
	.product-list p, .c-product p { font-size:11px; color:#000000; line-height:1.3em;}
	.product-list .price, .c-product .price {color:#666666;}
	.c-product a {text-decoration:none;}
	.c-product p {text-align:center;}

	#product-thumb-image a:hover {border:1px solid #FFFFFF;}
	#product-thumb-image a {border:1px solid #999999;display:block;}

	


/* - - - - - - - - - - - - - - - - - - - -
	IMAGES
- - - - - - - - - - - - - - - - - - - -*/
	.thumb1 {margin-right:7px;border:1px solid #666666;}
	.thumb-movie {float:left;margin-left:60px;border:1px solid #666666;}
	.img-bottom {margin-bottom:10px;}
	

/* - - - - - - - - - - - - - - - - - - - -
	SIFR
- - - - - - - - - - - - - - - - - - - -*/
	.sIFR-flash {
		visibility:visible !important;
		margin:0;
		padding:0;}

	.sIFR-replaced, .sIFR-ignore {
		visibility:visible !important;}

	.sIFR-alternate {
		position:absolute;
		left:0;
		top:0;
		width:0;
		height:0;
		display:block;
		overflow:hidden;}

	.sIFR-replaced div.sIFR-fixfocus {
		margin:0pt;
		padding:0pt;
		overflow:auto;
		letter-spacing:0px;
		float:none;}
	
}


/* - - - - - - - - - - - - - - - - - - - -
	PRINT
- - - - - - - - - - - - - - - - - - - -*/

@media print {

	* {
		background:none 	!important;
		color:#111 			!important;
	}
	html {font:100%/1.5 georgia,serif;}

	.sIFR-flash {
		display    :none 	!important;
		height     :0;
		width      :0;
		position   :absolute;
		overflow   :hidden;
	}

	.sIFR-alternate {
		visibility :visible !important;
		display    :block   !important;
		position   :static  !important;
		left       :auto    !important;
		top        :auto    !important;
		width      :auto    !important;
		height     :auto    !important;
	}

}

/* - - - - - - - - - - - - - - - - - - - -
	TABS
- - - - - - - - - - - - - - - - - - - -*/


/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { 
/* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */

   
 .tabs-hide {display: none;} 
}


/* Hide useless elements in print layouts... */
@media print {
  .tabs-nav {display: none;} 
}

/* Skin */


.gallery-more li {margin-right:15px;}

.tabs-nav {
    list-style: none;
    margin: 0;}
	
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";}
.tabs-nav li {
    float:left;
	margin-right:2px;
	width:238px;
	height:36px;}
	
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url(tab.png) no-repeat;}
	
.tabs-nav a {
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;
    color: #27537a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */
	background-color: #404040;
	color:#FFFFFF;
	height:36px;
	text-transform: uppercase;}
	
.tabs-nav .tabs-selected a {
    color: #000;}
	
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus {
    background-position: 100% -150px;
    outline: 0; /* prevent dotted border in Firefox */
	background-color:#666666;}

.tabs-nav a:active {
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background-color:#FFFFFF;
	color:#000000;}

.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -100px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background-color:#FFFFFF;
	color:#000000;
	min-height:35px;}
	
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;}
	
.tabs-nav .tabs-disabled {
    opacity: .4;}
	
.tabs-container {
	width:696px;
    border: 1px solid #cccccc;
    padding: 1em;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */}
	
.tabs-loading em {
    padding: 0 0 0 20px;}


/* - - - - - - - - - - - - - - - - - - - -
	IMAGE CAROUSEL
- - - - - - - - - - - - - - - - - - - -*/

/*
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */

.kcarousel {height:170px;}


.jcarousel-container {
    position: relative;}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 120px;
    height: 155px;}

.c-product {width:140px; height:170px; text-align:center;}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;}

.jcarousel-prev {
    z-index: 3;
    display: none;}

/* TANGO SKIN */

.jcarousel-skin-tango .jcarousel-container {}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 610px;
    padding: 0px 43px;}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  610px;
    height: 170px;}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 590px;}

.jcarousel-skin-tango .jcarousel-item {
    width: 140px;
    height: 155px;}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 20px;}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;}

. jcarousel-skin-tango {width:200px;}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 60px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(/text/content/assets/category/img/next-horizontal.png) no-repeat 0 0;}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 60px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(/text/content/assets/category/img/prev-horizontal.png) no-repeat 0 0;}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;}