﻿@import url('cag_layout.css');

body {
	background-position: top;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	background-color: #e0fae0;
	font-size: 100%;
	background-image: url('images/green_grad.jpg');
	background-repeat: repeat-x;
}
p {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.1em;
	color: #3D4B6B;
}
#container {
	border-top: 6px solid;
	width: 1024px;
	font-size: 0.875em;
	margin-left: auto;
	margin-right: auto;
	border-top-color: #530156;
	background-color: #F4F2F9;
}
/* This container is a wider one for the Party Olala page. */
#container2 {
	border-top: 6px solid;
	width: 1200px;
	font-size: 0.875em;
	margin-left: auto;
	margin-right: auto;
	border-top-color: #530156;
	background-color: #F4F2F9;
}
#masthead {
	border: 1px #333333 solid;
	width: 1022px;
	float: left;
	height: 291px;
	background-color: #D6CEE6;
	font-size: 9px;
}
#masthead2 {
	border: 1px #333333 solid;
	width: 1200px;
	float: left;
	height: 291px;
	background-color: #D6CEE6;
	font-size: 9px;
}
#masthead img, #masthead2 img {
	margin-top: 10px;
	margin-bottom: 7px;
	margin-left: 40px;
}
#masthead #subscribe, #masthead2 #subscribe {
	float: right;
	font-size: 12px;
	text-align: center;
	margin-bottom: 12px;
	margin-right: 12px;
}
#masthead form, #masthead2 form {
	margin: 0px;
}
#masthead a, #masthead2 a {
	margin: 0px;
	font-size: 9px;
}
#masthead #connect, #masthead2 #connect {
	padding: 0;
	float: left;
	width: 140px;
	margin-left: 20px;
	height: 40px;
}
#masthead #connect h4, #masthead2 #connect h4, #masthead #sharethis h4, #masthead2 #sharethis h4 {
	margin: 0;
	float: left;
	width: 140px;
	text-align: left;
	font-size: 11px;
	color: #384765;
}
#masthead #sharethis, #masthead2 #sharethis {
	float: left;
	width: 150px;
	margin-left: 20px;
	height: 60px;
}
#masthead .plain_float, #masthead2 .plain_float {
	float: left;
	border: 0px;
	margin-right: 0px;
	margin-left: 8px;
	margin-bottom: 0px;
	margin-top: 4px;
}
#masthead .logostyle, #masthead2 .logostyle {
	border-width: 0px;
	float: left;
	margin-right: 10px;
	margin-left: 20px;
	margin-top: 5px;
	margin-bottom: 8px;
}
#subscribe .subscribebox {
	border: 1px solid;
	border-color: #000000;
	background-color: #FFFFFF;
}
/* left and right padding plus width should equal 1024 */
#navbar {
	clear: both;
	background-color: #530156;
	padding: 4px 4px 4px 92px;
	width: 928px;
	text-align: center;
}
html>body #navbar {
	overflow: hidden;
	font-size: 12px;
}
#navbar ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: 100%;
	text-align: center;
}
#navbar li {
	float:left;
}
#navbar a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding-left: 14px;
	padding-right: 14px;
}
#navbar a:hover {
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
}
/* Page content holder */
#content {
	padding: 0px 0px 8px 12px;
	float: left;
	width: 850px;
	margin-bottom: 10px;
	background-color: #FFFFFF;
}
/* Special content for Party Olala page - iframe needs 990px */
#content2 {
	padding: 0px 0px 8px 12px;
	float: left;
	width: 1000px;
	margin-bottom: 10px;
	height: 1000px;
}
#content ul.infobox {
	padding: 6px 4px;
	clear: both;
	float: right;
	list-style-type: none;
	margin-right: 20px;
	margin-top: 6px;
	margin-bottom: 0px;
	line-height: 1.2em;
	text-align: center;
	display: block;
}
#content ul.infobox li {
	display: inline;
}
#content ul.bullets li {
	line-height: 1.4em;
}
#content ul.bullets {
	margin: 0px;
	margin-left: 38px;
	line-height: 1.4em;
	list-style-type: disc;
	margin-bottom: 8px;
	margin-right: 18px;
	font-size: 12px;
}
#content ul.bullets2 li {
	margin: 0px;
	margin-left: 38px;
	line-height: 1.4em;
	list-style-type: disc;
	margin-bottom: 8px;
	margin-right: 18px;
}
#content ul.bullets3 li {
	margin: 0px;
	margin-left: 38px;
	line-height: 1.4em;
	list-style-type: square;
	margin-bottom: 0;
	margin-right: 18px;
}
/* Styling for the form on the Contact Us page */
#emailform {
	margin-top: 40px;
	margin-left: 15px;
}
#emailform label {
	margin-right: 6px;
	padding-right: 10px;
	width: 200px;
	display: block;
	float: left;
	text-align: right;
	position: relative;
}
#emailform #button_row {
	margin-left: 176px;
	margin-top: 20px;
}
a.hugginslink {
	font-size: small;
	margin-left: 40px;
}
/* Main content section of Home page. Float left against left side navigation. */
#home_main {
	width: 842px;
	float: left;
	margin-bottom: 12px;
}
#home_main #intro {
	width: 600px;
	float: left;
}
#home_main #award {
	width: 90px;
	float: left;
}
#featured_main {
	border-bottom: 1px #E9E9E9 solid;
	border-top: 1px #E9E9E9 solid;
	float: left;
	width: 848px;
	background-color: #FFFFFF;
	margin-top: 18px;
}
#featured {
	float: left;
	width: 559px;
	background-color: #FFFFFF;
	padding-right: 8px;
}
.product_box {
	border: 1px #DFDFDF solid;
	float: left;
	width: 261px;
	background-color: #FFFFFF;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 182px;
	padding-right: 6px;
}
#content .product_box h5 {
	margin-top: 8px;
	margin-bottom: 0px;
}
#more_items {
	border: 1px #E9E9E9 solid;
	float: left;
	width: 267px;
	padding-left: 6px;
	padding-bottom: 8px;
	background-color: #F4F2F9;
	margin-left: 4px;
}
#testimonial {
	border: 3px #003399 double;
	float: left;
	width: 245px;
	padding-left: 6px;
	padding-bottom: 8px;
	background-color: #E8F5FF;
	margin-left: 4px;
	padding-right: 12px;
	padding-top: 12px;
}
#testimonial2 {
	border: 1px #CCCCCC dotted;
	padding: 0 4px 1px 16px;
	background: #F7F5FA url('images/quote_l.gif') no-repeat scroll left top;
	font-family: "lucida grande",arial,sans-serif;
	font-size: 14px;
	line-height: 1.4em;
	width: 230px;
	float: left;
}
#category_box {
	border: 1px #E9E9E9 solid;
	float: left;
	width: 846px;
	background-color: #DAD3EB;
}
#category_box a {
	color: #005B00;
}
.category {
	float: left;
	margin-left: 5px;
	margin-right: 3px;
	margin-bottom: 6px;
}
/* Right column for Home page.  Float left against main section */
/* Side navigation */
div#navbox {
	padding: 0px;
	margin: 0px 0px 10px;
	font-size: 11px;
	font-weight: normal;
	line-height: 17px;
	width: 154px;
	float: left;
	color: #000000;
	background-color: #F4F2F9;
	padding-top: 6px;
	height: auto;
	padding-bottom: 20px;
	clear: both;
	padding-right: 4px;
}
div#navbox h4 {
	font-size: 1.2em;
	margin-bottom: 1px;
	margin-top: 8px;
	margin-left: 15px;
}
#navbox img {
}
#navbox #navsect {
	padding-top: 18px;
	padding-bottom: 8px;
}
div#navsect form {
	margin: 0 0 6px 0;
	margin-left: 4px;
}
div#navsect fieldset {
	border: 0;
	margin: 0;
}
div#navsect a {
	margin-left: 1px;
	margin: 0;
	font-size: 1.2em;
	text-decoration: none;
	color: #000000;
	display: block;
}
div#navsect a:hover {
	background-color: #D6CEE6;
}
div#navsect ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-left: 14px;
}
div#navsect ul li {
	padding: 0;
	margin: 0px;
}
div#navsect ul .main_links li {
	padding: 0px 0px 4px 0px;
}
div#navsect ul.spaced li {
	margin-bottom: 5px;
}
/* To fix IE bug for not liking list items displayed block */
/* Have to trick IE (because it’s bugginess also allows us to trick it into behaving the way we want) into thinking that the display property */
/* is set to inline, after that we tell it we want the display property set to block. This will make IE really mad, but it works. */
/* With the html statements written like this, only IE can read it. The 'important' makes sure IE won't ignore it if styles change later */ 
* html #navsect li a {display:inline-block !important;}
* html #navsect li a {display:block !important;}
 
