@charset "utf-8";
/* CSS Document */
html, body {
height: 100.1%;
}
body {
background:black url(images/site-back-800.jpg) top center  repeat-x scroll;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #ffffff;
}
a, a:link, a:visited {
color: #000000;
text-decoration:underline;
}
p {
margin-right: 20px;
margin-left: 20px;
text-align:left;
font-size: 80%;
}
h1, h2, h3 {
font-size: 120%;
font-weight: 600;
color:#C6262E;
text-align:left;
margin-left: 20px;
}
ul {
text-align:left;
font-size: 80%;
}
div{
text-align:center;
}
.center {
text-align:center;
}
.left {
text-align:left;
}
.right {
text-align:right;
}
.smaller {
font-size:smaller;
}
#wrap {
max-width: 1000px;
background: url(images/top-back.jpg) top center no-repeat scroll;
margin: 0px auto;
text-align:center;
}
#wrap2 {
max-width: 1000px;
background: url(images/top-back-2.jpg) top center no-repeat scroll;
margin: 0px auto;
text-align:center;
}
#wrap3 {
max-width: 1000px;
background: url(images/top-back-3.jpg) top center no-repeat scroll;
margin: 0px auto;
text-align:center;
}
#wrap4 {
max-width: 1000px;
background: url(images/top-back-4.jpg) top center no-repeat scroll;
margin: 0px auto;
text-align:center;
}
#banner {
min-height: 271px;
margin: 0px auto;
text-align:center;
}

#logo {
text-align:right;
}
/*slideshow*/
#slideshow {
    position:relative;
    height:268px;
	float:left;

}

#slideshow div {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    opacity:0.0;
    height: 268px;
  background-color: transparent;
}

#slideshow div.active {
    z-index:102;
    opacity:1.0;
}

#slideshow div.last-active {
    z-index:101;
}
.grommit{
  width:322px;
  height:268px;
  }
#menu {
color: white;
text-align:center;
height: 54px;

}
#menu a, #menu a:link, #menu a:visited {
color:white;
padding-right: 30px;
padding-left: 30px;
text-decoration:none;
font-size:90%;
line-height: 54px;}
#menu a:hover {
color: #999999;
}
#content {
max-width: 1000px;
margin: 0px auto;
text-align:center;


	border: solid 0px #888;
	background-color:white;
  color: black;
	/*box-shadow: 4px 4px 4px #888;*/
}
#left-col {
float:left;
width: 220px;
}
#right-col {
margin-left: 240px;
margin-right: 20px;
}
#footer {
max-width: 1000px;

margin:auto;

}
.footer-int {
  text-align:right;
  color:#000000;
  font-size: 80%;
  margin-right: 20px;
}
/*scroller*/
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
#makeMeScrollable
		{
			width:100%;
			min-height: 260px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0 4px;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
		
/* Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 801px) {


}

@media only screen and (max-width: 800px) {


}
@media only screen and (max-width: 768px) {



}

@media only screen and (max-width: 600px) {
#wrap {
 max-width: 100%;
 }
#menu {
  height: auto;
}
#menu a, #menu a:link, #menu a:visited {
   padding-right: 5px;
  padding-left: 5px;
  line-height: normal;
  }
 #left-col {
  float:none;
  width: 100%;
 }
#right-col {
  margin: auto;
 }
#footer {
  max-width: 100%;
  text-align:center;
}
.footer-int {
 text-align:center;}
.logo {
  width: 100%;
  heigh:auto;
  }
.grommit {
 width: 30px;
 height:auto;
 }
.scrl {
  max-width:300px;
}
#makeMeScrollable {
 background-color:#676968;
 }
}

@media only screen and (max-width: 320px) {
#wrap {
 max-width: 100%;
 }
#menu {
  height: auto;
}
#menu a, #menu a:link, #menu a:visited {
   padding-right: 5px;
  padding-left: 5px;
  line-height: normal;
  }
#left-col {
  float:none;
  width: 100%;
 }
#right-col {
  margin: auto;
 }
#footer {
  max-width: 100%;
 
}
.footer-int {
 text-align:center;}
#logo {
text-align:center;
}
.logo {
  width: 100%;
  heigh:auto;
  }
.grommit {
 width: 300px;
 height:auto;
 }
.scrl {
  max-width:300px;
}
#makeMeScrollable {
 background-color:#676968;
 }
}