/****************************************
Main stylesheet for the New River Youth
  Symphony and Chorus Website

Author: Jonathan Bailey
Email:  returnotheking@gmail.com

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

/*==============
 Global styles 
===============*/
body {
  text-align: center; /* Fix for centering page in IE */
  background: #488bc1 url(images/body-bkg.jpg) repeat-x top;
  font: .8em DejaVu LGC Sans, Verdana, sans-serif;
  }

/* Holds all content */
#container {
  width: 760px;
  margin: 0 auto; /* Centers entire page */
  text-align: left;
  }

/* Pages with blue bkg. Note: photo pages use different container image but same containerBkg image. */
#home #container, #gallery #container, #sub-gallery #container {
  background: #9dc8df url(images/curve-blue-rep.jpg) repeat-y;
  }

#home #containerBkg, #gallery #containerBkg, #sub-gallery #containerBkg, #photo #containerBkg {
  background: url(images/curve-blue.jpg) no-repeat bottom;
  }

/* Pages with white bkg */
#about #container, #directors #container, #events #container, #join #container, #news #container, #donations #container, #contact #container {
  background: #fff url(images/curve-white-rep.jpg) repeat-y;
  }

#about #containerBkg, #directors #containerBkg, #events #containerBkg, #join #containerBkg, #news #containerBkg, #donations #containerBkg, #contact #containerBkg {
  background: url(images/curve-white.jpg) no-repeat bottom;
  }

/* Main content area */
#content {
  width: 572px;
  float: right;
  padding: 0 20px 10px 0;
  }

/* Header styles */
h1 {
  font: 1.9em Georgia, Palatino Linotype, serif;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  margin: .4em 0 .8em 0;
  }

/* Used for subtitle on how to join page */
h2 {
  font: 1.3em Georgia, Palatino Linotype, serif;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  margin: -.6em 0;
  }

h3 {
  font-size: 1.1em;
  font-weight: bold;
  color: #1a4cac;
  text-transform: uppercase;
  margin: 1.8em 0 0 0;
  }

/* Used for concert info on the news of note page */
h4 {
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  line-height: 2em;
  margin: .6em 0 1.6em 0;
  }

/* Add emphasis to regular text by adding bold and italic styles */
.em {
	font-weight: bold;
	font-style: italic;
}

/* Creates 1px solid border for horizontal line */
hr {
  border: none;
  border-bottom: #5a7090 1px solid;
  }

ul {line-height: 2em;}

/* Removes border for anchored images */
img {border: none;}

/* Bottom of page navigation */
#bottomNav {
  font-weight: bold;
  text-align: center;
  display: block;
  }

#bottomNav table {
  width: 564px;
  }

#bottomNav td {
  width: 188px;
  font-weight: bold;
  text-align: center;
  }

#footer {
  width: 100%;
  height: 28px;
  clear: both;
  font-size: .8em;
  text-indent: 18px;
  padding: 80px 0 0 0;
  }

/* Main header */
#header {
  width: 100%;
  height: 124px;
  background: url(images/header.jpg) no-repeat top;
  text-indent: -1000em; /* Hides text when CSS in enabled */
  }

/* Global link styles */
#content a:link {
  color: #0a06c1;
  text-decoration: underline;
  }

#content a:visited {
  color: #06723b;
  }

#content a:hover {
  border-bottom: 2px solid;
  }

#content a:active {
  color: #38aa5a;
  border-bottom: 2px solid;
  }

#footer a:link, #footer a:visited {
  color: #000;
  text-decoration: underline;
  }

#footer a:hover {
  color: #555;
  text-decoration: none;
  }

/* Page titles 
---------------*/
#title {
  width: 100%;
  height: 58px;
  }

#home #title {background: url(images/title-home.jpg) no-repeat top;}

#about #title {background: url(images/title-about.jpg) no-repeat top;}

#directors #title {background: url(images/title-directors.jpg) no-repeat top;}

