﻿body
{   
     background-color: #FFF;
     color: #333;
     font-family: Helvetica, Arial, Sans-serif;
     font-size: 12px;
     padding: 0;
     margin: 0;
}

.noShow
{
    display: none;
}

a
{
    color: #C00;
    text-decoration: none;
}

a img
{
    border: 0;
}

#main
{
	width: 950px;
    margin: 0 20px;
    float: left;
}

#content
{
    width: 100%;
    float: left;
    margin: 20px 0 10px 0;
    position: relative;
    padding-bottom: 30px;
}

#footer
{
    border-top: 1px solid #CCC;
    clear: both;
    width: 100%;
    float: left;
}

/* Headings */

h1
{
	display: block;
	width: 300px;
	float: left;
	margin: 15px 0;
}

h2
{
    font-size: 18px;
    margin-top: 0;
}

h3
{
    font-size: 14px;
}

#header
{
	height: 115px;
	position: relative;
	width: 100%;
}

#header .preStart
{
	float: right;
}

#header .progressBarTop
{
	margin-top: 5px;
	border-bottom: 1px solid #CCC;
	margin-right: 553px;
	clear: left;
	position: absolute;
	bottom: 17px;
	width: 447px;
}

#header .progressBarTop ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

#header .progressBarTop li
{
	display: inline;
}

#header .progressBarTop li a
{
    display: -moz-inline-stack;
	display: inline-block;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: bold;
	border-right: 1px solid #CCC;
}

#header .progressBarTop li.selected a
{
	color: #000;
	background-image: url('/Layout/Default/Image/PPES/top-navi-active-gradient-bg.png');
	background-repeat: repeat-x;
	background-position: bottom;
}

#content .leftCol
{
	/*width: 484px;*/
	width: 584px;
	float: left;
}

#content .leftColWide
{
	width: 677px;
	float: left;
}

#content .topRow .leftColWide
{
    width: 777px;
}

#content .leftCol div
{
	margin-right: 20px;
}

#content .rightCol
{
	/*width: 466px;*/
	width: 366px;
	float: right;
}

#content .rightColNarrow
{
	width: 273px;
	float: right;
}

#content .topRow .rightColNarrow
{
    width: 173px;
}

#content .bottomRow
{
    width: 100%;
    float: left;
}

ol
{
    margin-left: 5px;
    padding-left: 20px;
}

