/*
                          \\|////
                          \ _ _ /
                          ( o o )
+----------------------oOOo-(_)-oOOo-------------------------------------------+
Name	: framework.css
Usage	: css elastic framework
Date	: 11/30/07
Author	: Eddie Drye (edrye)
Copyright 1997 - Avoli, Inc.. All rights reserved. (www.avoli.com)
+---------------------------------Oooo-----------------------------------------+
                           oooO  (  )
                          (  )   ) /
                           \ (  (_/
                            \_)
*/

#transparency {filter: alpha(opacity=55); -moz-opacity: .55; background-color:#EEE; }

/* base */
body { 
	text-align: center; padding: 0; margin: 0; line-height: 1.7em; color: green;
	font-style:normal; font-variant:normal; font-weight:normal; font-size:.74em; font-family:Arial, sans-serif; 
	background: #000 url("../images/bg.jpg");
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
a { color: #295487; background: inherit; }
a:hover { color: #808080; background: inherit; }
p {	margin: 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 4px 0; margin: 0; letter-spacing: -1px; }
h2 { font: bold 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h3 { padding: 4px 0; margin:  0; }
ul { margin: 0; padding : 0; list-style: none; }
img { border: 0; }
hr { height: 1px; border-style: none; color: #d0d0d0; background-color: #C0C0C0; margin: 10px 0; }

#container {
	border: 1px solid #ccc;
	padding-left: 10px; padding-right: 10px;
	margin: 0 auto;
	width: 960px;
	text-align: left;
	background: #fff; 
}

/* NAVIGATION */
#transparency {filter: alpha(opacity=55); -moz-opacity: .55; background-color:#EEE; }
.clickable { cursor:hand; cursor:pointer }
/* .pagination { align: right; text-align: middle; font-size: 12px; height: 25px; margin-right: 2px; }
.paginationnumbers { cursor:pointer; float:right; background-color: white; border: 1px solid #ccc; padding-left: 3px; margin-top: 2px; padding-right: 3px; margin-left: 3px; margin-right: 3px; }
#pagination span { cursor:pointer; float:right; background-color: white; border: 1px solid #ccc; padding-left: 3px; margin-top: 2px; padding-right: 3px; margin-left: 3px; margin-right: 3px; }
*/

/* PAGINATION */
.pagination { align: right; height: 20px; font-size: 10px; margin-right: 2px; padding: 5px; color: black; }
.pagination ul { float: right; margin: 0; padding: 0; text-align: left; font-size: 14px; color: black; }
.pagination li { list-style-type: none; display: inline; margin-top: 2px; }
.pagination a, .pagination a:visited { padding: 0 5px; border: 1px solid #ccc; text-decoration: none; color: black; }
.pagination a:hover, .pagination a:active { border: 1px solid #ccc; color: #989898; background-color: white; }
.pagination a.currentpage { background-color: white; color: #009933 !important; border-color: #ccc; font-weight: bold; cursor: default; }
.pagination a.disablelink, .pagination a.disablelink:hover { background-color: white; cursor: default; color: black; border-color: #ccc; font-weight: normal !important; }
.pagination a.prevnext { font-weight: bold; }


/* CHECK BOX STARS */
.CheckboxStar {background:url('CheckboxUncheckedStar.gif') no-repeat center center;display:block;height:14px;width:14px;}
a.CheckboxUncheckedStar {background:url('CheckboxUncheckedStar.gif') no-repeat center center;}
a.CheckboxCheckedStar {background:url('CheckboxCheckedStar.gif') no-repeat center center;}
a.CheckboxUncheckedStar, .CheckboxCheckedStar {display:block;width:14px;height:14px;cursor:pointer;cursor:hand;}
a.CheckboxUncheckedStar img, a.CheckboxCheckedStar img {width:14px;height:14px;display:inline;border:none;} /* Netscape 6.0 Fix */


/* -------------------------------------------------------------------------------------------------------------------------
	Message Boxes (See: framework.js change function which closes/hides the message box upon a click)
   -------------------------------------------------------------------------------------------------------------------------*/
.info, .success, .warning, .error, .default, .validation {
	border: 1px solid;
	padding-left: 50px;
	padding-right: -0px;
	padding-top: 18px;
	padding-bottom: 18px;
	background-repeat: no-repeat;
	background-position: 10px center;
	margin-bottom: 10px;
	margin-right: 10px;
}
.white, .gray, .blue, .green, .yellow, .red {
	border: 1px solid;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 18px;
	padding-bottom: 15px;
	background-repeat: no-repeat;
	background-position: 10px center;
	cursor:hand; cursor:pointer;
	margin-bottom: 10px;
	margin-right: 10px;
}
.shadow {
	color: #606060;
	border: 1px solid #ccc;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 18px;
	padding-bottom: 15px;
	background-color: white;
	background: white url("../images/messages/bg-gradient-gray.png") repeat-x top left;
	cursor:hand; cursor:pointer;
	margin-bottom: 10px;
	margin-right: 10px;
}
.debug {
	border: 1px solid;
	padding-left: 50px;
	padding-right: 0px;
	padding-top: 18px;
	padding-bottom: 18px;
	background-repeat: no-repeat;
	background-position: 10px center;
	cursor:hand; cursor:pointer;
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('../images/messages/debug.png')
	margin-bottom: 10px;
	margin-right: 10px;
}
a {
	text-decoration: none;
}   
.default {
	color: #606060;
	background-color: #F8F8F8;
	background-image: url('../images/messages/info.png')
}
.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('../images/messages/info.png')
}
.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('../images/messages/success.png')
}
.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('../images/messages/warning.png')
}
.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../images/messages/error.png')
}
.validation {
	color: #D63301;
	background-color: #FFCCBA;
	background-image: url('../images/messages/warning.png')
}	
.white {
	color: #606060;
	background-color: #fff;
	border: 1px solid #ccc;
}
.gray {
	color: #606060;
	background-color: #F8F8F8;
}
.yellow {
	color: #9F6000;
	background-color: #FEEFB3;
}
.red {
	color: #D8000C;
	background-color: #FFBABA;
}
.blue {
	color: #00529B;
	background-color: #BDE5F8;
}	
.green {
	color: #4F8A10;
	background-color: #DFF2BF;
}
div.hidden {
	display: none;
}
div.promptshow {
	background: #bbb;
	display: block;
}	




/* -------------------------------------------------------------------------------------------------------------------------
	LIGHTBOX INTERSTITIAL EFFECT
		<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
		<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
		<div id="fade" class="black_overlay"></div>
   ------------------------------------------------------------------------------------------------------------------------- */
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity: .70;
	filter: alpha(opacity=40);
}
.white_content {
	display: none;
	position: absolute;
	padding: 16px;
	left: 125px;
	width: 990px;
  	margin-left: auto;
  	margin-right: auto;
	margin: 0 auto; 
	text-align: center;
	border: 5px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}


/* BOXING */
.box { color: #383838; margin-left: 8px; margin-right: 2px; margin-bottom: 10px; padding-left: 10px; padding-top: 12px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; border: 1px solid #ccc; }
.boxtitle { float: left; border-bottom: 1px solid #ccc; width: 100%; margin-left: -10px; margin-right: -10px; margin-top: -11px; margin-bottom: 0px; padding-left: 12px; padding-top: 6px; padding-bottom: 4px; width: 100%; height: 22px; background-color: #F8F8F8; }
.boximagearrow { align: right; margin-right: -12px; margin-top: -13px;}
.boxdetails { background-color: #F8F8F8; border-top: 1px solid #ccc; padding: 10px; }
.boxproduct { float: left; width: 225px; margin-left: 8px; margin-right: 2px; margin-bottom: 10px; padding-left: 10px; padding: 0px; border: 1px solid #ccc;}
.boxproductimage { height: 225px; width: 225px; cursor:hand; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #ccc; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 0.4; }
.boxproductimage:hover img{
	border: 1px solid black;
}
.boxproductimage:hover{
	color: green; /* irrelevant definition to overcome IE bug */
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity: 1;
}
 
.white_content {
	display: none;
	position: absolute;
	padding: 16px;

	left: 125px;
	width: 990px;
  	margin-left: auto;
  	margin-right: auto;
	
	margin: 0 auto; 
	text-align: center;
	
	border: 5px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

/* layout */
#content { width: 100%; } /* 880px */
#logo { float: left; font-size: .9em; color: #808080; background: #fff; line-height: 1.3em; margin-top: 15px;}
#top p { float: right; color: #808080; background: #fff; margin: 20px 5px 1px 0; text-align: right; font-size: .9em; }
#pages{ padding: 71px 0 2px 0; margin: 00; border-bottom: 1px solid #ccc; text-align: right; }
#pages li { list-style: none; display: inline; margin: 0; }
#pages li a{ text-decoration: none; padding: 5px 10px; margin-right: 3px; border: 1px solid #ccc; }
#pages li a:hover{ color: #808080; background: #FFFFCC; }
#pages li a.current{ border-bottom: 2px solid #fff; }
.menutip { text-align: right; width: 99%; height: 10px; }
.menutip h2 { color: #295487; font-size: 1.0em; font-weight: normal; border-bottom: 0px;}
#intro { background: #5180B6 url("../images/introbg.gif") repeat-x bottom left; color: #fff; padding: 10px 15px; margin: 0 0 10px 0; }
#intro a { color: #FFF; background: inherit; }
#intro2 { background: #778899 repeat-x bottom left; color: #fff; padding: 10px 15px; margin: 0 0 10px 0; }
#intro2 a { color: #FFF; background: inherit; }
#left { clear: left; float: left; width: 77%; margin: 0 0 10px 0; background: #fff;} /* 625px */
#center a { background: #fff; color: #295487; }
#center { padding: 3px 15px 15px 13px; background: #fff url("../images/bgshade.gif") repeat-x; color: #444; }	
#center li { list-style: square; margin: 0 0 0 15px; }
.left_box { clear: both; background: #f4f4f4; vertical-align: center; color: #383838; font-size: 14px; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 5px 14px; margin: 0 0 15px 0; }
#commercial_box { float: right; width: 20%; text-align: center; margin: 0 0 0 25px; padding: 15px 10px; border: 1px solid #ccc; }  /* 180px */
.half { float: left; width: 45%; padding: 0 10px 10px 15px; }	
.half li { padding: 2px 0 3px 13px; border-bottom: 1px dotted #ccc; background: #fff url("../images/bullet.gif") no-repeat center left; color: #295487; }
.half li a{ background: #fff; color: #295487; }
.half li a:hover{ background: #fff; color: #808080; }
#right { float: right; width: 23%; background: #fff;} /* 243px */
.code { background: #FAF5CF; color: #393409; border: 1px solid #AFA238; padding: 4px 13px; }


/* footer */
#footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc;}
#footer .right { float: right; }


/* css grid - alternate row */
/* syntax:
	<p id="example1">
		<span>This</span>
		<span class="altern8">That</span>
		<span>The Other</span>
		<span class="altern8">4</span>
	</p>
*/
#example1, #example2 { background: #ccc; border: 2px solid black; }
// span { background: white;display: block; }
// span.altern8 { background: #5b5; }
#example2 span { display: inline; }


/* AVOLI STYLE LOGO */
#head {
	 position: absolute; left: 1px; 
	 top: 1px; 
	 height: 342px; 
	 background-image: url('../images/logo.png'); 
	 background-repeat: no-repeat; 
	 background-position: 0 0;
}


 
/* table look alikes */
div#layout { display: table; }
div.hgroup { display: table-row; }
div.cell { display: table-cell; }

/* box rounded corners */
/* URL: http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=DBDBDB&sz=5px */
.spiffy { display:block }
.spiffy *{ display:block; height:1px; overflow:hidden; font-size:.01em;background:#DBDBDB }
.spiffy1 { margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px;border-left:1px solid #efefef; border-right:1px solid #efefef; background:#e4e4e4 }
.spiffy2 { margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #fbfbfb;border-right:1px solid #fbfbfb; background:#e1e1e1 }
.spiffy3 { margin-left:1px; margin-right:1px; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; }
.spiffy4 { border-left:1px solid #efefef; border-right:1px solid #efefef }
.spiffy5 { border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4 }
.spiffyfg { background:#DBDBDB }

/* form */
.respond form { border:1px solid #ccc; background:#f4f4f4; margin:0 0 20px; padding:0 9px; }
.respond text { background:#fff; border:1px solid #ccc; color:#444; overflow:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:10px; }
.respond textarea { width:95%; height:100px; background:#fff; border:1px solid #ccc; color:#444; overflow:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:10px; }
.respond input#submit { width:72px; height:29px; padding:0; }
.respond p { margin:20px 0; padding:0; }
#commentform input { background:#fff; border:1px solid #ccc; color:#333; padding-left:10px; }

/* news */
form { padding: 0; margin: 0;}
fieldset { border: 1px solid #ccc; padding: 10px 8px; margin: 0 0 8px 0;}
input { margin: 0; }
input.text { width: 140px; border: 1px solid #ccc; padding: 3px; }
textarea {width: 97%; height: 20em; padding: 3px; border: 1px solid #ccc;}
.date { border-top: 1px dotted #ccc; padding: 5px 0; margin: 10px 0 0 0;}
.comment { background-color: #ececec; padding: 10px; color: #000; }
.user { background: #fff url("../images/arrow.gif") 20px 0 no-repeat; padding: 20px 0 0 12px; margin-bottom: 2em; color: #4A4A4A; }
.user p { display: inline; background: #FFF8C0; padding: 3px 4px; color: #000; border-bottom: 1px solid #ccc; }
.commentsbox { padding: 12px; margin: 0 10px 10px 0;}
.commentsbox h2 { color: #D32411; background: inherit; }
.link_button { background: #eee; border: 1px solid #ccc; padding: 2px 6px; margin: 0 2px 0 0; color: #808080; text-decoration: none; }
.template { float: left; height: 250px; width: 260px; margin: 0 30px 30px 0; }
.thumb { clear: both; margin: 0 0 1px 0; border: 3px solid #eee; }

/* 
	SEXY BUTTONS
	
	SYNTAX:
	<a class="button" href="#" onclick="this.blur(); return false;"><span>Submit</span></a>
	<a class="button" href="#" onclick="this.blur(); return false;"><span>This is a long button</span></a>
	
	REQUIREMENTS: Requires <span> hyperlink text </span>
*/
// a { color: #C08; }
a.button { background: url('../bg_button_a.gif') no-repeat top right; color: #444; display: block; float: left; height: 24px; margin-right: 6px; padding-right: 18px; text-decoration: none; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:arial, sans-serif }
a.button span { background: url('../images/bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding-left:18px; padding-right:0; padding-top:5px; padding-bottom:5px }
a.button:active { background-position: bottom right; color: #000; outline: none; }
a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; }


/* 
	CSS GRID - ALTERNATE ROW COLOR
	
	SYNTAX:
	<p id="example1">
		<span>This</span>
		<span class="altern8">That</span>
		<span>The Other</span>
		<span class="altern8">4</span>
	</p>
*/
#example1, #example2 { background: #ccc; border: 2px solid black; }
span { background: white; display: block; }
span.altern8 { background: #F6F6F6; }
#example2 span { display: inline; }


/* 
	CSS REPORT - ALTERNATE ROW COLOR

	SYNTAX:
	<div class="report">
		<span class="header">
			<div style="position: absolute; left: 0px; top: 0px; width: 300px; height: 20px; border-right-width: 0px;">Column Name</div>
			<div style="position: absolute; left: 300px; top: 0px; width: 300px; height: 20px;">Column Name</div>
		</span>
		
		<span class="even">
			<div style="position: absolute; left: 0px; top: 20px; width: 300px; height: 20px; border-right-width: 0px;">Cell 1</div>
			<div style="position: absolute; left: 300px; top: 20px; width: 300px; height: 20px;">Cell 2</div>
		</span>
		
		<span class="odd">
			<div style="position: absolute; left: 0px; top: 40px; width: 300px; height: 20px;">Cell 3</div>
			<div style="position: absolute; left: 300px; top: 40px; width: 300px; height: 20px;">Cell 4</div>
		</span>

		<span class="even">
			<div class="even" style="position: absolute; left: 0px; top: 60px; width: 300px; height: 20px; border-right-width: 0px;">Cell 5</div>
			<div class="even" style="position: absolute; left: 300px; top: 60px; width: 300px; height: 20px;">Cell 6</div>
		</span>
	</div>
	<br /><br />
*/
#report { text-align: center; position: relative; background: white; border: 1px solid #DBDBDB; width: 100px; height: 60px; }
span { background: white; display: block; }
span.header { border: 1px solid #DBDBDB; background-color: #DBDBDB; }
span.even { border: 1px solid #DBDBDB; background-color: white;}
span.odd { border: 1px solid #DBDBDB; background-color: #F6F6F6; }