/*
 * Page structural styles
 * @description These styles are used on each page throughout the site
 * that represent the same 3 column layout
 */
html {
	font-size: 100%;
	height: 100%;
}

body {
	text-align: center;
	width: 100%;
	background-color: #a7141a;
	font-size: 0.75em;
	font-family: "Tahoma";
	font-weight: normal;
	height: 100%;
	margin: 0;
}

html > body {
	width: auto;
	min-width: 980px;
}

#shell {
	position: relative;
	text-align: left;
	height: 100%;
}

body > #shell {
	height: auto;
	min-height: 100%;
}

#foot-pad {
	padding-bottom: 170px;
}

#foot {
	position: relative;
	margin: -150px 0 0 0;
	padding: 0;
	height: 150px;
	font-size: 11px;
	font-weight: normal;
	font-family: "Arial";
	background: #7e141a;
	text-align: left;
	color: #b58f8f;
}

#foot #foot-content {
	padding: 20px 20px;
}

#foot #foot-content p {
	margin: 0 !important;
}

#foot #foot-content a {
	color: #b58f8f;
	text-decoration: none;
}

#foot #foot-content a:hover {
	color: #ffffff;
	text-decoration: underline;
}

#left-column {
	width: 150px;
	margin: 0 10px;
}

#right-column {
	width: 190px;
	margin: 0 10px;
}

#left-column a,
#right-column a {
	color: #ffffff;
}

#main-column { }

#main-column a {
	color: #000000;
}


#top {
	background: url('../images/interface/header-bg.gif');
}

#navigation {
	height: 23px;
	line-height: 23px;
	text-align: center;
	color: #b58f8f;
}

#navigation a {
	color: #b58f8f;
	font-family: "Tahoma";
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}

#banner {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	height: 98px;
	background: url('../images/interface/psn-logo.gif') 50% 0 no-repeat;
}

#banner #banner-left {
	float: left;
	width: 300px;
	margin: 20px 10px;
}

#banner #banner-right {
	float: right;
	width: 300px;
	margin: 20px 10px;
	text-align: right;
}


#header-search {
	color: #ffffff;
	margin: 10px 0 0 0;
}

#header-search #header-search-keywords {
	border: 1px solid #640f12;
	color: #ffffff;
	width: 160px;
	background: #881115;
	margin: 0;
	padding: 5px;
}



/*
 * Fluid columns styles
 * @description These styles allow re-use of fluid style columns
 * @example
 * 
 * <div class="columns">
 *     <div class="left-column" style="width: 100px;"><div class="widthfix">
 *         
 *         left column
 *         
 *     </div></div>
 *     <div class="fluid-column"><div class="widthfix">
 *         
 *         fluid column
 *         
 *     </div></div>
 *  </div>
 *
 *  Creates a fluid layout with a column on the left hand side
 *  100 pixels wide with the column on the right hand side consuming
 *  the remainder of the area it's in.
 */

.columns {
	position: relative;
	text-align: left;
	overflow: hidden;
	width: 100%;
	clear: left;
}

.columns .left-column {
	float: left;
	display: block;
}

.columns .right-column {
	float: right;
	display: block;
}

.columns .half-column {
	width: 50%;
}

.columns .fluid-column {
	display: block;
	font-family: "Arial", "\"}*{\"";
	overflow: visible;
}

.columns .fluid-column {
	overflow: auto;
	font-family: inherit;
}

/* mac hide - this is for ie6 and less \*/
* html .columns .fluid-column {
	float: left;
}
/* end hide*/

.columns .widthfix { width: 100%; }


/*
 * Clearfix styles
 * @description This needs to be first because FF3 is now supporting this
 */
.clearfix { display: inline-block; }

.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }
/* End hide from IE-mac */





/*
 * Heading styles
 * @description These styles control the headings used throughout the site.
 * Headings are good for SEO so restyle these to suit any content area
 */

h1 {
	
}


h2 {
	font-size: 16px;
	font-weight: normal;
	margin: 1.17em 0;
}


h3 {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 1.17em 0;
}


h4 {
	font-size: 12px;
	font-weight: bold;
	margin: 1.17em 0;
}



/*
 * Common styles
 * @description These styles are used as main elements right throughout the website
 */

img {
	border: 0;
	padding: 0 !important;
	display: inline-block;
	outline: none;
}


.red {
	color: #a7141a;
}





