/* andreas00 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com/ . Free to use for any purpose as long as the proper credits are given to the original author.
Version: 2.0 (Jan 29, 2007) */
body {background: #eaeaea; color:#3a3a3a; font:76% Verdana,Tahoma,Arial,sans-serif; margin:0 auto; padding:0;}
/* body rules above were changed from this:
body {background:url(img/bg.gif) repeat-y top center #eaeaea; color:#3a3a3a; font:76% Verdana,Tahoma,Arial,sans-serif; margin:0 auto; padding:0;}
The changes removed a increasingly dark fade from the outside edge to the left and right to a darker gray as this open space approaced the outside "wrap" box. I also change the wrap border on the left and right from 5 to 10 px to push out the edge of the white "wrap" box edge. */
/* My changes to original CSS */
/* make first word bold and large; set class="oneletter" */
.firstword{font-size: 120%; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
/* make first letter bold and large; set class="oneletter" */
.oneletter:first-letter{font-size: 200%; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
/* left column, under links, google add column */
#leftside .leftadd {repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:1.3px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;}
/* top of main content GOOGLE add box*/
.bigadbox {float: left; margin-top: 10px; margin-right: 35px; margin-bottom: 5px; margin-left: 0; border-top-width: 3px;
border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;}
/*replaced original header with this.......(height can be changed to vary space between header picture and written content */
#header {height:195px; width:760px;}
.bold{font-weight: bold;}
/* using for left side second set of links, this fixes h3 setting really big lettering in IE7*/
h3 {font-size: 1.1em;}
/* my own version of h1, h2, h3, etc a begins with the largest font */
.ahead {
font-size:20px;
font-weight:bold;
font-family: Arial;
}
.bhead {
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
.chead {
font-size: 16px;
font-weight: bold;
font-family: Arial;
}
.dhead {
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
/* END OF My changes to original CSS */
/* Main layout and header */
#wrap {
background:#fff;
color:#303030;
width:760px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
}
/* redone,
1. changed padding to push edges of left side boxes to edge of margin; edge of link and add boxes have a gray line that now touches the edge of my main box
2. see above #header {background:url(img/front.jpg) no-repeat bottom left #fff; color:#505050; height:175px; margin:0 0 10px; padding:0;} */
#header h1 {font-size:2.5em; font-weight:400; letter-spacing:-2px; margin:0 0 4px 15px; padding:15px 0 0;}
#header h1 a,#header h1 a:hover {font-weight:400; padding:0;}
#header p {font-size:1.1em; letter-spacing:-1px; margin:0 0 20px 15px; padding:0 0 0 3px;}
/* Left sidebar and menu */
#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul.avmenu li {display:inline; padding:0; width:150px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4 /*preceding sets the gray color in bottom of link boxes */; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc /*preceding sets left side gray bar in link box */; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; /* changed next rule to alter link color from black to blue */ color:#286ea0; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current /* this is the settings for the page that is has a class="current" tag, showing that it is the currently viewed page */ {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea /*preceding sets the gray color in bottom of link box for the class="current" link box */; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050 /*preceding sets left side bar of current link box to black, removeing this command means the preceding rule of a gray bar (see previous setting) will be used */; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; /* changed next rule to alter link color from black to blue */color:#286ea0;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4 /*preceding sets the gray color in bottom of announce boxes; i.e. the second set of links */; border-bottom:1px solid #d8d8d8; border-left:1.3px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;}
#leftside p,.announce p {
font-size:1.1em;
}
/* Main content variations */
/* changed the following to push right side of main content away from the margin */
#content {
line-height:1.5em;
text-align:left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 160px;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0;
/*next two lines push the content off the left margin and puts a line down the left side of the main content (content is pushed away from this line) */
padding-left: 8px;
border-left: 1px solid #f0f0f0;
}
#content h2 {font-size:1.8em; font-weight:400; letter-spacing:-1px; margin:8px 0 10px; padding:0;}
cut out #content h3 {font-size:1.5em; font-weight:400; margin:6px 0; padding:0;}
#content img {background:#ccc; border:4px solid #f0f0f0; color:#303030; display:inline; padding:1px; margin:0 10px 5px 0;}
#content ul,#content ol {margin:0 0 16px 20px; padding:0;}
#content ul ul,#content ol ol {margin:2px 0 2px 20px;}
#content li {margin:0 0 2px 10px; padding:0 0 0 4px;}
/* Footer */
#footer {background:#fff; border-top:2px solid #dadada; clear:both; color:gray; font-size:0.9em; margin:0 auto; padding:8px 0; text-align:center; width:760px;}
#footer p {margin:0; padding:0;}
#footer a {background:inherit; color:gray; font-weight:400; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
/* Links and paragraphs */
a {background:inherit; color:#166090; text-decoration:none; font-weight:700;}
a:hover {background:inherit; color:#286ea0; text-decoration:underline;}
a img {border:0;}
p {margin:0 0 16px;}
blockquote {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; margin:16px; padding:7px 7px 7px 11px;}
blockquote p {font-size:1.1em; line-height:1.3em; margin:0;}
/* Tables and forms */
/* taken all these out
table {border:1px solid #d8d8d8; border-collapse:collapse; line-height:1.3em; width:95%; margin:0 0 16px; padding:0;}
caption {font-size:1.5em; font-weight:400; margin:0; padding:6px 0 8px; text-align:left;}
th {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; color:#505050; padding:7px; text-align:left;}
td {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; color:#303030; font-size:0.9em; padding:7px; text-align:left;}
input,textarea {border:1px solid #ccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;}
label {margin:2px;}
input {width:200px;}
textarea {width:400px;}
*/
/* Search box */
#searchbox label,.hide {display:none;}
#searchbox {margin:6px 0 16px; padding:0;}
#searchform {background:#fff; border:1px solid #ccc; color:#505050; font-size:0.9em; padding:4px; width:116px;}
/* Various classes */
.announce h2 {margin:0 0 10px; padding:0;}
.textright {margin:-10px 0 4px; text-align:right;}
.center {text-align:center;}
.small {font-size:0.8em;}
.large {font-size:1.3em;}
.highlighted {background:#f0f0f0; border:1px solid #b0b0b0; color:#303030; padding:3px;}
.button {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; font-weight:700; margin:0 0 15px; padding:7px 7px 7px 11px; width:120px;}
.left {float:left; margin:10px 10px 5px 0;}
.right {float:right; margin:10px 0 5px 10px;}
/* MY CSS CODE TO MAKE PICTURE BOXES WITH TEXT UNDERNEATH THEM
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;}
.box3{text-align:center;padding: 8px;}