/* CSS Document */
/*
Text, light gray: 204,204,204 #cccccc
Text, dark gray: 153,153,153 #999999
Orange: 255,102,0 #ff6600
light green (in the nav bar and header): 153,204,102 #99cc66
lime green, (nav tabs): 128,191,0 #80bf00
The blue (that we dropped): 63,166,147 #3fa693
The mint green (that we dropped): 204,255,204 #ccffcc
*/

/*Layout and positioning for main sections*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
	background-color: #f1f1f1;
	text-align: left;
	color: #565656;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 1.2em;
}

#container{
	width: 1024px;
	margin: 0 auto;
}

#wrapper {
	background-color: #FFFFFF;
	background-repeat: repeat;
	width: 1024px;
	border-left: #cccccc;
	border-right: #cccccc;
	border-left-width: 1px;
	border-right-width: 1px;
	border-left-style: solid;
	border-right-style: solid;
	border-bottom-color: #99cc66;
	border-bottom-style: solid;
	border-bottom-width: 10px;
	position: relative;
}

/*General Styling rules*/
h1{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: .5em;
}

h2{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: .4em;
}

h3{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: .25em;
}

h4{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: .1em;
}

p.serif{
	font-family: Garamond, Cambria, Georgia, "Times New Roman", serif;
	font-size: 16px;
}

h1.serif{
	font-family: Garamond, Cambria, Georgia, "Times New Roman", serif;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: .5em;
}

h2.serif{
	font-family: Garamond, Cambria, Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: .4em;
}

h3.serif{
	font-family: Garamond, Cambria, Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: .25em;
}

h4.serif{
	font-family: Garamond, Cambria, Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: .1em;
}

/*Contains the header graphic and the search div is inside of it, position is set to relative for the header, so search is positioned relative to the header only, not the body*/
#header {
	background: url(images/headergraphic.jpg);
	background-repeat:no-repeat;
	background-position: top;
	width: 1024px;
	height: 150px;
	border-bottom: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 10px;
	position: relative;
}

#searchwrap{
	position: absolute;
	top: 105px;
	left: 810px;
}

#search {
	position: relative;
}

.searchbutton{
	position: absolute;
	top: -10px;
	left: 165px;
}

.searchbox{
	position: absolute;
	top: 0px;
	left: 0px;
}

/*End Header Section*/

/*This is the large green strip running behind the navigation buttons*/
#navarea{
	background: url(images/navarea.jpg);
	background-repeat:no-repeat;
	background-position: top;
	width: 1024px;
	height: 140px;
	border-bottom: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 10px;
	position: relative;
}

/*The Tag line inside the green strip, as the tagline adjusts, feel free to increase or decrease the font size and use classes to bold or unbold certain words, set to absolute position, so if the size increases, to center it on the strip, simply remove some of the top margin till it's where you want it*/
#tagline{
	color: #333333;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.2em;
	position: absolute;
	top: 45px;
	left: 42px;
	font-family:Gill Sans MT, Arial;
}

/*Begin Navigation button area*/
#nav{
	position: absolute;
	top: 155px;
	left: 400px;
}

#nav a img{

}

#ienav{
	position: absolute;
	left: -9999px;
}
/*End Navigation Buttons*/

#contentwrapper
{
	min-height: 950px;
	height: 900px;
}

#contentwrapper ul
{
	margin-bottom: 20px;
}
/*This is the large javascript box with the three tabs and the frame*/
/*Styles the ajax content area as a whole*/
#ajaxcontent {
	float: left;
	margin-left: 12px;
	margin-bottom: 348px;
	position: relative;
}

/*Div used to tag the javascript, can be styled but not necessary*/
.maincontent{

}

/*the orange frame that surrounds the iframe content and its positioning*/
.maincontent .framecontent{
	background: url(images/frame.jpg);
	background-repeat: no-repeat;
	width: 530px;
	height: 460px;
	position: absolute;
	top: 0px;
	left: 140px;
	z-index: 2;
}

/*The actual iframe as it appears on the page, pulling content from an external file*/
.maincontent .framecontent .frametext iframe{
	width: 490px;
	height: 420px;
	margin-left: 20px; 
	margin-right: 20px;
	margin-top: 20px;
	z-index: 3;
}

/*The class for the non-orange colored buttons, used for the javascript call*/
.maincontent .buttons {
margin: 0;
}

/*The first button, what we do, green*/
.maincontent .buttons .buttonone{
	position: absolute;
	top: 0px;
}
/*The second button, who we are, blue*/
.maincontent .buttons .buttontwo{
	position: absolute;
	top: 95px;
}
/*The third button, why use shamrock, light green*/
.maincontent .buttons .buttonthree{
	position: absolute;
	top: 190px;
}

/*holds the frame content, for javascript*/
.maincontent .boxcontent {
	
}

/*the first orange button, what we do*/
.maincontent .orangebuttonone{
	position: absolute;
	top: 0px;
}
/*the second orange button, who we are*/
.maincontent .orangebuttontwo{
	position: absolute;
	top: 95px;
}
/*the third orange button, why use shamrock*/
.maincontent .orangebuttonthree{
	position: absolute;
	top: 190px;
}

