@charset "utf-8";
/* CSS Document */

*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	
img {
    max-width: 100%;
}


.header {
	background: #A4C73C;
	height:100px;
}

body {
	max-width: 100%;
	width: 95%;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image:url(http://www.brightshinyweb.com/site_images/bg_01.jpg);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	color: #000;
}


 #column1 {
        float: left; /* Sets this column to the left inside its section */
		width: 45%;
		margin-left:5%;
 }



 #column2 {
        float: right; /* Sets this column to the left inside its section */
		width:45%;
		margin-right:5%;
 }

p.bsw {text-align:justify;}


ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}


a:link {
	color:  #000000;
	text-decoration: underline; 
}
a:visited {
	color: #20270C;
	text-decoration: underline;
	background:#20270C;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}


.container {
	width: 960px;
	background: #ffffff;
	margin: 0 auto;
	overflow: hidden;
}

.content {

	padding: 10px 0;
	width: 960px;
	float: left;
}


.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

#nav {
	position:relative;
	width:auto;
	height:auto;
	z-index:1;
	left: auto;
	top: auto;
	margin-bottom: 0px;
	padding-bottom: 0px;
	visibility: visible;
	border-radius:1.5em;
	-moz-border-radius:1.5em;
	-webkit-border-radius:1.5em;
}

ul {
  font-family: Arial, Verdana;
  font-size: 0.81em;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #a5c73c;
  border-top: 0px solid #a5c73c;
  padding: 0.75em 1.25em 0.68em 1.93em;
  background: #a5c73c;
  margin-left: 0.31em;
  white-space: nowrap;
  border-radius:1.5em;
  -moz-border-radius:1.5em;
  -webkit-border-radius:1.5em;
}
ul li a:hover { background: #21270d; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 0.68em;
}
li:hover a { background: #959797; }
li:hover li a:hover { background: #959797; }
	
		a:link {
	color:#000000;
	
}

a { display: block; }

a:visited {
	color: #FBFEFE;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
	color:#a5c73c;
}
	ul.contact
	{
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: block;
		background: #3f3f3f;
		width: 2.5em;
		height: 2.5em;
		line-height: 2.5em;
		border: 1.25em;
		text-align: center;
		color: #000000;
	}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
	@media only screen and (min-width:100px) and (max-width:320px)
	{
		body 
		{     
		font-size: 30%;	 
        }
		
		.header {
		width:30%;
		}
		
		
		
		.content { 
		width: 30%;
		text-align: center;
		display: inline-block;
		}

 #column1 {
	     float: left; /* Sets this column to the left inside its section */
		  width: 15%;
		  margin-left:1%
         }
 
         #column2 {
	      float: right;
		  width: 15%;
		  margin-right:20%
        }


 #menu
	    { 
		width: 100%;
		text-align: center;
		display: inline-block;
	    }

  #nav 
       {
	    width: 30%;
		text-align: center;
		display: block;
        }


.button
	{
		display: inline-block;
		padding: .1em .2em .1em .2em;
		font-weight: 200;
		font-size: 0.40em;

	}
	
	.button:before
	{
		display: inline-block;

	}







ul li {
        width: 100%;
		padding: 0.2em 0.2em;
		text-align: center;
		display: block;
}

ul li {
        width: 100%;
		padding: 0.2em 0.2em;
		text-align: center;
		display: block;
}

#page
{       
		width: 100%;
		text-align: center;
		display: block;
	}
	
	p.front
	{ display:none;
	}
	
	#page .box
	{
		padding: 0.1em 0.1em 0.1em 0.1em;
		margin-bottom: 0em;
	}
	
	h1, 
	{
		font-size:6px;
	}
	h2, h3
	{ 
	   font-size:smaller;
	}
		
#page
{       
		width: 100%;;
	}
	
	
	

	
	.title {
		      padding-left:2%;
		      padding-right::2%;
}
	
	
	
	}

@media only screen and (min-width:321px) and (max-width:600px)
	{
body 
		{     
		font-size: 60%;	 
        }
		
		.header {
		width: 35%;
		}
		
		
		.content { 
		width: 35%;
		text-align: center;
		display: inline-block;
		}
		
		 #column1 {
	     float: left; /* Sets this column to the left inside its section */
		  width: 50%;
		  margin-left:0%
         }
 
         #column2 {
	      float: right;
		  width: 50%;
		  margin-right:0%
        }


		
				
 #menu
	    { 
		width: 100%;
		text-align: center;
		display: inline-block;
	    }

  #nav 
       {
	    width: 62%;
		text-align: center;
		display: block;
        }

.button
	{
		display: inline-block;
		padding: .1em .2em .1em .2em;
		font-weight: 200;
		font-size: 0.40em;

	}
	
	.button:before
	{
		display: inline-block;

	}



ul li {
        width: 100%;
		padding: 0.2em 0.2em;
		text-align: center;
		display: block;
}

	h1, 
	{
		font-size:9px;
	}
	h2, h3
	{ 
	   font-size:smaller;
	}
		





@media only screen and (min-width:400px) and (max-width:600px)

{
body 
		{     
		font-size: 65%;	 
        }
		
		.header {
		width: 62%;
		}
		
		
		.content { 
		width: 62%;
		text-align: center;
		display: inline-block;
		}
		
		 #column1 {
	     float: left; /* Sets this column to the left inside its section */
		  width: 50%;
		  margin-left:0%
         }
 
         #column2 {
	      float: right;
		  width: 50%;
		  margin-right:0%
        }


		
				
 #menu
	    { 
		width: 100%;
		text-align: center;
		display: inline-block;
	    }

  #nav 
       {
	    width: 100%;
		text-align: center;
		display: block;
        }

.button
	{
		display: inline-block;
		padding: .1em .2em .1em .2em;
		font-weight: 200;
		font-size: 0.40em;

	}
	
	.button:before
	{
		display: inline-block;

	}



ul li {
        width: 100%;
		padding: 0.2em 0.2em;
		text-align: center;
		display: block;
}

	h1, 
	{
		font-size:9px;
	}
	h2, h3
	{ 
	   font-size:smaller;
	}
		


	
@media only screen and (min-width:601px) and (max-width:750px)
	{
		body 
		{     
		font-size: 60%;	 
        }
		
		.header {
		width: 80%;
		}
		
		
		
		.content { 
		width: 80%;
		text-align: center;
		display: inline-block;
		}
			
 #column1 {
	 width: 40%;
 }
 
  #column2 {
	  width: 40%;
  }


 #menu
	    { 
		width: 100%;
		text-align: center;
		display: inline-block;
	    }

  #nav 
       {
	    width: 30%;
		text-align: center;
		display: block;
        }

ul li {
        width: 100%;
		padding: 0.2em 0.2em;
		text-align: center;
		display: block;
}

#page
{       
		width: 100%;
		text-align: center;
		display: block;
	}
	
	
	.button
	{
		display: inline-block;
		padding: .05em .05em .05em .05em;
		background: #000000;
		letter-spacing: 0.20em;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #dddddd;
		border-radius:1.5em;
        -moz-border-radius:1.5em;
        -webkit-border-radius:1.5em;
	}
	
	h1
	{
		font-size:14px;
		margin: 0;
		padding: 0;
	}
	
	h2, h3
	{
		font-size:10px;
		margin: 0;
		padding: 0;
	}
	
	}