/*
--------------------------------------------------
Zenodro.com GLOBAL STYLES
Last revised 30 January 2009
--------------------------------------------------
*/
/*
--------------------------------------------------
Color palette:
--------------------------------------------------

Orange #ff9900
Orange 50% #ffcc80

Very light yellow #ffffbb
Light yellow #ffff99
Yellow-green #99cc00
Yellow-green 50% #cce680
Yellow-green 33% #ddeeab
Dark yellow-green #669933
Very dark yellow-green #336600
Green color-match border #47713a
Green color-match #09481e
Dark green color-match #0a360f

Very dark grey #333
DarkGray #a9a9a9
Silver #c0c0c0
White #fff

*/
/*
--------------------------------------------------
GLOBAL RESET
--------------------------------------------------
undohtml.css (CC) 2004 Tantek Celik. Some Rights Reserved.
*/
:link, :visited { text-decoration: none }
ul, ol	{ list-style: none }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em }
body, html, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, img { margin: 0; padding: 0; }
a img, :link img, :visited img { border: none }
address { font-style: normal }

/*
--------------------------------------------------
DEFAULT HTML STYLES
--------------------------------------------------
This section concerns generalizations and common elements
*/
body	{
		color: #ffffbb; /* Very light yellow */
		font: 14px "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-align: center;	/* horizontal centering in Win IE */
		background: #333 url(../images/background-dark.png) no-repeat top center; /* Dark green color match */
		}

/* Links */
a		{
		color: #fff; /* White */
		text-decoration: none;
		}
a:focus {
		outline: none; /* most browsers do not support yet support this property */
		-moz-outline: none; /* remove focus outline in Mozilla browsers */
		}
a:visited {
		color: #fff; /* White */
		}
a:hover {
		color: #ff9900; /* Orange */
		border-bottom: 2px solid #ffcc80; /* Orange 50% */
		}
a:active {
		color: #99cc00; /* Yellow-green */
		border-bottom: 2px solid #cce680; /* Yellow-green 50% */
		}
a[name] { /* remove dotted underline from internal hyperlinks */
		border-bottom: none;
		}

/* Headers */
h1, h2, h3, h4, h5, h6 {
		color: #99cc00; /* Yellow-green */
		font-weight: normal;
		line-height: 1.5;
		margin: 1em 0;
		}
h1		{
		color: #fff; /* White */
		font-size: 28px;
		line-height: .75;
		margin: .75em 0;
		}
h2		{
		color: #fff; /* White */
		font-size: 24px;
		line-height: .875;
		margin: .4375em 0;
		}
h3		{
		font-size: 18px;
		line-height: 1.167;
		margin: 1.167em 0 .5835em;
		}
h4		{
		font-size: 14px;
		line-height: 1.5;
		margin: .75em 0;
		}
h5		{
		font-size: 14px;
		line-height: 1.5;
		margin: 1.5em 0 0;
		}
h6		{
		font-size: 14px;
		line-height: 1.5;
		margin: 1.5em 0 0;
		}
h1:first-child, h2:first-child, h3:first-child {
		margin-top: 0;
		}

p		{
		margin-bottom: .75em;
		}
blockquote {
		margin: 1.5em;
		}
address {
		margin: .75em 0;
		}

/* Lists */
ul ul, ol ol, ul ol { /* nested list indent */
		margin-left: 1em;
		}

/* Forms */
input, textarea	{
		color: #336600; /* Very dark yellow-green */
		font: 11px "Century Gothic", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
		}

abbr, acronym {
		font-size: 11px;
		letter-spacing: .1em;
		border-bottom: none;
		cursor: help;
		}

/*
--------------------------------------------------
PAGE STRUCTURE
--------------------------------------------------
This section defines layout elements and respective environmental formatting
*/
#wrapper {
		text-align: left; /* reset Win IE workaround */
		width: 800px; /* @57em */
		margin: 0 auto; /* standard CSS horizontal centering */
		padding: 0;
		background: transparent;
		}

#banner { /* grouping for logo + navigation */
		position: relative;
		height: 104px;
		border-bottom: 1px solid #669933; /* Dark yellow-green */
		}
#banner .logo {
		font-weight: normal;
		font-size: 18px;
		line-height: 1.167;
		float: right;
		position: relative;
		top: 76px;
		margin: 0;
		}
#banner .logo a, #banner .logo a:link, #banner .logo a:visited {
		color: #fff; /* White */
		padding-left: 2.25em;
		border-bottom: none;
		background: transparent url(../images/logos/zenodro-mini.png) no-repeat left;
		}
#banner .logo a:hover {
		color: #ff9900; /* Orange */
		}