#events #title {background: url(images/title-events.jpg) no-repeat top;}

#join #title {background: url(images/title-join.jpg) no-repeat top;}

#gallery #title, #sub-gallery #title {background: url(images/title-gallery.jpg) no-repeat top;}

#news #title {background: url(images/title-news.jpg) no-repeat top;}

#donations #title {background: url(images/title-donations.jpg) no-repeat top;}

#contact #title {background: url(images/title-contact.jpg) no-repeat top;}
/* End page titles */

/* Main navigation styles */
#mainNav {
  position: relative;
  top: -16px;
  width: 160px;
  height: 316px;
  float: left;
  background: url(images/mainNav-bkg.gif) no-repeat top;
  }

#mainNav ul {
  position: relative;
  top: -16px;
  list-style: none;
  }

#mainNav li {
  margin-left: -40px;
  text-indent: -1000em;
  }

#mainNav a:link, #mainNav a:visited {
  display: block;
  height: 34px;
  text-decoration: none;
  }

/* mainNav links, which use a modified Pixy-style rollover effect
-----------------*/
#mainNav .home a:link, #mainNav .home a:visited {
  background: url(images/link-home.gif) no-repeat bottom left;
  }

#mainNav .home a:hover {
  background: url(images/link-home.gif) no-repeat bottom right;
  }

#mainNav .about a:link, #mainNav .about a:visited {
  background: url(images/link-about.gif) no-repeat bottom left;
  }

#mainNav .about a:hover {
  background: url(images/link-about.gif) no-repeat bottom right;
  }

#mainNav .directors a:link, #mainNav .directors a:visited {
  background: url(images/link-directors.gif) no-repeat bottom left;
  }

#mainNav .directors a:hover {
  background: url(images/link-directors.gif) no-repeat bottom right;
  }

#mainNav .events a:link, #mainNav .events a:visited {
  background: url(images/link-events.gif) no-repeat bottom left;
  }

#mainNav .events a:hover {
  background: url(images/link-events.gif) no-repeat bottom right;
  }

#mainNav .join a:link, #mainNav .join a:visited {
  background: url(images/link-join.gif) no-repeat bottom left;
  }

#mainNav .join a:hover {
  background: url(images/link-join.gif) no-repeat bottom right;
  }

#mainNav .gallery a:link, #mainNav .gallery a:visited {
  background: url(images/link-gallery.gif) no-repeat bottom left;
  }

#mainNav .gallery a:hover {
  background: url(images/link-gallery.gif) no-repeat bottom right;
  }

#mainNav .news a:link, #mainNav .news a:visited {
  background: url(images/link-news.gif) no-repeat bottom left;
  }

#mainNav .news a:hover {
  background: url(images/link-news.gif) no-repeat bottom right;
  }

#mainNav .donations a:link, #mainNav .donations a:visited {
  background: url(images/link-donations.gif) no-repeat bottom left;
  }

#mainNav .donations a:hover {
  background: url(images/link-donations.gif) no-repeat bottom right;
  }

#mainNav .contact a:link, #mainNav .contact a:visited {
  height: 46px;
  background: url(images/link-contact.gif) no-repeat bottom left;
  }

#mainNav .contact a:hover {
  height: 46px;
  background: url(images/link-contact.gif) no-repeat bottom right;
  }

/* Hi-lights the current page 
------------------------------*/
#home #mainNav .home a {
  background: url(images/link-home.gif) no-repeat top left;
  }

#about #mainNav .about a {
  background: url(images/link-about.gif) no-repeat top left;
  }

#directors #mainNav .directors a {
  background: url(images/link-directors.gif) no-repeat top left;
  }

#events #mainNav .events a {
  background: url(images/link-events.gif) no-repeat top left;
  }

#join #mainNav .join a {
  background: url(images/link-join.gif) no-repeat top left;
  }

#gallery #mainNav .gallery a, #sub-gallery #mainNav .gallery a {
  background: url(images/link-gallery.gif) no-repeat top left;
  }