/*Styles the content inside of the iframes in the ajaxcontent box, found on a separate HTML file*/
.iframecontent{
	background-color: #FFFFFF;
	text-align: left;
	color: #999999;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 1.2em;
	padding-right: 10px;
	padding-top: 5px;
}

.iframecontent em
{	
	font-weight: bold;
}

.iframecontent p
{
	margin-bottom:10px;
}

.iframecontent li
{
	margin-bottom:10px;
}
/*End large javascript box*/

/*This is the content area on the center-left below the javascript frame NOTE: in the 
event that the content in this column exceeds the length of the content in the two left 
hand sections and is then breaking through the footer, give that pages version of the 
secondcontent section a span and class and assign additional margin. This is set to clear 
left to allow mobile phone flow and the ajax box to be absolutely positioned.*/
#secondcontent{
	clear: left;
	width: 668px;
	margin-left: 12px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-top: 10px;
	border-top: #cccccc;
	border-top-style: solid;
	border-top-width: 1px;
	min-height: 400px;
}

/*Found on non-home/index pages in place of the ajax box only*/
#firstcontent{
	float: left;
	width: 668px;
	margin-left: 12px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#firstcontent p, #secondcontent p, #firstcontent ul, #secondcontent ul
{
	margin: 20px 0px 20px 0px;
}

#firstcontent em, #secondcontent em
{
	font-weight: bold;
}

#firstcontent h3, #secondcontent h3
{
	text-decoration: underline;
	margin-bottom: 20px;
}

#firstcontent ul, #secondcontent ul
{
	margin-left: 75px;
}

/*This is the content area on the right side of the page including the special offer region*/
#rightcontent{
	position: absolute;
	top: 310px;
	left: 700px;
	margin-right: 12px;
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	border-left: #cccccc;
	border-left-style: solid;
	border-left-width: 1px;		
}

/*The Special Offer Region inside the right hand column, border size can be increased if needed*/
#specialoffer, #quotes{
	margin: 0px 10px 20px 10px;
	padding: 10px;
	border: #cccccc;
	border-style: solid;
	border-width: 1px;
	line-height: 1.4em;
}

#specialoffer h1, #specialoffer h2, #specialoffer h3, #quotes h1, #quotes h2, #quotes h3
{
	text-align: center;
}

#specialoffer h1, #quotes h1
{
	color: #99cc66;
	line-height: 1.2em;
}

#specialoffer em, #quotes em
{
	font-style: italic;
}

#quotes p
{
	margin-top: 20px;
	font-family: Georgia, Times New Roman;
}

#quotes .author
{
	margin-top: 12px;
	font-family: Arial;
	font-size:12px;
	font-style: italic;	
}
/*The green button in the special offers box, centered by setting the left margin. If you need to adjust the position due to any other page changes or increasing the border size of the region, simply add left margin to center it*/
.specialofferbutton img{
	clear: both;
	margin-left: 52px;
	margin-top: 10px;
}

.specialofferheading{
	color: #99cc66;
	text-align: center;
}

#partners, #quotes{
	float: right;
}

/*Begin Footer Section*/

#footer{
	margin: 0 auto;
	width: 1024px;
	padding-top: 20px;
	clear: both;
}

#footernav{
	color: #000000;
}

/*Standard HTML links to pages*/
#footernav a, footernav a:visited{
	color: #000000;
	text-decoration: none;
	border: none;
	padding-left: 10px;
}

#footernav a:hover, footernav a:active{
	color: #99cc00;
	text-decoration: none;
	border: none;
	padding-left: 10px;
}

/*The copyright and phone number*/
#footernav p{
	margin-top: 8px;
	margin-left: 10px;
}

/*The phone number is set to a larger size and positioned to the right*/
.phone{
	font-size: 24px;
	margin-left: 90px;
}

/*The RSS button*/
#rss{
	margin-top: 0px;
	float: right;
	width: 187px;
	height: 140px;
}

/* Some more Shannon mods */
a:link, a:visited 
{
	/* 99cc66 */
	color: #699c36; 
	text-decoration: none;
	font-weight: normal;
}
a:hover, a:active 
{	
	text-decoration: underline;
}

fieldset
{
	margin: 2em;
	padding: 1em;
	border: 1px solid #ccc;
	background: #f8f8f8;
}
legend
{
	font-weight: bold;
	font-size: larger;
}
label
{
	display: block;
	font-weight: bolder;
}

/******** SPECIAL OFFERS **********/
table#offer
{
	border: solid 1px #000;	
	border-collapse: collapse;
	font-family: Times New Roman, Serif;
	font-size: 14px;
	width: 400px;
	margin: 0 auto;
}
table#offer th, table#offer td
{
	padding: 3px;
}
.offer_header
{
	font-family: Arial;
	color: #FAFCF7;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	background-color: #73B128;
}
.offer1
{
	background-color: #FAFCF7;
}
.offer2
{
	background-color: #C9E4AF;
}
.offer3
{
	background-color: #99CC67;
}
.offer_type, .offer_price
{
	color: Red;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
}

/***/
p.mousetype
{
	font-size: 0.8em;
	font-style: italic;
}