#banner #music {
		position: absolute;
		top: 1.5em;
		right: 0;
		}

#container { /* grouping for main content + sidebar */
		line-height: 1.5;
		height: 565px;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #669933; /* Dark yellow-green */
		background: transparent;
		}

/* Main content area */
#content {
		width: 549px;
		height: 545px;
		float: right;
		padding: 20px 0 0 20px;
		border-left: 1px solid #669933; /* Dark yellow-green */
		background: transparent;
		}

/* Slideshow */
#inset { /* use this container to position or to add margins or padding */
		float: left;
		}
#photodiv {
		float: left;
		padding-bottom: 1em;
		background-repeat: no-repeat;
		}
#photoimg {
		/* all images in a given slideshow must be the same height + width */
		}

/* Text-swap box */
#content #text-swap {
		background: transparent;
		}
#hold	{
		display: none;
		}

/* Columns */
/* 2-column layout, with sidebar */
#content .column {
		width: 264px;
		float: left;
		margin-right: 20px;
		background: transparent;
		}
#content .column.right {
		/* rightmost column -- matches selectors with both class .column and .right */
		width: 265px;
		margin-right: 0;
		}

/* 3-column layout */
#content .column3 {
		/*width: ;*/
		float: left;
		margin: .75em 20px 0 0;
		}
#content .column3.right {
		/* rightmost column -- matches selectors with both class .column and .right */
		margin-right: 0;
		}

/* Sidebar */
#sidebar {
		width: 230px; /* @16.5em */
		float: left;
		}
#sidebar .subsection {
		padding: 20px 20px 1.125em 0;
		border-bottom: 1px solid #669933; /* Dark yellow-green */
		}
#sidebar .subsection.last {
		/* last section -- matches selectors with both class .subsection and .last */
		border-bottom: none;
		}

/* Footer */
#footer {
		font-size: 1em;
		line-height: 1.5;
		margin: 0 0 .75em;
		padding-top: .375em;
		clear: both;
		list-style: none;
		}
#footer li {
		padding: 0 .5em;
		display: inline;
		background: transparent;
		}
#footer li.first {
		padding-left: 0;
		}
#footer li.last {
		background: none;
		}
#footer li span {
		color: #fff;
		margin-right: .375em;
		}
#footer li.byline { /* use for site-design credit */
		color: #669933; /* Dark yellow-green */
		font-size: 12px;
		line-height: 1.75;
		text-transform: uppercase;
		letter-spacing: .1em;
		float: right;
		margin: 1px -.5em 0 0;
		}
#footer a:link, #footer a:visited {
		color: #ffff99; /* Light yellow */
		}
#footer .byline a:link, #footer .byline a:visited {
		color: #669933; /* Dark yellow-green */
		}
#footer a:hover, #footer .byline a:hover {
		color: #ff9900; /* Orange */
		}
#footer a:active, #footer .byline a:active {
		color: #99cc00; /* Yellow-green */
		}
#footer a.selected {
		color: #fff; /* White */
		}

/*
--------------------------------------------------
NAVIGATION
--------------------------------------------------
*/
/* Main navigation */
#nav	{
		font-weight: bold;
		font-size: 1em;
		line-height: 1.5;
		float: left;
		position: relative;
		top: 78px;
		margin: 0;
		padding: 0;
		list-style: none;
		}
#nav li {
		display: inline;
		}
#nav a	{
		text-align: center;
		float: left; /* gives layout, allows selection of colored background */
		padding: 0 .75em;
		border-bottom: none;
		background: transparent; /* select colored background here */
		}
#nav a:link, #nav a:visited {
		color: #ffffbb; /* Very light yellow */
		}
#nav a:hover {
		color: #ff9900; /* Orange */
		}
#nav a.first {
		padding-left: 0 !important;
		}
#nav a.last {
		padding-right: 0 !important;
		}
#nav a.selected {
		color: #ff9900 !important; /* Orange -- overwrites preceding :hover + :active properties */
		}

/* Auxiliary navigation */
.subnav {
		margin-top: .75em;
		}
.subnav li {
		padding-left: 1em;
		background: transparent url(../images/utility/click-arrow.png) no-repeat .5em left;
		}
.subnav.back li {
		background: transparent url(../images/utility/click-arrow-back.png) no-repeat left;
		}

/*	Utility elements */
.hidden { /* completely remove from layout */
		display: none !important;
		}
.invisible { /* does not display but remains in layout flow */
		visibility: hidden;
		}
.clip	{
		overflow: hidden;
		}
.scroll {
		overflow: auto;
		}
.clearance {
		height: 0;
		clear: both;
		}
.clear	{
		clear: both;
		}