/*
 * Link styles
 * @description These styles control the appearance of links and interactive states
 * As well as customized button type links with image backgrounds etc.
 */

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}


.button,
.side-button,
.add-to-cart-button,
.side-add-to-cart-button {
	height: 30px;
	line-height: 30px;
	font-size: 11px;
	font-weight: normal;
	color: #ffffff !important;
	background: url('../new_images/button-left.gif') 0 0 no-repeat;
	position: relative;
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

.side-button {
	background-image: url('../new_images/side-button-left.gif');
}

.add-to-cart-button {
	background-image: url('../new_images/add-to-cart-left.gif');
	font-size: 14px;
}

.side-add-to-cart-button {
	background-image: url('../new_images/side-add-to-cart-left.gif');
	font-size: 14px;
}
	
	.button .button-right,
	.side-button .side-button-right,
	.add-to-cart-button .add-to-cart-button-right,
	.side-add-to-cart-button .side-add-to-cart-button-right {
		display: block;
		position: absolute;
		width: 10px;
		height: 30px;
		z-index: 100;
		top: 0;
		right: 0;
		background: url('../new_images/button-right.gif') 0 0 no-repeat;
	}
	
	.side-button .side-button-right {
		background-image: url('../new_images/side-button-right.gif');
	}
	
	.add-to-cart-button .add-to-cart-button-right {
		background-image: url('../new_images/add-to-cart-right.gif');
		width: 35px;
	}
	
	.side-add-to-cart-button .side-add-to-cart-button-right {
		background-image: url('../new_images/side-add-to-cart-right.gif');
		width: 35px;
	}
	
	.button .button-text,
	.side-button .side-button-text,
	.add-to-cart-button .add-to-cart-button-text,
	.side-add-to-cart-button .side-add-to-cart-button-text {
		display: block;
		padding: 0 10px;
		position: relative;
		z-index: 101;
	}
	
	.add-to-cart-button .add-to-cart-button-text,
	.side-add-to-cart-button .side-add-to-cart-button-text {
		padding-right: 45px;
	}




/*
 * Paragraph
 * @description Most text on the website unless appearing within a header will appear
 * within a paragraph tag
 */

p {
	margin: 1.17em 0;
	padding: 0;
	display: block;
	clear: both;
}


.error {
	background: #edd0d1;
	color: #000000;
	padding: 0;
	margin-top: 0;
	position: relative;
}

.error .error-top-left,
.error .error-top-right,
.error .error-bottom-left,
.error .error-bottom-right {
	position: absolute;
	width: 10px;
	height: 10px;
	z-index: 100;
	display: block;
}


.error .error-top-left {
	background: url('../new_images/error-top-left.gif') 0 0 no-repeat;
	top: 0;
	left: 0;
}

.error .error-top-right {
	background: url('../new_images/error-top-right.gif') 0 0 no-repeat;
	top: 0;
	left: 100%;
	margin-left: -10px;
}

.error .error-bottom-left {
	background: url('../new_images/error-bottom-left.gif') 0 0 no-repeat;
	top: 100%;
	left: 0;
	margin-top: -10px;
}

.error .error-bottom-right {
	background: url('../new_images/error-bottom-right.gif') 0 0 no-repeat;
	top: 100%;
	left: 100%;
	margin-top: -10px;
	margin-left: -10px;
}

.error .error-text {
	position: relative;
	z-index: 99;
	margin: 0;
	padding: 10px;
	display: block;
	border: 1px solid #dca1a3;
}





/*
 * Form and form elements
 * @description These styles control how form elements assigned the correct
 * class will appear to sit in style with the remainder of the site
 */

.form-item {
	margin: 4px 0;
	width: 100%;
	display: block;
	padding: 0;
	position: relative;
}


label.field-label {
	display: inline-block;
	width: 80px;
	vertical-align: top;
}

input.textfield,
select.textselect,
textarea.textarea {
	margin: 0;
	height: 19px;
	line-height: 19px;
	display: inline-block;
	width: 220px;
	vertical-align: middle;
	border: 1px solid #AAAAAA;
	background: #ffffff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	font-family: inherit;
	font-size: 1em;
}

textarea.textarea {
	width: 300px;
	height: 80px;
	max-width: 300px;
	max-height: 140px;
}

input.checkbox,
input.radio {
	width: 13px;
	height: 13px;
	margin: 0 5px;
	vertical-align: top;
}





/*
 * Content box
 * @description Majority of the content within the main column of the page
 * lies within a white, curved bordered box. These styles define how this box appears
 */

#main-column .content-box {
	background: #fff;
	color: #000000;
	position: relative;
	margin: 10px 0;
	display: block;
	width: 100%;
	overflow: hidden;
}

