/*
 * styles.css
 * ----------
 * Contains the CSS for all the Burnside Gorge's webpages.
 * 
 * This file is organised in various sections corresponding the source layout
 * common to all the webpages. First we have the generic styles (defining the
 * defaults), then the styles top navigation, left-side navigation, main
 * content and footer appear. So if you want to modify the style for a paragraph ("p" tag)
 * in the main content (an HTMLDivElement), you would have to scroll down until
 * you see the main content section and then locate the appriate tag, "p" tag
 * in this case. If its not there, add your own (in valid CSS).
 * 
 */


/**************** Generics (defaults) *************************/

body {
   font: 1em "Trebuchet MS", Verdana, sans-serif;
   background-color: rgb(121, 175, 196);
   color: #444;
   margin: 0px;
   padding: 0px;
}

h3, h4, h5 {
   font-family: Tahoma, sans-serif;
}

h3 {
   font-size: 1.2em;
   text-align: center;
}

h4 {
   font-size: 0.9em;
   border-bottom: 1px solid #CCC;
   margin-top: 2.5em;
   margin-bottom: 1em;
}

h5 {
   font-size: 0.8em;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
}


/***************** Top navigation elements ********************/

#topNav {
   position: absolute;
   top: 0px;
   left: 0px;
   background: rgb(121, 175, 196);
   width: 100%;
   /*  var topNavHeight = height of title.jpg = 72px */
   height: 72px;							/* <-- topNavHeight */
   /*border: 1px dotted red;*/
}

#topNav img {
   position: absolute;
   border: none;
}

#topHoverImg {
   top: 0px;
   left: 10px;
}

#bgcaTitle {
   top: 0px;
   left: 430px;
}

#bgcaLogo {
   top: 20px;
   left: 260px;
}


/******************** Left side navigation ***********************/

#leftNav {
   position: absolute;
   top: 72px;								/* <-- topNavHeight */
   left: 0px;
	background-color: rgb(121, 175, 196);
	/* var leftNavWidth = 120px */
	width: 120px;							/* <-- leftNavWidth */
	font-size: 0pt;
	/*border: 2px dotted green; */
}

#leftNavLinks {
   font: 12pt "Trebuchet MS", Verdana, sans-serif;
   margin: 40px 0px 0px 0px;
   padding: 0px;
   /*border: 1px dotted red;*/
}

#leftNavLinks li {
  margin-top: 5px;
  /* width: 100%;                no need. */
  										/* Height corresponds to the */
  height: 38px;					/* dimensions of leftNavBg images. */
  padding: 0px;
  										/* Can't put fixed in background property; doesn't work in Mozilla Firefox. */
  background: transparent url(../images/leftNavBg_800x600.jpg) repeat-x;
  list-style: none;
}

#leftNavLinks a {
   text-decoration: none;
   color: rgb(175, 215, 230);
   font-size: 10pt;
   font-weight: bold;
   text-align: right;
   display: block;
   background: transparent url(../images/leftNavBorderRight_800x600.jpg) no-repeat top right;
   width: 100%;				/* required for IE; otherwise link is only effective over text. */
   height: 38px;
   padding: 0px;
}

#leftNavLinks a:hover, #linkSet {
   color: white;
}

#leftNavLinks a span {
   position: relative;
   top: 9px;
   margin: 5px 10px 5px 5px;
}

#leftNavLinks a.long {
   font-size: 10pt;
   line-height: 0.9em;
}

#leftNavLinks a.long span {
   position: relative;
   top: 6px;
   margin: 5px 10px 5px 5px;
}


/******************** Main content ***************************/

#mainContent {
   position: absolute;
   top: 72px;								/* <-- topNavHeight */
   left: 127px;							/* <-- leftNavWidth + 7px */
   /*background: white url(../images/mainContentBg_800x600.jpg) no-repeat top left;*/
   background: white url(../images/ellipseContainer.jpg) no-repeat top left;
	height: 527px;							/* <-- img.mainContentBg_800x600.jpgHeight */
	/*width: 644px;*/
	width: 848px;                    /* <-- img.mainContentBg_800x600.jpgWidth */
	/* overflow: auto;*/ 				/* Causes mozilla (Firefox) to ignore margin-left of mainContent */
	padding: 0px;
	margin: 0px;
	/*border: 1px dotted black; */
}

#scrollableContent {
   height: 430px;
   /*margin: 90px 0px 0px 150px;*/
   margin: 90px 155px 0px 150px;
   padding-right: 5px;
   overflow: auto;
   /*border: 1px dotted red;*/
}

#mainContent img {
   padding: 10px;
}

#mainContent img.frontImage {
   margin-left: 50px;
}

#mainContent p,
#mainContent ol,
#mainContent td,
#mainContent ul {
   font: 0.7em Verdana, sans-serif;
}

#mainContent ul,
#mainContent ul ul,
#mainContent ol {
   padding: 0;
   margin-top: 1em;
   margin-left: 25px;
   margin-bottom: 2.5em;
}

#mainContent li,
#mainContent p {
   line-height: 1.4em;
}

#mainContent li {
   margin-top: 0.8em;
}

#mainContent p {
   margin: 10px 0;
}

#mainContent p.subHeading {
   text-align: center;
   font-weight: bold;
}

#mainContent span.emphasis {
   display: block;
   font-style: italic;
}

#mainContentSideBar {
   float: right;
   width: 130px;
   padding: 0 10px 10px;
}

#mainContentSideBar h4 {
   margin-top: 0em;
}

#mainContentSideBar img {
   padding: 0;
   margin-bottom: 0;
   width: 130px;
   height: 110px;
   border: 1px solid #CCC;
   border-bottom: none;
}

#mainContentSideBar p.caption {
   border: 1px solid #CCC;
   border-top: none;
   margin: 0 0 22px 0;
   padding: 0;
   width: 130px;
}

#commPartner {
   width: 450px;
}

#commPartner ul {
   margin: 0;
   padding-left: 25px;
   list-style-type: square;
}

#commPartner li {
   width: 150px;
}


/******************** Footer *****************************/

#footer {
   position: absolute;
   top: 600px;
   left: 0px;
   font: 7pt Verdana, Tahoma, sans-serif;
   color: white;
}

#footer a {
   color: white;
}


/*
 * END
 */