@charset "utf-8";
img {
	border:none;
}
.clear {
	clear:both;
}
p {
	margin:7px 0;
}
p.author {
	text-align:right;
	color:#f3046a;
	font-weight:bold;
}
strong.author {
	color:#f3046a;
	font-weight:bold;
}
strong.title {
	color:#1973d0;
	font-weight:bold;
}
p.question { color:#1973d0; font-size:115%; font-weight:bold; }
p.answer { color:#f3046a; }
p.learnmore { text-align:right; }
.hr {
	height:10px; 
	width:100%; 
	background:url(../../images/main/hr.jpg) repeat-x center left;
	margin:5px 0;
}
ul { list-style-image:url(../../images/main/bullet.jpg); }

/*= Typography
*************/
a {
	color:#1973d0;
	text-decoration:none;
}
a:hover {
	color:#f3046a;
	text-decoration:underline;
}
h2 {
	color:#1873d0;
	margin-top:0;
}
strong { color:#1973d0;}
#footer, #footer a {
	color:#686868;
	font-size:90%;
}
#footer a:hover {
	color:#1973d0;
}
#boxContainer h2 {
	background:url(../../images/header/large.jpg) no-repeat;
}
#boxContainer h3 {
	background:url(../../images/header/medium.jpg) no-repeat;
	width:264px;
}
#boxContainer h4 {
	background:url(../../images/header/small.jpg) no-repeat;
	width:165px;
}
#boxContainer h2, #boxContainer h3, #boxContainer h4 {
	font-size:14px;
	font-weight:bold;
	color:#fff;
	margin:0 0 10px;
	padding:0 0 0 25px;
	height:20px;
}
strong {
	font-weight:bold;
	font-size:12px;
	color:#3f3f3f;
}
.date {
	font-size:10px;
	font-weight: lighter;
}
p.learnmore {
	text-align:right;
	color:#1973d0;
	margin:0 15px 10px;
}


body {
	font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background: #fff url(../../images/main/bg-bot-repeat.jpg) repeat-x bottom;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
#container {
	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#headerContainer {
	width:100%;
	height:175px;
	padding:0;
	margin:0 0 20px;
	background:#fff url(../../images/main/bluebar.jpg) repeat-x bottom;
}
#header {
	margin:0 auto;
	padding:0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	width:800px;
	background:url(../../images/main/bluebar-text.jpg) no-repeat bottom left; 
	height:175px;
	position:relative;
}
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	background:url(../../images/main/pink-dot-logo.jpg) no-repeat;
	text-indent:-9000px;
	height:148px;
	width:138px;
	float:left;
	position:relative;
	left:-20px;
}
#header #navigation {
	float:right;
	height:80px;
	margin:60px 0 0 15px;
}
#header #navigation a {
	padding:0 11px;
	vertical-align:top;
	display:block;
	float:left;
	text-indent:-9000px;
}

a.home { width:49px; height:66px; background:url(../../images/navigation/home.jpg) no-repeat;}
a:hover.home { background:url(../../images/navigation/home_over.jpg) no-repeat;}
a.menu { width:49px; height:66px; background:url(../../images/navigation/menu.jpg) no-repeat;}
a:hover.menu {background:url(../../images/navigation/menu_over.jpg) no-repeat;}
a.howitworks {width:52px; height:80px; background:url(../../images/navigation/how-it-works.jpg) no-repeat;}
a:hover.howitworks {background:url(../../images/navigation/how-it-works_over.jpg) no-repeat;}
a.delivery {width:63px; height:80px; background:url(../../images/navigation/delivery-info.jpg) no-repeat;}
a:hover.delivery {background:url(../../images/navigation/delivery-info_over.jpg) no-repeat;}
a.faq {width:49px; height:66px; background:url(../../images/navigation/faq.jpg) no-repeat;}
a:hover.faq {background:url(../../images/navigation/faq_over.jpg) no-repeat;}
a.about {width:49px; height:66px; background:url(../../images/navigation/about.jpg) no-repeat;}
a:hover.about {background:url(../../images/navigation/about_over.jpg) no-repeat;}
a.contact {width:66px; height:66px; background:url(../../images/navigation/contact.jpg) no-repeat;}
a:hover.contact {background:url(../../images/navigation/contact_over.jpg) no-repeat;}
a.qpons {width:50px; height:66px; background:url(../../images/navigation/qpons.jpg) no-repeat;}
a:hover.qpons {background:url(../../images/navigation/qpons_over.jpg) no-repeat;}


#mainContent {
	margin:20px 0;
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width:860px;
}
#footer {
	position:relative;
	text-align:center;
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	color:#686868;
	clear:both;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/*= Home Page Specific
**********************/
#slideshow {
	width:479px;
	height:241px;
	float:left;
	position:relative;
	top:-1px;
}
#boxContainer {
	width:851px;
	background:#fff url(../../images/main/box-rep.jpg) repeat-y;
}
#boxContainer .box {
	width:811px;
	padding:0 20px 0 20px;
}
.medblock, .smallblock, .medblock p, .smallblock p, .medblock h3, .smallblock h4 {

}
.medblock {
	width:289px;
	float:left;
}
.smallblock {
	width:190px;
	float:left;
}
img.product {
	padding:0 3px;
}
/* = Three Col Layout (thrColFixCtrHdr) 
********************/

#left {
	width:148px;
	float:left;
	text-align:center;
}
#left .header {
	text-align:center;
	padding:0;
	margin:0 0 5px;
}
#left ul#sidenav {
	margin:0 0 0 19px;
	padding:0 0 15px;
	width:109px;
	list-style-type:none;
	list-style-image:none;
	text-align:center;
	background:url(../../images/sidenav/rep-border.jpg) repeat-y;
}
#left ul#sidenav li {
	width:99px;
	padding:0 5px;
	border-bottom:1px solid #ccc;
}
#left ul#sidenav li a {
	color:#8c8c8c;
	text-decoration:none;
}
#left ul#sidenav li a:hover {
	color:#f3046a;
} 
#center {
	width:435px;
	float:left;
	padding:0 25px;
}
.twoColFixCtrHdr #center {
	width:685px;
	padding:0 0 0 25px;
	margin:0;
}
.twoColFixCtrHdr .smallblock {
	width:221px;
	float:left;
	text-align:center;
}
#right {
	width:212px;
	float:left;
}

/* = Form Styling 
****************/

form {
	margin:0;
	padding:0;
	text-align:left;
}
fieldset {  
	float: left;  
	clear: both;  
	width: 221px;  
	margin: 0;  
	padding: 0;  
	border: none;
	background-image: url(../../images/form/form-rep-border.jpg);  
	background-repeat: repeat-y; 
}
fieldset ol {  
	padding: 0 1em 0 1em;
	margin:0; 
	list-style: none;
}
fieldset li {
	float:left;  
	clear:left;  
	width:100%;  
	padding-bottom: .5em;
}
li input {
	width:7.5em;
	padding:0;
	margin:0;
}
label {  
	float: left;
	width:7em;
	margin-right: .5em;  
	text-align: left;
}

textarea {
	width:190px;
	height:100px;
}

fieldset.submit {
	width:68px;
	height:14px;
	float: none;
	padding:0;
	background: url(../../images/form/submit-button.jpg) no-repeat;
}
.formbutton{
	cursor:pointer;
	border: none;
	background:#fff;
	width:68px;
	height:14px;
	float:right; 
	background: url(../../images/form/submit-button.jpg) no-repeat;
}