/*default style sheet for three column page*/

/*the elements expressed here have default styles included in each browser's default style sheet but can be styled site wide to create a unique site style*/


/*to start from the same point, all default margin, padding and border styles need to be cleared. Different browsers have different default styles for common elements. These will be individually overridden as the page is styled*/


/*set html elements to default styles */
*{
margin: 0px;
padding: 0px;

}

body{
font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif; /*sets default font*/
font-size: 16px;  /*sets default font-size so subsequent size markers function*/
margin: 0px;
padding: 10px 0px 0px 0px;
background: #ffaa44; 
}

#frame{
  width: 725px;
  background: #ff9933 url(images/bg.gif);
  background-repeat: repeat-y;
  border: 3px double #600;
  margin: 0px auto;
}

/* /////////// page header and its elements /////////////// */
#header{
height: 170px;
}

#logobox{
float: left;
width: 230px;
height: 104px;
clear: none;
background: url(images/SFA_Logo.gif);
display: inline;
margin: 10px;
background-repeat: no-repeat;
}

#logobox img{
height: 104px;
width: 230px;
}
/*style the logo image for print and/or handheld styles*/
#logo{
  height: 104px;
  width: 230px;
}

/*a box for a page or site banner -- usually contains the slogan*/
#bannerbox{
  float: right;
  clear: none;
  width: 63%;
  text-align: center;
}
#bannerbox h3{
  width: 80%;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  margin: 10px auto 0px;
}

#bannerbox img{
  margin-top: -10px;
}

/*optional box for a subhead/horiz. bar/divider under the header that can contain content e.g. date, phone, marching ants, etc.*/
#border{
  height: 20px;
  width: 200px;
  float: right;
  clear: none;
	text-align: right;
}

/* ////////// Page content blocks /////////// */

/*box for primary page content. First in the source code. Contains wide margins to accomodate absolutely positioned elements later in the code.*/
#content{
margin: 0px 180px;
padding: .6em;

}

/*box for secondary page content. Is optional and next in the source code. added as a supplemental content block at bottom of page*/
#content2{
  float: right;
  width: 150px;
  padding: .6em;
  clear: none;
  text-align: center;
}

#content2 img{
  width: 145px;
}

/*box for tertiary page content. Is optional and next in the code source. Usually contains ads,or sidebars and is usually positioned absolutely as the  right column*/
#content3{
  float: left;
  width: 161px;
  padding: .6em;
  clear:none;
}

/*box for copyright, ul of site links for text links, legalese etc. style the text links here*/
#footer{
  clear: both;
  width: 725px;
  margin: 5px auto;
  text-align: center;
  font-size: .8em;
}

#footbox{
  font-size: 1.6em;
  color: #f93;
  background: #600;
  border: 1px black solid;
  width: 725px;
  margin: 0px auto;
}

#footer ul{}

#footer li{
  display: inline;
  list-style: none;
}

#footer a{}

#footer a:visited{}

#footer a:hover{}

/*site wide style classes*/

img{
border: none;/*Sets default image border to none. Style each image as needed*/
}


h1, h2, h3, h4{
  color: #600;
  margin: .3em 0em;
}
h1{
font-size: 1.1em;
}

h2{}

h3{}

#content h4{
text-align: center;
}

h5{}

h6{}

hr{}

noscript{
  font-size: .6em;
  color: white;
}

p, pre, form{
  font-size: .9em;
}

p{
margin: .5em 0em;
}

ul{
  list-style-position: inside;
}

/* phrase elements -- seen by search engines much like h* elements to define search weight and used by aural styles as clues to pronounciation. Can also be styled*/



/*anchor elements*/

a:link{
	text-decoration: none;
	}

a:visited{
	text-decoration: none;}

a:active{}

a:hover{
	text-decoration: underline;}

/*inline text elements*/

.hide{
display: none;
}

.small{
  font-size: .8em;
}

.center{
  text-align: center;
}

.center img{
  margin: 7px;
}

.left{
  float: left;
}

.bold{
  font-weight: bold;
}

.pad{
  padding: 5px;
}

.marg{
  margin: 5px;
}

.left li{
  font-size: .9em;
}

.right{
  float: right;
}

.right img{
  width: 98%;
}

.right select{
  font-size: .8em;
  margin: 1px;
}
.half {
  width: 48%;
}

.white, .white a{
  color: white;
  font-weight: bold;
}
.box{
  padding: 8px;
  background: #ff9933;
  border: solid black 1px;
  width: 90%;
  margin: 5px auto;
  text-align: center;
  font-size: .9em;
  font-weight: bold;
}

.box a{
  text-decoration: none;
  color: blue;
}
.box a:hover{
  text-decoration: underline;
}

.box a:visited{
	color: blue;
	}

.sub a{
  display: block;
  width: 135px;
  background: #ff8c00;
  border: 1px solid black;
  line-height: 1.3em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin: 5px auto;
  text-decoration: none;
  color: black;
  
}


.sub a:hover{
  background: #cc6000;
  text-decoration: none;
}

.alert{
  color: #600;
}

.bold{
  font-weight: bold;
}

.viewcart{
  border: 2px solid #000;
  margin: 8px auto;
  width: 130px;
  height: 30px;
  
}

.viewcart:hover{
  border: 2px solid #ed0;
}

.borderbox{
  border: 2px #600 solid;
  padding: 5px;
  text-align: center;
}

.borderbox h3{
  color: #00d;
}

.code{
border: 1px solid black;
overflow: scroll;
background: #fff;
font-size: .8em;
font-weight: normal;
}

#bar{
  height: 1.5em;
  border: 1px solid #600;
  margin-bottom: 10px;
  margin-top: 5px;
  background: #ffaa44;
}

.warn{
 border: 1px solid black;
 background-color: #ffaa44;
 padding: 5px;
 }



/* ///////////////////// style the menu ///////////////////// */
/*menu box contains ul of site links*/

#search {
  background: red;
}

#menu {
  border-top: 1px solid #600;
  border-bottom: 1px solid #600;
  height: 22px;
  padding: 3px;
  font-size: .8em;
  text-transform: uppercase;
}

#nav, #nav ul  { /* all lists */
    float: left;
	margin: 0 0 1em 0;
	list-style: none;
	line-height: 1.4;
	width: 500px;
	font-weight: bold;
	clear: none;
	}

#nav a {
	display: block;
	width: 120px;
	w\idth: 120px;
	color: #ff0;
	text-decoration: none;
    background: #00e;
	border: black solid 1px;}

#nav a span{
  display: block;
  text-align: center;
}

#nav a:hover{
  background: #369;
}
#nav li { /* all list items */
    float: left;
	width: 124px; /* width needed or else Opera goes nuts */
	padding: 0px;
 }

#nav li ul { /* second-level lists */
	position: absolute;
	width: 124px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

.required{
color: #600;
font-weight: bold;
}

.centext{
text-align: center;
}

.ipad{
margin: 8px;
}

#contact textarea{
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
padding: 5px;
width: 90%;
}

.hr{
height: 0px;
line-height: 0px;
border-bottom: 1px solid #600;
width: 95%;
margin: 0 auto;
padding: 5px 0;
}

.iright{
float: right;
margin: 8px;
}