/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

body {
	margin: 0 auto;
	padding: 0;
	font: 76% Verdana,Tahoma,Arial,sans-serif;
	background-color: #f4f4f4;
	background-repeat: repeat-y;
	background-position: center top;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
	clear: both;
	margin: 20px 0 0 0;
	padding: 0;
	height: 45px;
	background-color: ffffff;
}

#header h1 {
width: 380px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 350px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
	font-weight: bold;
	text-decoration: none;
	color: #286ea0;
	display: block;
	padding: 6px 0 10px 10px;
	background: #f4f4f4;
	border-left: 4px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}



.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #286ea0;
background-color: #f4f4f4;
line-height: 1.3em;
border-left:1px solid #ccc;
}

/* added the following rule to take away underlining links to other park pages */ 
.announce a {
text-decoration: none;
color: #286ea0;
}

.announce p {
	font-size:1.2em;
	font-weight: bold;
}

#extras {
float: right;
width: 160px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
	line-height: 1.6em;
	text-align: left;
	margin-top: 0;
	margin-right: 170px;
	margin-bottom: 20px;
	margin-left: 160px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}


.captionboxleft
{
	padding: 1px;
	width: 255px;
	float:left;
	margin-right: 10px;
}


.captionboxright
{
	padding: 1px;
	width: 255px;
	float:right;
	margin-left: 10px;
}


h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
/* suppressed the following to allow an underline to my links on the page  text-decoration: none; */
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

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

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}


/*the following set up picture/centered below text with a gray border box in the main content. The size of the phots may have to be adjusted, these are fine to work with 250 wide thumbs. Two .boxl can be used in a pair to make them fill two pictures across the page. The formatting of the picture/texts, i.e. their layout requirements, are found in the "untitled.html" file in the root directory. 2 pictures across, one picture to the left, or one picture to the right.

It may be necessary to use a div tag with a style="clear:both" after the pictures if they end up being unruly and running over and into things that come after them.
*/

.boxl{
	width:275px;
	height:auto;
	float:left;

}

.boxr{width:275px;height:auto;float:right;margin-left:10px;}
/*the margin left here makes up for my content img CSS tag not having this to push text off the box*/

.box2{width:260px;height:auto;border:thin solid #CCCCCC;}

.box2nb{width:260px;height:auto;}

/*this is for the text under the picture*/
.box3{text-align:center;padding: 8px;}


#push{margin-left:5px}


/*list that has two columns....this is modified coding from a tutorial */
	
ul{
    margin: 0 auto;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 520px
}
/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        height: 30px;
        width: 220px;
    }
	
.clearer {clear: both; font-size: 0;}