#news #mainNav .news a {
  background: url(images/link-news.gif) no-repeat top left;
  }

#donations #mainNav .donations a {
  background: url(images/link-donations.gif) no-repeat top left;
  }

#contact #mainNav .contact a {
  height: 46px;
  background: url(images/link-contact.gif) no-repeat top left;
  }
/* End page hi-light and mainNav links */

/* Custom resizable border. Source:
www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders 
-----------------------------------*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
  background: #fff;
  border: #888 1px solid;
  margin: 10px;
  padding: 7px 7px 3px 7px;
  }

/* JavaScript Style */
.cb {margin: 10px;}

/* Fixes the margins for the image */
.cb img {margin: -7px 0 -4px 0;}

/* Top border and right corner */
.bt {
  background: url(images/box.png) no-repeat 100% 0;
  margin: 0 0 0 8px;
  height: 14px;
  }

/* Top left corner */
.bt div {
  height: 14px;
  width: 8px;
  position: relative;
  left: -8px;
  background: url(images/box.png) no-repeat 0 0;
  }

/* Bottom border and right corner */
.bb {
  background: url(images/box.png) no-repeat 100% 100%;
  margin: 0 0 0 14px;
  height: 14px;
  }

/* Bottom left corner */
.bb div {
  height: 14px;
  width: 14px;
  position: relative;
  left: -14px;
  background: url(images/box.png) no-repeat 0 100%;
  }

/* Left border */
.i1 {
  padding: 0 0 0 8px;
  background: url(images/borders.png) repeat-y 0 0;
  }

/* Right border */
.i2 {
  padding: 0 14px 0 0;
  background: url(images/borders.png) repeat-y 100% 0;
  }

/* Content background */
.i3 {
  background: #fff;
  border: 1px solid #fff;
  border-width: 1px 0;
  padding: 0;
  }
/* End custom border */

/*=====================
 Page-specific styles 
======================*/

/* Homepage styles */
#home h1 {
  font-size: 1.8em;
  text-align: left;
  margin: .4em;
  }

#home hr {width: 97%;}

#home h3 {font-size: 1.2em;}

#home #content ul {
  line-height: 2em;
  margin-left: 186px;
  }

.home-imgR .cbb {
  float: right;
  margin-right: 16px;
  }

.home-imgR .cb {float: right;}

.home-imgL .cbb, .home-imgL .cb {float: left;}

/* Other page styles */
#about .cbb, #directors .cbb {
  float: right;
  margin-right: 16px;
  }

#about .cb, #directors .cb {float: right;}

#directors h3 {font-size: 1.2em;}

#donations li {font-weight: bold;}

#contact h3 {margin: 0;}

#contact .cbb {
  margin-right: 16px;
  padding: 22px 0 16px 12px;
  }

#contact .i3 {
  padding: 8px;
  background: #9dc8df url(images/gallery-bkg.jpg) repeat-x top;
  border-bottom: 1px solid #9dc8df;
  }

#contact table {width: 564px;}

#contact td {width: 50%;}

/* Main photo gallery and sub-galleries sytles 
-----------------------------------------------*/
#gallery .cbb {min-height: 132px;}

#gallery .i1, #gallery .i2, #gallery .i3 {min-height: 120px;}

/* The i3 class defines the content area of the box */
#gallery .i3 {
  background: #fff url(images/gallery-bkg.jpg) repeat-x bottom;
  border-bottom: 1px solid #9dc8df; /* Matches the bottom border with the bkg */
  }

#gallery #content img {
  float: right;
  margin-left: 1em;
  }

#gallery h3 {
  font-size: 1.2em;
  font-style: italic;
  margin: .2em 0 0 .6em;
  }

/* Date headers */
#gallery h4 {
  font-size: 1em;
  text-transform: uppercase;
  margin: 0 0 -.6em .8em;
  text-align: left;
  }

#gallery p {margin-left: 1.6em;}