/* Content Styles */
#content p {
	font-size: 12px;
	margin-top: 8px;
	margin-left: 22px;
	margin-bottom: 8px;
}
#content p.indented {
	margin-bottom: 6px;
	margin-left: 80px;
	margin-right: 60px;
}
#content img.photo_plain {
	border-color: #747474;
	border-width: 1px;
	border-style: solid;
	float: left;
	margin-right: 6px;
	margin-bottom: 6px;
}
#content img.photo_text_r {
	float: left;
	padding: 3px;
	border: 1px solid #808080;
	margin-right: 8px;
}
h2 {
	color: #005B00;
	font-size: 1.7em;
	margin-bottom: 0px;
	clear: both;
	margin-top: 20px;
}
#content h3 {
	color: #AE0000;
	margin-top: 8px;
	font-size: 1.2em;
	margin-bottom: 8px;
}
#content h4 {
	font-size: 1.1em;
	margin-bottom: 0px;
	margin-top: 8px;
	color: #39013A;
}
#content h5 {
	color: #004711;
	margin-top: 16px;
	font-size: 14px;
	margin-bottom: 8px;
}
#content h5.heading {
	margin-bottom: 0px;
	margin-top: 6px;
}
#content ul {
	margin-left: 50px;
	margin-right: 150px;
	font-size: .9em;
	list-style-type: none;
	margin-top: 10px;
	margin-bottom: 8px;
}
#content ul li {
	margin-bottom: 2px;
}
#content .listbox ul {
	width: 150px;
	margin: 0;
}
#content .index {
	margin-left: 60px;
}
#leftcol {
	float: left;
	width: 500px;
}
#rightcol {
	float: right;
	width: 300px;
	margin-right: 30px;
}
/* Footer Styles */
#footer {
	text-align: center;
	clear: both;
	width: 1024px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: x-small;
	color: #000000;
}
#footer a {
	color: #530156;
}
#footer a:hover {
	text-decoration: underline;
}
/* Styling of Links */
a {
	color: #AE0000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* Styles for displaying header images */
.picbox {
	margin: 0px;
	border-style: none;
	width: 260px;
	height: auto;
	font-size: 12px;
	clear: both;
}
.item_picbox {
	margin: 0px;
	border-style: none;
	width: 830px;
	height: auto;
	font-size: 12px;
	clear: both;
}
.captionbox {
	margin: 0px;
	border-style: none;
	width: 250px;
	height: auto;
	font-size: 12px;
	margin-left: 500px;
}
#minibox {
	margin: 0px;
	border-style: none;
	width: 200px;
	height: auto;
	font-size: 12px;
	margin-top: 12px;
	float: left;
}
.description {
	font-size: 1.1em;
	width: auto;
	padding-top: 20px;
}
/* Text boxes used next to photos. */
.listbox {
	float: left;
}
/* Wider text box used next to small or narrow photos for nicer look. */
.textbox_w {
	width: 400px;
	float: left;
	margin-right: 5px;
	margin-left: 4px;
	line-height: 1.2em;
	font-size: 1.1em;
}
/* Miscellaneous classes */
.cart_buttons {
	float: right;
	width: 600px;
	height: auto;
	margin-right: 10px;
}
.view_cart {
	float: right;
	width: 150px;
	height: auto;
	margin-right: 10px;
}
.floatleft {
	float: right;
	padding-right: 4px;
}
.orderform {
	width: 820px;
	height: auto;
	float: left;
}
.orderform label {
	margin-right: 10px;
	padding-right: 10px;
	width: 220px;
	display: block;
	float: left;
	text-align: right;
	position: relative;
}
.part1 {
}
.part2 {
	background-color: #EFEFEF;
}
label {
	font-size: 12px;
}
.orderform .part1 textarea {
}
#content p.notice {
	width: 500px;
	margin-left: 60px;
	margin-top: 0px;
	margin-bottom: 16px;
	padding: 6px;
	border: 1px solid;
	border-color: #666666;
	background-color: #F0EEF7;
	font-size: .9em;
}
.bold {
	font-weight:bold;
}
.center {
	text-align: center;
}
.underline {
	text-decoration: underline;
}
.clear {
	height: .8em;
	clear: both;
}
.clearonly {
	height: .8em;
	clear: both;
}
.filler {
	height: 10em;
	clear: both;
}
.filler_small {
	height: 3em;
	clear: both;
}
#content p.divider {
	height: 1px;
	font-size: .1em;
	background-color: #739A7D;
	margin-right: 4px;
	margin-left: 0px;
}
#content p.short_divider {
	height: 1px;
	font-size: .1em;
	background-color: #E8E3F2;
	clear: both;
	margin-top: 6px;
	margin-bottom: 6px;
	margin-left: 0px;
}
#content p.cond_divider {
	height: 2px;
	font-size: .1em;
	background-color: #C0C0C0;
	margin-right: 48px;
	margin-left: 66px;
	margin-top: 12px;
	margin-bottom: 12px;
}
.attention {
	color: #C80000;
}
.condensed2 {
	margin-right: 50px;
}
.condensed3 {
	margin-right: 100px;
}
.indented {
	margin-left: 24px;
}
.align_top {
	vertical-align: top;
}
.arial {
	font-family:Arial;
	color:green;
}
#content p.tinytext {
	margin-bottom: 0px;
	margin-top: 0px;
	font-size: .8em;
}
.noborder {
	border-style:none;
}
.ralign {
	text-align: right;
	padding-right: 40px;
}
.indented2 {
	margin-left:80px;
}