/* Button row */
.bottomNavigation
{
    clear: both;
    float: left;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.bottomNavigation .left
{
    float: left;
}

.bottomNavigation .right
{
    float: right;
}

/* Bottom navigation */
.progressBarBottom
{
    clear: both;
    text-align: center;
}

.progressBarBottom ul
{
    margin-left: 0;
    padding-left: 0;
    margin-top: 10px;
}

.progressBarBottom li
{
    display: inline;
    list-style: none;
    margin: 0 5px 0 0;
    padding: 0 0 0 5px;
    border-left: 1px solid #C00;
}

.progressBarBottom li.selected a
{
    color: #333;
}

.progressBarBottom li:first-child
{
    border-left: 0;
}

/* Product selection */
.areaSelection
{
	width: 216px;
	float: left;
}

.areaSelection #dude
{
	float: left;
}

.areaSelection .rbnList input, .areaSelection .rbnList label
{
	padding: 0 0 5px 0;
	display: inline-block;
}

.topRow
{
    overflow: hidden;
}

.dangerSelection, .additionalSelection
{
	float: left;
	width: 249px;
	padding: 0 15px;
	border-left: 1px solid #CCC;
}

.dangerSelection select, .additionalSelection select
{
	width: 249px;
	font-size: 12px;
}

.listBoxContainer
{
    float: left;
    width: 561px;
}

.selectionHelp
{

    clear: both;
}

.selectionHelp p
{
    padding: 5px 15px;
}

/* Product listing */
.productTableContainer
{
	font-size: 12px;
}

.productTableContainer table
{
	border-bottom: 1px solid #000;
	width: 100%;
}

.productTableContainer .Header
{
	background-color: #e1e1e1;
	font-weight: bold;
}

.productTableContainer .Alternating
{
	background-color: #F8F8F8;
}

.productTableContainer td, .productTableContainer th
{
	border-left: 1px solid #CCC;
	padding: 4px 5px;
	vertical-align: middle;
}

.productTableContainer .Header td, .productTableContainer th
{
	border-left-color: #FFF;
	text-align: left;
}

.productTableContainer .noLeftBorder, .productTableContainer .firstItem
{
    border-left-color: #FFF;
}

.productTableContainer td:first-child
{
	border-left-color: #FFF;
}

.productTableContainer td input
{
	vertical-align: middle;
}

/* Product cart */
.cartContentsHeaderContainer
{
    background-image: url('/Layout/Default/Image/PPES/product-cart-header-bg.png');
    background-repeat: repeat-x;
    background-position: top;
    padding-right: 12px;
}

.cartContentsHeaderContainer h2
{
    background-image: url('/Layout/Default/Image/PPES/icon-basket.png');
    background-repeat: no-repeat;
    background-position: top right;
    padding: 4px 48px 14px 8px;
}

#cartContents dt
{
    font-weight: bold;
    width: 100px;
    float: left;
}

#cartContents dd, #cartContents dt
{
    padding: 5px;
}

#cartContents dt:after
{
    content: ":";
}

#cartContents .alternating
{
    background-color: #F8F8F8;
}

/* Product description */
.description
{
    margin-left: 40px;
}

/* Paging */
.PagingContainer
{
    border: 1px solid #CCC;
    border-width: 1px 0;
    margin: 20px 0 20px 0;
    padding: 5px;
    font-size: 11px;
    font-family: Verdana, Sans-Serif;
}

.PageNumbers
{
    display: inline;
}

.ItemCount
{
    display: none;
}

.PageSelect
{
    display: inline;
}

.PageSelect a
{
    display: inline-block;
}

.PageSelect a[disabled=disabled], .PageSelect .disabled
{
    color: #DDD;
}

.Paging a
{
    padding: 2px 5px;
}

.Paging a:hover
{
    background-color: #DDD;
}

.Paging a.disabled:hover, .Paging a[disabled=disabled]:hover
{
    background-color: #FFF;
}

.PageNumbers a.disabled:hover, .PageNumbers a[disabled=disabled]:hover
{
    background-color: #CCC;
}

.Paging br
{
    display: none;
}

.PageNumbers a[disabled=disabled]
{
    background-color: #CCC;
    color: #000;
}

/* Summary */
.summary /* The Big O background-image */
{
    background-image: url('/Layout/Default/Image/PPES/big-o-bg.jpg');
    min-height: 537px;
    background-position: top right;
    background-repeat: no-repeat;
}

.summaryName input
{
    vertical-align: middle;
}

.summaryName
{
    margin-bottom: 30px;
}

.summaryName .button
{
    margin-left: 10px;
}

.summaryName label
{
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.summaryActions
{
    border: 1px solid #CCC;
    border-width: 1px 0;
    margin: 20px 0;
    float: left;
    width: 100%;
}

.summaryActions a
{
    display: block;
    float: left;
    height: 36px;
    padding-left: 36px;
    line-height: 36px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-right: 29px;
}

.summaryActions a.summaryPrint
{
    background-image: url('/Layout/Default/Image/PPES/icon-printer.png');
}

.summaryActions a.summaryEmail
{
    background-image: url('/Layout/Default/Image/PPES/icon-at-symbol.png');
}

.summaryActions a.summaryTellFriend
{
    background-image: url('/Layout/Default/Image/PPES/icon-tell-a-friend.png');
}

.summaryEmailView
{
    width: 100%;
    float: left;
}

.summaryEmailView label
{
    display: block;
}

.summaryEmailView .text, .summaryEmailView textarea
{
    width: 545px;
    margin-bottom: 15px;
}

.summaryEmailView .imageButton
{
    float: right;
    margin-left: 10px;
}

.summaryTitle h3
{
    color: #880000;
}

/* Contact */
.cartSummaryContainer
{
    float: right;
}

.cartSummaryContainer select
{
    width: 340px;
    font-size: 12px;
}

#content .leftCol #contactForm
{
    margin-right: 0;
    margin-bottom: 30px;
    width: 100%;
    float: left;
}

#content .leftCol #contactForm .formLeftCol, #content .leftCol #contactForm .formRightCol
{
    width: 292px;
    float: left;
    margin: 0;
}

#contactForm label
{
    display: block;
}

.required
{
    color: #C00;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Black";
}

#contactForm input.text
{
    width: 260px;
    margin-bottom: 10px;
}

#contactForm .contact
{
    display: block;
}

#contactForm .contact br
{
    display: none;
}

#contactForm .radio label, #contactForm .checkbox label
{
    display: inline;
}

#contactForm span
{
    display: inline-block;
    margin: 3px 0;
}

#contactForm .checkbox
{
    margin-bottom: 10px;
    display: block;
}

#contactForm textarea
{
    width: 439px;
}

#contactForm .imageButton
{
    display: block;
    margin: 10px 0;
}

#contactForm .invalidData
{
    background-color: #ffcccc;
    padding: 10px;
    border: 1px solid #C00;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 13px;
}

#contactForm .invalidField
{
    background-color: #ffcccc;
}