/* Page */
/*************************************/
html
{
    /* font for the page */
	font-family: "Palatino";
	/* this color should basically match the background image
	   it is used when the image is done (to fill in leftover space) */
	background-color: #141d1c;
}

*
{
	line-height: 110%;
}

a
{
	text-decoration: none;
}
a:link { color: #455a89; }
a:visited { color: #455a89; }
a:hover { color: #5e8aec; }
a:active { color: #5e8aec; }

body
{
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

#all
{
	width: 950px;
	/* the border, can be removed */
	border: solid 1px #7f7f7f;
	/* this to differentiate from the page background 
	   if deleted, then will be same as background image */
	background-color: rgba(134, 44, 8, .35);
}

/* an impressive hack for ie that allows it to do transparent bg colors */
/* leverages the ie gradient filter with the same start and end (gradient filter has alpha) */
.transparent_bg
{
   background: transparent;
   /* first one is the trasparency 00 is invis and ff (255) is solid 
	  (to get corresponding value multiply by 2.5 and round up then convert to hex)
	  second three is the RRGGBB version of the bg color above */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#58a11601, endColorstr=#58a11601);
}

#content
{
	padding: 5px 5px 50px 5px;
}

#left_column
{
	float: left;
	width: 16%;
}

#right_column
{
	float: right;
	width: 83%;
}
/*************************************/

/* Banner */
/*************************************/
#banner
{
    /* how much space to move down past the navbar */
    margin-top: 10px;
}

#banner > div
{
	/* text color */
	color: #ece2b7;
}

/* heights vary and are set per banner element */
#logo_banner
{
	height: 150px;
	margin-left: 10px;
	width: 150px;
	position: relative;
	z-index: 2;
}

#logo_name_asha, #logo_name_andy
{
    position: relative;
    z-index: 3;
    height: 0;
}

#logo_name_asha
{
    top: -56px;
    left: -31px;
}

#logo_name_andy
{
    top: -56px;
    left: 13px;
}

#events_banner_andy, #events_banner_asha
{
    text-align: left;
    font-size: 90%;
    padding: 2px;
	width: 150px;
	margin-left: 1px;
	margin-top: 50px;
	/* these two lines make the box appear about the left content */
	position: relative;
	z-index: 2;
	background-color: #04050D;
}

#events_banner_andy
{
	height: 110px;
}

#events_banner_asha
{
	height: 90px;
}

#banner_asha
{
	margin-top: 30px;
}

#banner_andy
{
	margin-top: 50px;
}

#banner_asha, #banner_andy
{
    text-align: left;
    font-size: 90%;
    padding: 2px;
	width: 150px;
	margin-left: 1px;
	background-color: #04050D;
	min-height: 200px;
}

.banner_category
{
    text-align: left;
    padding-top: 3px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.banner_header
{
    font-weight: bold;
    margin-bottom: -12px; 
    padding: 2px;
}

#banner a:link {color: #859fd9; }
#banner a:visited {color: #859fd9; }
#banner a:hover { text-decoration: underline; }
#banner a:active { text-decoration: underline; }

.banner_title
{
    font-style: italic;
    text-align: center;
}

#banner_image
{
	/* stretch the banner image to the size of the box 
	   change banner div element size (likely banner1) if it is stretched */
	width: inherit;
	height: inherit;
}

/*************************************/

/* Navbar */
/*************************************/
#navbar
{
	/* inline display makes the divs inside (the menu items) appear side by side */
	display: inline;
}

#navbar > div:first-child
{
    margin-left: 70px;
}

#navbar > div
{
    /* text is big in */
	font-size: x-large;
	/* italicized */
	font-style: italic;
	/* and centered */
	text-align: center;
	/* width and height of menu item box */
	width: 130px;
	height: 30px;
	/* how far down from the top it will appear (non-highlighted items) */
	top: 32px;
	/* spacing between items */
	margin-left: 20px;
	/* next two are used to make the divs appear side by side (and allows positioning */
	float: left;
	position: relative;
}

.navhover, .navunselected
{
    cursor: pointer;
	background-color: #04050D;
}

.navhover
{
	color: #a11601;
}

.navunselected
{
	color: #ece2b7;
}

.navselected
{
    cursor: default;
	color: #04050D;
	background-color: #ece2b7;
}

#nav_logo
{
	/* right aligns the logo */
	float: right;
	/* width and height of the logo */
	width: 30px;
	height: 30px;
	/* how much space above and to the right */
	padding-top: 20px;
	padding-right: 40px;
}

/*************************************/

/* Content */
/*************************************/

#the_page
{
	background-color: #ece2b7;	
	padding: 8px;
	/* move content in a little from left so not blocked by banner dinner sitting on top */
	padding-left: 61px;
	padding-right: 61px;
	/* don't stretch all the way so move box in from right a little */
	margin-right: 38px;
	/* how much space between nav and content */
	margin-top: 62px;
}

.large_header
{
    font-size: x-large;
    font-style: italic;
	color: #a11601;
}

.header
{
    font-style: italic;
	color: #a11601;
}

.bold_ital
{
    font-style: italic;
    font-weight: bold;
}

.bold
{
    font-weight: bold;
}

.ital
{
    font-style: italic;
}

/*************************************/

/* Positioning */
/*************************************/
html, body, #wrapper
{
	height: 100%;
}

body > #wrapper
{
	height: auto;
	min-height: 100%;
}

#footer
{
	position: relative;
	clear: both;
}
	
body 
{
	margin: 0px;
	padding: 10px; 
	text-align: center;
}

#all 
{
	margin: 0px auto;
	text-align: left;
}

.clearfix:after 
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix 
{
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix  
{
	height: 1%;
}
.clearfix 
{
	display: block;
}
/* End hide from IE-mac */

/*************************************/

/* Transparency */
/*************************************/

.invisible
{
   opacity: 0;
   -ms-filter: "alpha(opacity=0)";
   filter: alpha(opacity=0);
}
.transparency_veryhigh
{
   opacity: .2;
   -ms-filter: "alpha(opacity=20)";
   filter: alpha(opacity=20);
}
.transparency_high
{
   opacity: .35;
   -ms-filter: "alpha(opacity=35)";
   filter: alpha(opacity=35);
}
.transparency_medium
{
   opacity: .5;
   -ms-filter: "alpha(opacity=50)";
   filter: alpha(opacity=50);
}
.transparency_low
{
   opacity: .65;
   -ms-filter: "alpha(opacity=65)";
   filter: alpha(opacity=65);
}
.transparency_verylow
{
   opacity: .8;
   -ms-filter: "alpha(opacity=80)";
   filter: alpha(opacity=80);
}
.solid
{
   opacity: 1;
   -ms-filter: "alpha(opacity=100)";
   filter: alpha(opacity=100);
}