/*
--------------------------------------------------
FORMATTING STYLES
--------------------------------------------------
Positional, text, font, and miscellaneous formatting not defined in environmental contexts
*/
/* Positional elements */
.center {
		text-align: center;
		}
.flush-right {
		text-align: right;
		}
.justify {
		text-align: justify;
		}		
.inline {
		display: inline;
		}
.floatLeft {
		float: left;
		}
.floatRight {
		float: right;
		}
.allPad {
		padding: .75em;
		}
.leftPad {
		padding: 0 0 .375em .75em;
		}
.rightPad {
		padding: 0 .75em .375em 0;
		}
.bottomPad { /* also use to provide paragraph spacing in IE Win */
		padding-bottom: .75em;
		}
.trim	{
		margin: 0;
		padding: 0;
		}

/* Fonts */
.italic {
		font-style: italic;
		}
.bold	{
		font-weight: bold;
		}
.caps	{
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .1em;
		}
.normal {
		font-variant: normal;
		font-style: normal;
		font-weight: normal;
		text-transform: none;
		letter-spacing: normal;
		}
.small {
		font-size: 12px;
		}
.smaller {
		font-size: smaller;
		}
.caption {
		font-style: italic;
		font-size: 12px;
		line-height: 1.75;
		}
.sig	{ /* highlight of signature color */
		color: #99cc00; /* Yellow-green */
		}

/* Typographic ornaments */
#content h1 + p > span:first-child, #content h2 + p > span:first-child { /* all caps highlight */
		font-size: .786em; /* @11px */
		text-transform: uppercase;
		letter-spacing: .1em;
		}
#content h1 + p:first-letter, #text-swap h2 + p:first-letter { /* dropcap styling */
		color: #99cc00; /* Yellow-green */
		font-size: 5em; /* inherits font-size from caps highlight */
		line-height: .375; /* line-height based on 56px font-size */
		float: left;
		margin: .09375em .09375em 0 0;
		}

/* Links */
a.img:link, a.img:visited, a.img:hover, a.img:active,
#sidebar a.img:link, #sidebar a.img:visited, #sidebar a.img:hover, #sidebar a.img:active {
		/* remove dotted underline beneath linked images */
		border-bottom: none !important;
		}
.link	{
		padding-left: 1em;
		background: transparent url(../images/utility/click-arrow.png) no-repeat left;
		}
.link.back {
		background: transparent url(../images/utility/click-arrow-back.png) no-repeat left;
		}
.pdf	{
		padding-left: 1.5em;
		background: transparent url(../images/utility/pdf.gif) no-repeat left;
		}

/* Lists */
.square {
		margin: 0 0 .75em 1.1em;
		list-style: square;
		}
.inline li {
		margin-right: 1em;
		display: inline;
		}
li.inline.pad {
		margin-right: 1em;
		}

/* Forms */
.button { /* only applies to Win Firefox, Win/Mac IE*/
		color: #444;
		background: #c0c0c0; /* Silver */
		}
.watermark { /* logo placement */
		width: 50px;
		height: 34px;
		position: relative;
		float: right;
		bottom: .375em;
		background: transparent url(../images/logos/zenodro-watermark.png) no-repeat right;
		}
#verify	{
		width: 20em;
		margin-top: 1.5em;
		padding: 1em 1em .375em 1em;
		/* bevel effect */
		border-right: 2px solid #cce680; /* Light yellow-green */
		border-bottom: 2px solid #336600; /* Very dark yellow-green */
		background: #669933; /* Dark yellow-green */
		}
.verification {
		width: 20em;
		margin-top: 1.5em;
		padding: 1em 1em .375em 1em;
		/* bevel effect */
		border-right: 2px solid #cce680; /* Light yellow-green */
		border-bottom: 2px solid #336600; /* Very dark yellow-green */
		background: #669933; /* Dark yellow-green */
		}
#mail-form {
		margin-top: 1.5em;
		padding: 1em 1em .375em 1em;
		/* bevel effect */
		border-right: 2px solid #cce680; /* Light yellow-green */
		border-bottom: 2px solid #336600; /* Very dark yellow-green */
		background: #669933; /* Dark yellow-green */
		}

/* address + hCard */
.vcard .tel span, .vcard .fax span {
		color: #cce680; /* Yellow-green 50% */
		font-weight: bold;
		margin-right: .75em;
		}
.vcard .email span {
		color: #cce680; /* Yellow-green 50% */
		font-weight: bold;
		margin-right: .45em; /* encrypted e-mail throws off horizontal spacing */
		}
address span {
		color: #cce680; /* Yellow-green 50% */
		font-weight: bold;
		font-size: 11px;
		margin-right: .25em;
		}