#gallery h1, #sub-gallery h1 {margin-bottom: 0;}

/* Date headers */
#sub-gallery h2 {
  font-size: 1.6em;
  margin: .4em 0 .2em 0;
  }

#sub-gallery table {
  width: 564px;
  }

#sub-gallery #content td {
  width: 282px;
  text-align: center;
  vertical-align: top;
  }

/* Text sytle for photo captions */
#sub-gallery #galleryContent td {
  font-size: 1.1em;
  font-style: italic;
  }

#sub-gallery p {margin: .2em .4em .8em .4em;}

/* Fixes problems with img link borders */
#sub-gallery #galleryContent a:hover {border: none;}

/* Image size for non-JS version */
#sub-gallery .cbb {
  width: 256px;
  margin: 0 0 0 7px;
  }

/* Image size for JS version including borders */
#sub-gallery .cb {
  width: 278px;
  margin: 0 0 0 4px;
  }

/* Tall image support */
#sub-gallery .tall .cbb {
  width: 192px;
  margin: 0 0 0 34px;
  }

#sub-gallery .tall .cb {
  width: 214px;
  margin: 0 0 0 32px;
  }

/* Gallery hover effects */
#gallery :hover.cbb, #sub-gallery :hover.cbb {
  background: #aaa;
  }

#gallery :hover.cb .bt, #sub-gallery :hover.cb .bt {
  background: url(images/box-hover.png) no-repeat 100% 0;
  }

#gallery :hover.cb .bt div, #sub-gallery :hover.cb .bt div {
  background: url(images/box-hover.png) no-repeat 0 0;
  }

#gallery :hover.cb .bb, #sub-gallery :hover.cb .bb {
  background: url(images/box-hover.png) no-repeat 100% 100%;
  }

#gallery :hover.cb .bb div, #sub-gallery :hover.cb .bb div {
  background: url(images/box-hover.png) no-repeat 0 100%;
  }

#gallery :hover.cb .i1, #sub-gallery :hover.cb .i1 {
  background: url(images/borders-hover.png) repeat-y 0 0;
  }

#gallery :hover.cb .i2, #sub-gallery :hover.cb .i2 {
  background: url(images/borders-hover.png) repeat-y 100% 0;
  }

#gallery :hover.cb .i3 {
  background: #fff url(images/gallery-bkg-hover.jpg) repeat-x top;
  border-top: 1px solid #98a7b1;
  border-bottom: #fff 1px solid;
  }

/* Makes text in main gallery boxes default color and style */
#gallery #galleryContent a:link, #gallery #galleryContent a:visited, #gallery #galleryContent a:hover, #gallery #galleryContent a:active {
  color: #000;
  text-decoration: none;
  }

/* Links for inside main gallery boxes */
#gallery #galleryContent a:link h3 {
  color: #0a06c1; /* Color should match global link color */
  }

#gallery #galleryContent a:visited h3 {
  color: #06723b; /* Color should match global visited color */
  }

#gallery #galleryContent a:hover h3 {
  text-decoration: underline;
  }

#gallery #galleryContent a:active h3 {
  color: #38aa5a; /* Color should match global active color */
  }
/* End gallery styles */

/* Photo page styles */
#photo #container {
  background: #9dc8df url(images/photo-bkg.jpg) no-repeat top;
  }

#photo #content {
  width: 720px;
  padding: 60px 0 20px 0;
  }

#photo #bottomNav {
  font-size: 1.1em;
  margin: 0 0 10px 40px;
  }

#photo #bottomNav table {width: 600px;}

#photo #bottomNav td {width: 200px;
/*  border: #f00 1px solid; */
  }

#photo .cbb {width: 640px;}

#photo .cb {width: 662px;}

#photo #footer {
  height: 28px;
  padding: 0;
  }

#photo .tall .cbb {
  width: 480px;
  margin: 0 0 0 92px;
  }

#photo .tall .cb {
  width: 502px;
  margin: 0 0 0 92px;
  }