@charset "utf-8";
/* CSS Document */

body {
    background: url(bgr.jpg) repeat center top #000 fixed;
	background-size: 100%;
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#2D2D2D;
	margin:5px 0px 0px 0px;
    text-align:left;
}

.gray { background-color:#333;}
.brown { background-color:#B5A47C;}
.dbrown { background-color:#503D1F;}
.white { background-color:#ECE9D8;}
.black{ background-color:#000;}

.foot {color:#ECE9D8; padding:5px 0px}
.foot a {color:#ECE9D8;}
.foot a:hover { text-decoration:underline; color:#FFF}

audio { width: 180px; }

.pad {padding:10px 2%}

a {text-decoration:none; font-weight:100; color:#693317}
a:hover { text-decoration:none; color:#555}

.imgs {margin:3px 8px;  max-width:100%;height:auto;}
.post-img {border:5px solid #CCC; max-width:300px;height:auto; clear:both; margin:5px}

h1,h2, .title {color:#693317;}
.title {font-size:170%; }
h1 {text-align:left; font-size:200%; padding:5px 10px; margin:6px 0px; font-style:italic; background:rgba(194,173,128,0.2);}
h2 {font-weight:600; text-align:center; font-size:200%; padding:5px 0px; margin:0px; }
h3 {font-weight:600; text-align:center; padding:5px 0px; margin:0px; font-size:100%; text-transform:uppercase}


/* Header */		 
.header {
	 text-align:left;
	 height:auto;
}

.slogan {
	 text-align:center;
	 font-size:200%;
	 
}

.slogan-pad {margin-top:4%}


/* #Menu */
.nav {
	background-color:#307ade;
    background-image: linear-gradient(to top, #307ade, #005391);
	text-align:center;
	padding:0px;
	margin:0px;
}


.menu{
	font-family: "Times New Roman", Times, serif;
	border-bottom:1px solid #693317;
    padding:8px 0px;
	font-size:120%;
	font-weight:600;
    display:block;
    position:relative;
    margin:0px 10%;
    overflow:hidden;
    text-align:center;
    white-space:nowrap;
    color:#693317;
  }

.menu:hover{
	background-color:#693317;
	color:#CCC;
	transition:all 0.3s linear;
}

.active {color: #984A21}
/* END Menu */


#footer {
	padding:10px 0px;
	text-align:center;
	color:#333;
	font-size:70%;
    margin-top:20px;}

.facebook{
	position:fixed;
	right:0px;
	padding-top:10%;
	z-index:9999;
	max-width:36px;
	max-height:120px;
}
	
	/* Layout
================================================== */
    .container                { position: relative; width: 1110px; margin: 0 auto; padding: 0; -webkit-box-shadow: 3px 3px 8px #333;-moz-box-shadow: 3px 3px 8px #333; box-shadow: 3px 3px 8px #333;}
    .container .columns       { float: left; display: inline; margin:0px;}
	
	.container .full.columns  { width: 1110px;}
	.container .one.columns  { width: 1070px; padding:10px 20px}
	.container .main.columns  { width: 729px; padding:5px 20px}
	.container .side.columns  { width: 301px; padding:5px 20px}
    .container .two.columns   {width: 545px; padding:5px} 
    .container .tree.columns  { width: 350px; padding:5px; text-align:center; min-height:300px} 

/* #Tablet (Portrait) Design for a width of 768px 
================================================== */
 @media only screen and (min-width: 768px) and (max-width: 1129px) {
     .container  { width:100% }
     .container .columns { margin:0px;}
      
	 .container .full.columns {width: 100%; padding:0px;}
	 .container .one.columns {width: 98%; padding:0px 1%;}
     .container .main.columns {width: 66%; padding:0px 1%;} 
	 .container .side.columns {width: 26%; padding:0px 1%;}
	  .container .two.columns  {width: 48%; padding:0px 1%;} 
     .container .tree.columns {width: 37%; padding:0px 1%;}
	 
	  h1 {font-size:180%;}
	 .menu  {padding:8px 15px; font-size:110%;} 
	 .slogan {font-size:160%;}
	 .post-img {max-width:220px;}
	 .title {font-size:150%;}
	 
}
		
/*   Design for a width of 480px 
================================================== */
 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width:100% }
        .container .columns {margin:0px}
		
		
		.container .full.columns {width: 100%; padding:0px; margin:0px}
		.container .one.columns,
		.container .main.columns,
	    .container .side.columns,
        .container .two.columns {width: 96%; padding:0px 2%; margin:0px;}
        .container .tree.columns {width: 46%; padding:0px 2%; margin:0px; min-height:100px}
		
		.menu  {padding:5px 10px; font-size:100%;} 
		.header {text-align:center;}
		.slogan {font-size:140%;}
		.slogan-pad {margin-top:1px}
		 h1{font-size:150%; text-align:center}
		 h2, .title {font-size:130%;}
		 h3 {font-size:90%;}
		 .facebook{max-width:27px;max-height:90px;}
}

/*  #Mobile (Portrait) Design for a width of 320px
================================================== */
@media only screen and (min-width: 220px) and (max-width: 479px) {
        .container { width: 100%; }
        .container .columns { margin:0px}
		
		.container .full.columns {width: 100%; padding:0px; margin:0px}
		.container .one.columns,
		.container .main.columns,
	    .container .side.columns,
        .container .two.columns,
        .container .tree.columns {width: 96%; padding:0px 2%; margin:0px}
		
		.menu  {padding:2px 8px; font-size:100%;}
		.header {text-align:center;}
		.slogan {font-size:120%;} 
		.slogan-pad {margin-top:1px}
		 h1{font-size:120%; text-align:center}
		 h2, .title {font-size:110%;}
		 h3 {font-size:80%;}
		 .facebook{max-width:18px;max-height:60px;}
	}

/* #Clearing
================================================== */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
	  padding:10px 0px 10px 0px;
    }
	

/* #Forms
================================================== */

.forms2{
border: 1px solid #999;
height: 25px;
color:#555;
background-color:#CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px;
clear:both;
 margin:0px 0px 10px 0px;
 width:95%;
}
.forms3{
border: 1px solid #999;
height: 55px;
color:#555;
background-color:#CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px;
 clear:both;
 margin-bottom:10px;
 width:95%;
 height:55px;
}

.btn{
	border: 1px solid #999;
    height: 35px;
    width:66px;
    text-align:center;
    font-size: 90%;
    color:#555;
    background-color:#CCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
 
 .btn:hover {
    cursor: hand;
    cursor: pointer;
    opacity: .8;
}