#main-column .content-box .content-box-top-left,
#main-column .content-box .content-box-top-right,
#main-column .content-box .content-box-bottom-left,
#main-column .content-box .content-box-bottom-right {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	z-index: 100;
}

#main-column .content-box .content-box-top-left {
	background: url('../new_images/content-box-top-left.gif') 0 0 no-repeat;
	top: 0;
	left: 0;
	margin-top: -1px;
	margin-left: -1px;
}

#main-column .content-box .content-box-top-right {
	background: url('../new_images/content-box-top-right.gif') 0 0 no-repeat;
	top: 0;
	left: 100%;
	margin-top: -1px;
	margin-left: -9px;
}

#main-column .content-box .content-box-bottom-left {
	background: url('../new_images/content-box-bottom-left.gif') 0 0 no-repeat;
	top: 100%;
	left: 0;
	margin-top: -9px;
	margin-left: -1px;
}

#main-column .content-box .content-box-bottom-right {
	background: url('../new_images/content-box-bottom-right.gif') 0 0 no-repeat;
	top: 100%;
	left: 100%;
	margin-top: -9px;
	margin-left: -9px;
}

#main-column .content-box .content-box-text {
	display: block;
	padding: 10px 10px;
	position: relative;
	z-index: 101;
}




/*
 * Category listing
 * @description In the fluid column of the page, categories are displayed similar
 * to the listing on the side navigation. These are the styles to control how they look
 */

#main-column .category-listing {
	float: left;
	width: 100%;
	display: block;
}

#main-column .category-listing-item {
	width: 130px;
	display: inline-block;
	margin: 10px 5px 20px 5px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	
	height: 140px;
	vertical-align: top;
}

#main-column .category-listing-item .category-thumbnail {
	display: block;
	text-align: center;
	line-height: 100px;
	height: 100px;
	border: 1px solid #DDDDDD;
	vertical-align: middle;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#main-column .category-listing-item .category-thumbnail img {
	vertical-align: middle;
	display: inline-block;
	width: 100%;
}

#main-column .category-listing-item .category-name {
	display: block;
	text-align: left;
	height: 30px;
	overflow: hidden;
	color: #a7141a;
	
	margin: 5px 0;
}






#faqs { }

#faqs .faq {
	margin: 0 0 .3em 0;
	float: left;
	width: 100%;
}

#faqs .faq .faq-question {
	display: block;
	text-decoration: underline;
	color: #a7141a;
	cursor: pointer;
}

#faqs .faq .faq-answer {
	display: none;
	margin-top: .3em;
	margin-bottom: 1.3em;
}





#article-listing {
	
}

#article-listing .article-listing-item {
	margin: 1.17em 0;
	width: 100%;
}

#article-listing .article-listing-item .article-listing-thumbnail {
	width: 160px;
}

#article-listing .article-listing-item .article-listing-text {
	
}

#article-listing .article-listing-item .article-listing-title {
	font-size: 14px;
	display: block;
	margin-bottom: .7em;
	color: #a7141a;
}

#article-listing .article-listing-item .article-listing-snippet {
	display: block;
	margin: 0;
}




.section-title {
	background: #6e0d11;
	position: relative;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	display: block;
	margin: 10px 0;
	z-index: 99px;
	clear: both;
	overflow: hidden;
	width: 100%;
}

.section-title .section-title-top-left,
.section-title .section-title-top-right,
.section-title .section-title-bottom-left,
.section-title .section-title-bottom-right {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	z-index: 100;
	content: ".";
}

.section-title .section-title-top-left {
	background: url('../new_images/section-title-top-left.gif') 0 0 no-repeat;
	top: 0;
	left: 0;
	margin-top: -1px;
	margin-left: -1px;
}

.section-title .section-title-top-right {
	background: url('../new_images/section-title-top-right.gif') 0 0 no-repeat;
	top: 0;
	left: 100%;
	margin-top: -1px;
	margin-left: -9px;
}

.section-title .section-title-bottom-left {
	background: url('../new_images/section-title-bottom-left.gif') 0 0 no-repeat;
	top: 100%;
	left: 0;
	margin-top: -9px;
	margin-left: -1px;
}

