/* @override http://midamericagma.com/Templates/css/3screen.css */

/*	Desc: Midamericagma.com Screen Style Sheet
	Author: SSE Design Group http://ssedesigngroup.com
	Date: 10/27/08
	231f30 dk purple
	726399 lt purple
	b2904c gold
	999368 lt gold
	000000 black
=== === === === === === === === === === */
/*=STRUCTURE
=== === === === === === === === === === */
body {padding: 0;margin: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#b2904c; background-image:url(/Templates/images/3bgrd.jpg); background-position:left top; background-repeat:no-repeat;}

/*=COMMON
=== === === === === === === === === === */
a, a:link {text-decoration:underline; color:#b2904c;}
a:visited {color:#b2904c;}
a:hover {color:#726399;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
.smtext {font-size: 10px;}
.medtext {font-size:11px;}

img {border: 0px;}
.img {border:1px solid #726399;}
.img2left {float:left; margin-right:8px;border:1px solid #726399;}
.img2right {float:right; margin-left:8px;border:1px solid #726399;}


div.float {float: left; text-align: left; width: 350px; height: 200px; padding: 4px;margin:0px 10px 10px 0px; font-size:10px;}  
div.float p {text-align: left; padding:0px; margin:0px;}
div.float2 {float: left; text-align: center; width: 225px; height: 350px; padding: 4px;margin:0px 5px 10px 0px; font-size:12px;}  
div.float2 p {text-align: center; padding:0px; margin:0px;}
.product-right-float {float:right; width:175px; margin-left:0px; margin-right: 15px;font-size:12px;line-height:17px;}
.product-left-float {width:150px; float:left;}
.product_detail_music {font-size:11px;}
.product_entry_details, .product_detail_email, .product_detail_website {font-size:11px; line-height:14px;}

/*=WRAPPER
=== === === === === === === === === === */
#wrapper {margin:auto; width: 1002px; border:1px solid #000002; background-color:#000002;}

/*=NAVIGATION
=== === === === === === === === === === */
#navigation {background-image: url(/Templates/images/3side_nav.jpg); background-repeat:no-repeat; min-height:306px; color:#999368;}
#navigation .ntext {padding: 10px; text-align: right;}
/* MAGMAMENU */
#menuwrapper { width: 70%; margin-right: 0px; margin-left: 60px; }/* The wrapper determines the width of the menu elements */
#primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; width: 100%; margin-left: -1px;}/* Unless you know what you do, do not touch this */ 
#primary-nav ul { position: absolute; top: 0; left: 100%; display: none; }
#primary-nav li { margin-bottom: -1px; position: relative; }
/* Styling the basic apperance of the menu elements */
#primary-nav a {display: block; margin: 0px; padding: 3px 10px; color: #fff; font-weight: bold; font-size: 14px;text-decoration: none; background: #000 ;filter:alpha(opacity=30);
-moz-opacity:.30;opacity:.30; min-height:1em; border: 1px solid #ddd; border-right: 0px; border-left-width: 0px; border-top: 0px;}
#primary-nav li, #primary-nav li.menuparent { min-height:1em; /* Fixes IE7 bug*/}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive, #primary-nav li.menuactive a { color:#888;}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth { background-image: url(images/cms/arrow.gif); background-position: center right; background-repeat: no-repeat; }
/* Styling the apperance of menu items on hover */
#primary-nav li a:hover {color: #000; background-color: #b2904c;} 
#primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { background-color: #b2904c; }
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; }
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { display: block; }
#primary-nav li li a, #primary-nav li li a:visited  {color: #000; background-color: #b2904c; filter:alpha(opacity=70);
-moz-opacity:.70;opacity:.70; }
#primary-nav li li a:hover {background-color: #000; color: #b2904c;}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
/* section header */
#primary-nav li.sectionheader {border-left: 1px solid #006699; border-top: 1px solid #006699; font-size: 130%;font-weight: bold;padding: 1.5em 0 0.8em 0.5em;background-color: #fff;margin: 0;width: 100%;}
/* separator */
#primary-nav li hr.separator {display:block;height: 0.5em;color: #abb0b6;background-color: #abb0b6;width: 100%;border:0;margin:0;padding:0;border-top: 1px solid #006699;border-right: 1px solid #006699;}

/* LEFT SIDE
======================================= */
#sidebar {width: 222px; float: left; background-image:url(/Templates/images/3side_bkgrd.jpg); background-repeat:repeat-y; background-color:#b2904c; color:#999368;}
#sidebar .lstext {padding: 10px 10px 10px 20px; font-size:10px; letter-spacing: 1px;}

/*=CONTENT
=== === === === === === === === === === */
#maincontent {width: 778px; float: right; background-color:#000002; color:#999368;}
#maincontent .ctext {padding: 20px;}

.mp3 a, .mp3 a:link, .mp3 a:visited, .mp3 a:active, .mp3 a:hover {color:#999368;} 
a.mp3, a:link.mp3, a:visited.mp3, a:active.mp3, a:hover.mp3 {color:#999368;}

/* CLEARFIX 
======================================= */
.clear {clear:both;}

/*=FOOTER
=== === === === === === === === === === */
#footer {background-image:url(/Templates/images/3footer_bgrd.jpg); background-repeat:no-repeat; background-position: right; height:142px; width:778px; color:#000;}
#footer .ftext {text-align:center; font-size:10px; padding: 10px;}
.ftext a, .ftext a:hover, .ftext a:visited {color:#000;}

/*=FORMS
=== === === === === === === === === === */
.feedbackTextarea {width: 300px;}

/* CMS FORMATTING */
/*=NEWS
=== === === === === === === === === === */
div#news {margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */ border: 1px solid #000; 
  background: #FFE9AF; }
div#news h2 {line-height: 2em; background: #fff;}
.NewsSummaryIndex {padding-bottom:1em; /* padding for the news article summary */ margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */ border-bottom: 1px solid #231f30; letter-spacing: 1px;}
.NewsSummaryPostdateIndex {font-size: 90%; font-weight: bold;}
.NewsSummary {padding: 0.5em 0.5em 1em; /* padding for the news article summary */ margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */ border-bottom: 1px solid #ccc;}
.NewsSummaryPostdate {font-size: 90%; font-weight: bold;}
.NewsSummaryLink {font-weight: bold; padding-top: 0.2em;}
.NewsSummaryCategory {font-style: italic; margin: 5px 0;}
.NewsSummaryAuthor {font-style: italic; padding-bottom: 0.5em;}
.NewsSummarySummary, .NewsSummaryContent {line-height: 140%;}
.NewsSummaryMorelink {padding-top: 0.5em;}
#NewsPostDetailDate {font-size: 90%; margin-bottom: 5px; font-weight: bold;}
#NewsPostDetailSummary {line-height: 150%;}
#NewsPostDetailCategory {font-style: italic; border-top: 1px solid #ccc; margin-top: 0.5em; padding: 0.2em 0;}
#NewsPostDetailContent {margin-bottom: 15px; line-height: 150%;}
#NewsPostDetailAuthor {padding-bottom: 1.5em; font-style: italic;}
/* to add specific style to the below divs, uncomment them. */
/* 
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

/*=CALENDAR
=== === === === === === === === === === */
/*
Example stylesheet for Calendar module For using this "big"-class insert something like this in your page
or template;
{cms_module module='Calendar' table_id='big'}
*/
/* make all links red */
.calendar tr td a {color: red;}
/* highlight "today" for the small calendar */
.calendar-today {font-weight: bold;}
/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#cal-upcominglist .calendar-date-title, #cal-upcominglist .calendar-summary-title {display: none;}
#cal-upcominglist h2, #cal-upcominglist .calendar-date, #cal-upcominglist .calendar-summary {display: inline;margin-right: 5px;}
/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1 {color: red; font-size: 120%;}
#cal-list h2, cal-upcominglist h2 {font-size: 110%;}
/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big {margin: 0px; border-collapse: collapse; border: 1px solid black;}
/* nice squares for the #big table */
#big th {border: 1px solid black; padding: 3px; width: 75px;}
#big td {border: 1px solid black; vertical-align: top; padding: 3px; height: 75px; width: 75px;}
/* format summaries nicely in #big */
#big ul {margin: 0px; padding: 0px; padding-left: 5px;}
#big li {list-style-type: none; padding: 0px; margin: 0px;}
/* background colours for #big */
#big td {background-color: silver;}
#big .calendar-day {background-color: #80ff80;}
#big .calendar-today {font-weight: normal; background-color: #8080ff;}
.calendar-event .calendar-date-title, .calendar-event .calendar-summary-title, .calendar-event, .calendar-details-title {}

/* Lightbox */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/Templates/javascript/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/Templates/javascript/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }