/* CSS for Andy-Stevenson */

html {
	height: 100%;   /* required field for IE and Firefox to display footer correctly */
}

.clear {			/* required field to display footer correctly  - clears CSS floats */
	clear: both;
}

body {
	background: #666666;
	background-image: url(images/background_dark.gif);
	background-repeat: repeat-y;  /* repeats background vertically */
	background-position: 50%;  /* centers background */
	background-attachment: fixed;  /* background will not scroll with page */
	margin: 0;		/* makes body go to edge */
	padding: 0; 
    text-align: center;
	height: 100%;  /* required field for IE and Firefox to display footer correctly */
}

#container {
   margin: 0px auto;     /*  container bumps up to header, aligned to center  */
   text-align: left;	/*  text inside container aligns left    */
   width: 740px;
   position: relative;  /* makes container position relative, as compared to footer */
   min-height: 100%;  /* required field for IE and Firefox to display footer correctly */
	background: url(images/dragon_weathered.jpg) no-repeat 65% 75% fixed;
}


h1 {
	width: 740px;
	height: 150px;
	text-indent: -9999px;
	background: url(images/header.jpg);
	margin: 0;
	padding: 0;
	border: 0;
}


#left {
	width: 150px;
	float: left;
}

#navcontainer {
	width: 150px;
	background: #FF9900;
}

#navcontainer ul {
	margin: 0;   /* no spacing around buttons */
	padding: 0;
	list-style-type: none;  /* takes off default html list bullet */
	font: bold 11px/18px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	text-indent: 25px;
	letter-spacing: 1px;
}

#navcontainer a {      /* general button parameters */
	display: block;   /* lets the broswer see the links as "blocks" or buttons */
	width: 150px;   
	height: 20px;

}

#navcontainer a:link, #navcontainer a:visited {   /* default button state */
	background: url(images/navbutton.jpg);
 	color: #663399;     
 	text-decoration: none;   /* removes default link underlining */
}

#navcontainer a:hover { 
	background: url(images/navbutton_hover.jpg);
	color: #663399;
	text-decoration: none;
}

#navcontainer li a#current {   /* makes the button for the current page the same as the "mouseover" one */
	background: url(images/navbutton_current.jpg);
	color: #663399;
	text-decoration: none;
}

.navimage {    /* template for images in the nav column*/
	float: center; 
	margin: 0 0 20px 0;
	padding: 0;
}

.hiddennavimage {   /* preloads navimage mouseover  */
	display:none;
}


#content {   
	width: 555px;   /* width of area = width of page (800) - width of nav buttons (176) - left padding (20) - arbitrary right space (15)*/
	float: left; 
	padding: 5px 0 10px 20px;
}

#element {				/* Creates grey boxes for posts, etc. */
	width: 490px;
	float: left;
	background: #CCCCCC;
	margin: 0 0 15px 15px;
	padding: 5px 10px 0px 10px;
    text-align: left;	/*  text inside container aligns left    */	
	border-top: 2px solid #EAEAEA;
	border-right: 2px solid #EAEAEA;
	border-bottom: 2px solid #333333;
	border-left: 2px solid #333333;
	-webkit-border-radius: 10px;   /*  rounded corners in Safari   */	
	-moz-border-radius: 10px;    /*  rounded corners in Firefox   */
	border-radius: 10px; 
	-webkit-box-shadow: 3px 3px 10px #333333;  
    -moz-box-shadow: 3px 3px 10px #333333;  
    box-shadow: 3px 3px 10px #333333;
}

#element h2 {    /* look of element titles  */
	font: bold 14px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: #663399;
	background: transparent url(images/bullet_title.gif) no-repeat;
	padding: 0 0 0 30px;
	margin: 0 0 0 0;
}

#element a:link, a:visited {
	color: #663399;
	text-decoration: none;
	border-bottom: 1px dotted #999999;
}

#element a:hover {
	color: #993399;
	text-decoration: none;
	border-bottom: 1px dotted #993399;
}

.hidden {     /* .hidden and .shown give ability to expand/collapse content with javascript  */
	display:none
}

.shown {
	display:inline
}

.text {				/* sets the look of text  */
	font: 11px/18px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: #555555;
	margin: 10px 0 15px 0;
}

.text2 {				/* same text, with no top margin, for use on gallery page  */
	font: 11px/18px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: #555555;
	margin: 0px 0px 15px 0px;
}

.imagecenter {    /* template for non-aligned images */
	float: none;   
	margin: 10px 4px 0px 4px;
	padding: 5px;
	background-color: #FFFFFF;
	border: 1px solid #FFCC00;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-box-shadow: 3px 3px 10px #666666;  
    -moz-box-shadow: 3px 3px 10px #666666;  
    box-shadow: 3px 3px 10px #666666;
}

.imageleft {    /* template for left-aligned images  */
	float: left;   
	margin: 10px 10px 10px 0px;
	padding: 5px;
	background-color: #FFFFFF;
}

.imageright {    /* template for right-aligned images  */
	float: right;   
	margin: 10px 0px 10px 10px;
	padding: 5px;
	background-color: #FFFFFF;
	border: 1px solid #FFCC00;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-box-shadow: 3px 3px 10px #666666;  
    -moz-box-shadow: 3px 3px 10px #666666;  
    box-shadow: 3px 3px 10px #666666;
}


#footer {		/* template for footer container at bottom of page  */
	margin: 15px auto 0 auto; 
	position: relative;
	background-color: #666666;
	border-top: 9px solid #FF6633;
	border-right: 9px solid #666666;
	border-left: 9px solid #666666;
	width: 670px;
	padding: 5px 0;     
	clear: both;    /* no floating objects allowed on right or left side of footer */
}

* html #footer {
	margin-top: 30px;  /* only read by IE, to fix footer bottom problem, instead of 15px above */
}

#footer h2 {
	margin-top: 5px;
	text-align: center;
	font: normal 10px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}

#footer h2 a:visited, #footer h2 a:link {
	color: #FF9933;
	text-decoration: none;
	border-bottom: 1px dotted #999999;
}

#footer h2 a:hover {
	color: #FF9933;
	text-decoration: none;
	border-bottom: 1px dotted #663399;
}