/* CSS Document */

/*nugget style definitions:*/

/* The main nugget container is 157px fixed width*/

.nugget {
	background-color:#FFF;
	width:157px;
	margin-bottom:10px;
	}

/*containers for the sections of the nugget
 * each nugget has three sections: top, content and bottom
 * there are 2 types of nugget tops: one generic - if the nugget has no picture,
 * and some for each type of nugget with an icon */

/*generic nugget properties for top, content (body), bottom - with a rounded gradient background image*/

.nugget_top {
	display:block;
	background-image: url(img/top_nugget_background.gif);
	background-repeat:no-repeat;
	color:#FFF;
	height:20px;
	font-family:Verdana;
	font-size:14px;
	text-align:left;
    font-weight:bold;
	padding-left:7px;
	padding-top:1px;
	}

.nugget_content{
	border-style:solid;
	border-color:#8D8D8D;
	border-width:1px;
	border-top-width:0px;
	border-bottom-width:0px;
	color: #161A20;
	width:147px;
    padding:9px 3px 9px 5px;   
	font-size:12px;
	overflow:hidden;
    }
    
.nugget_bottom {
    display:block;
	background-image:url(img/bottom_nugget_background.gif);
	background-repeat:no-repeat;
	height:4px;
    }
    
/*style for the <p> tags inside a nugget */
.nugget_content p{
	padding-left:.5em;
	padding-right:.5em;
    }

/*nugget specific classes - each nugget has an extra class - according to the nugget - and the top, content and bottom styles are overwritten */

/*the login nugget is defined as <div class='nugget login'>
 * we use inheritance to create more specific classes.
 * if you want to use the default styles, leave these classes empty
*/ 

.login .nugget_top{
	display:block;
	background-image: url(img/login_header.gif);
	background-repeat:no-repeat;
	color:#FFF;
	height:20px;
    font-weight:bold;
	padding-left:7px;
	padding-top:1px;
	}

.login .nugget_content {
	background-color:#858D98;
	border-style:solid;
	border-color:#8D8D8D;
	border-width:1px;
	border-bottom-width:0px;
	overflow:hidden;
	padding-left:5px;
	color: #161A20;
	width:147px;    
	}

.login .nugget_bottom {
	background-image:url(img/bottom_login_nugget.gif);
	background-repeat:no-repeat;
	height:4px;
	}

/*************************************************/

/* shopping cart nugget classes 
 * 
 */

.shopping_cart .nugget_top {
	display:block;
	background-image: url(img/shopping_header.gif);
	background-repeat:no-repeat;
	color:#FFF;
	height:20px;
    font-weight:bold;
	padding-left:7px;
	padding-top:1px;    
	}

/****************************************/
/* special offers nugget */
.special_offers .nugget_top {
	display:block;
	background-image: url(img/specialoffer_header.gif);
	background-repeat:no-repeat;
	color:#FFF;
	height:20px;
    font-weight:bold;
	padding-left:7px;
	padding-top:1px;
	}

/**************************/
/**********END LAYOUT SECTION *******************************************/

/* GENERAL STYLES SECTION*/ 

/* classes for the various containers used to arrange elements on page
 * tds, divs, spans
 */

.productAddToCart {
    margin-bottom:0px;
	width:44%;
	float:right;
    display:block;
	font-size:11px;
    }

.productLeftLinks {
	width:55%;
	float:left;
    margin-bottom:0px;
	color:#0C7DA7;
    }

/*divs that clear floated elements - with or without noticeable height */
.clearFixPlain, .clearfixplain {
	clear:both;
	height:0.1px;
	font-size:0.1px;
	border-style: none;
    }

.spacerClearBoth {
	clear:both;
	height:14px;
    }

/*block body container */
.basicDescriptionContent {
	width:187px;
	height:192px;
	border-top:solid 2.5px #F5F5F5;
	border-bottom:solid 3px #D0D0D0;
    }

/*divs to display main page product details */

/*main container for the right block */
.basicDescriptionRight {
    width:203px;
	height:199px;
    }

/*main container for the left block*/
.basicDescriptionLeft {
    width:203px;
	height:199px;
    }

/*left and right gradient edges for the blocks */
.basicDescriptionLeftEdge {
	width:8px;
	height:199px;
	background:url(img/edge_left.gif) no-repeat;
    }

.basicDescriptionRightEdge {
	width:8px;
	height:199px;
	background: url(img/edge_right.gif) no-repeat;
    }

/*******************END CONTAINER SECTION ********************************/

/*styles for the buttons used throught the shop */
.orangeButton{
    background-image:url(img/button_orange_medium.gif);
    background-repeat:no-repeat;
    background-color:transparent;
    width:63px;
    border-style:none;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
	text-align:center;
    }

.blueButton {
	background-image:url(img/button_blue_medium.gif);
	background-repeat:no-repeat;
    background-color:transparent;
    border-style:none;
	width:62px;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
    }

.blueButtonSmall {
    background:url(img/button_blue_small_light.gif);
    background-repeat:no-repeat;
    background-color:transparent;
    width:50px;
    border-style:none;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
    }

.blueButtonBig {
	background-image:url(img/button_blue_big.gif);
	background-repeat:no-repeat;
    background-color:transparent;
    text-align:center;
    text-decoration:none;
    border-style:none;
	width:78px;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
    }
    
/*buttons in the login nugget use a different style, as they no longer have the white background */
.login .nugget_content input.blueButtonBig {
	background-image:url(img/button_blue_big.gif);
	background-repeat:no-repeat;
    background-color:transparent;
    text-align:center;
    text-decoration:none;
    border-style:none;
	width:78px;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
    }

.login .nugget_content .blueButton {
	background-image:url(img/button_blue_medium_nowhite.gif);
	background-repeat:no-repeat;
    background-color:transparent;
    text-align:center;
    border-style:none;
	width:65px;
	font-size:11px;
	color:#FFF;
    padding:1px;
    cursor:pointer;
    }
/*****************************************/