.section-title .section-title-bottom-right {
	background: url('../new_images/section-title-bottom-right.gif') 0 0 no-repeat;
	top: 100%;
	left: 100%;
	margin-top: -9px;
	margin-left: -9px;
}

.section-title .section-title-text {
	display: block;
	padding: 5px 10px;
	position: relative;
	z-index: 101;
}

.section-title a {
	color: #ffffff !important;
	text-decoration: none;
}

.section-title a:hover {
	text-decoration: underline;
}







.side-content-box {
	background: #9e1318;
	position: relative;
	color: #ffffff;
	display: block;
	margin: 0;
	clear: both;
	overflow: hidden;
	width: 100%;
}

.side-content-box-top-left,
.side-content-box-top-right,
.side-content-box-bottom-left,
.side-content-box-bottom-right {
	display: block;
	position: absolute;
	width: 3px;
	height: 3px;
	z-index: 100;
}

.side-content-box .side-content-box-top-left {
	background: url('../new_images/side-box-top-left.gif') 0 0 no-repeat;
	top: 0;
	left: 0;
}

.side-content-box .side-content-box-top-right {
	background: url('../new_images/side-box-top-right.gif') 0 0 no-repeat;
	top: 0;
	left: 100%;
	margin-left: -3px;
}

.side-content-box .side-content-box-bottom-left {
	background: url('../new_images/side-box-bottom-left.gif') 0 0 no-repeat;
	top: 100%;
	left: 0;
	margin-top: -3px;
}

.side-content-box .side-content-box-bottom-right {
	background: url('../new_images/side-box-bottom-right.gif') 0 0 no-repeat;
	left: 100%;
	top: 100%;
	margin-top: -3px;
	margin-left: -3px;
}


.side-content-box .side-content-box-text {
	display: block;
	padding: 5px 10px;
	position: relative;
	z-index: 99;
	border: 1px solid #8d1115;
}





.side-category-listing {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}

.side-category-listing .side-content-box {
	margin-top: 2px !important;
	margin-bottom: 2px !important;
}




#side-shopping-cart {
	
}

#side-shopping-cart .cart-item {
	float: left;
	display: block;
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px solid #8d1115;
	width: 100%;
}

#side-shopping-cart .cart-item .cart-item-name {
	font-size: 11px;
	font-weight: normal;
	width: 100px;
}

#side-shopping-cart .cart-item .cart-item-price {
	text-align: right;
	font-size: 11px;
	font-weight: normal;
}



/*
 * Home page styles
 * @description These styles are generally going to be for elements appearing on
 * the home page of the website
 */
#home-intro {
	display: block;
	background: url('../images/intro-feature-bg.jpg') 0 0 repeat-x;
	height: 196px;
	line-height: 196px;
	vertical-align: middle;
	width: 100%;
}

#home-intro-right-curve {
	display: block;
	background: url('../images/intro-feature-right.jpg') 100% 0 no-repeat;
	height: 196px;
	line-height: 196px;
	vertical-align: middle;
}


#cancer-council {
	background: url('../images/cancer-council-bg.gif') 0 0 repeat-x;
	height: 120px;
	margin: 10px 0 0 0;
	float: left;
	width: 100%;
	clear: left;
	position: relative;
}

#cancer-council-left,
#cancer-council-right {
	position: absolute;
	width: 10px;
	height: 120px;
	z-index: 100;
}

#cancer-council-left {
	background: url('../new_images/cancer-council-left.gif') 0 0 no-repeat;
	top: 0;
	left: 0;
}

#cancer-council-right {
	background: url('../new_images/cancer-council-right.gif') 0 0 no-repeat;
	top: 0;
	left: 100%;
	margin-left: -10px;
}

#cancer-council-logo {
	float: left;
	margin: 15px 20px;
}

#cancer-council-text {
	float: left;
	margin: 30px 0 0 0;
}

#cancer-council-text a {
	color: #854506;
}





/*
 * Product details page styles
 * @description These styles define how elements mainly present on the product
 * details page will appear
 */

#product-info-column {
	width: 415px;
}

#product-info-column .product-review {
	margin: 1.17em 0;
}

#product-info-column .product-review .review-rating {
	width: 80px;
	position: relative;
	text-align: center;
}

#product-info-column .product-review .review-text {
	
}

#product-info-column .product-review .review-author {
	font-style: italic;
	margin: 0 0 .6em 0;
}