@import url(https://fonts.googleapis.com/css?family=Droid+Sans|Rokkitt|Cutive);

body {font: normal 15px 'Droid Sans'; color: #ddd; 
      background: #000000 url('../images/bg.jpg');
      background-size: cover;
      background-position: 50% 0;
      background-repeat: no-repeat;
      background-attachment: fixed;
      margin: 0; padding: 0; line-height: 1.5;}

a, a:visited {color: #FDB331;text-decoration: underline;}
a:hover {color: #FFC256;}
a img {border: none;}
ul {list-style-type:square;}
ul, ol {padding-left: 25px;}
ul ul, ol ol {padding-left: 25px;}

.component_heading {margin: 0px; line-height: 1.2; font: normal 20px 'Cutive'; letter-spacing: 0; color: #fff; border-bottom:1px solid #ccc; padding-bottom:5px;}
.component_heading a, .component_heading a:visited {text-decoration: none;}

.component {margin-right: 30px;}
#header_wrapper {}

#header_text {text-align: center; margin-bottom: 20px;}
#header_text h1#site_heading {font: normal 70px 'Rokkitt';color: #fff; line-height: 1.2; margin: 5px;text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 4px; letter-spacing: -1px;}
#header_text h1#site_heading a {color: #fff;text-decoration: none;}
#header_text h2#site_subheading {font: normal 20px 'Droid Sans';color: #fff;text-shadow: rgba(0, 0, 0, 0.90) 1px 1px 7px; margin: 5px;line-height: 1.2;letter-spacing: 0;}

#header_photo {padding: 30px 0px 0px 0px; text-align: center;}
#header_photo img {width: 100%;-webkit-box-shadow: 0px 15px 41px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 15px 41px -9px rgba(0,0,0,0.75);
box-shadow: 0px 15px 41px -9px rgba(0,0,0,0.75);}

.navbar {z-index: 1; background-color: rgba(0, 0, 0, 0.8); width: 100%; 
         -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
         box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);}

#primary_navigation {font: normal 18px 'Droid Sans'; letter-spacing: 2px; zoom: 1; overflow: hidden;}
#primary_navigation ul {list-style-type: none; padding: 0; margin: 0; text-align:center;}
#primary_navigation ul li {display: inline-block; margin-right: 10px;}
#primary_navigation ul li a {display: inline-block; text-decoration: none; color: #ccc; padding: 20px 15px 10px 15px; margin-bottom: 5px;}
#primary_navigation ul li a:hover, #primary_navigation ul li.active a {color: #fff; background: transparent url('../images/arrow.png') top center no-repeat;}
#primary_navigation ul li.last {margin-right: 0px;}

#primary_navigation ul.sf-menu ul.sub_navigation {background: #000; border-radius: 0px;
-webkit-box-shadow: 0px 15px 25px -9px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 15px 25px -9px rgba(0,0,0,0.3);
box-shadow: 0px 15px 25px -9px rgba(0,0,0,0.3);
}
#primary_navigation ul.sf-menu ul.sub_navigation li, #primary_navigation ul.sf-menu ul.sub_navigation li a {border-radius: 0px;}
#primary_navigation ul.sf-menu ul.sub_navigation li a {border-top: 0px; color: #ccc;background-image: none;}
#primary_navigation ul.sf-menu .active ul.sub_navigation li a, #primary_navigation ul.sf-menu ul.sub_navigation li a:hover {border-top: 0px; color: #fff;background-image: none;}

#body_wrapper {margin-top: 30px;}
#middle_wrapper {background-color: rgba(0, 0, 0, 0.8); border-radius: 5px; 
                 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
                 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
                 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
                 padding: 0 0 15px 0;
                }

#top_wrapper {padding-bottom: 10px;}
#content_background {padding: 0 10px;}
.location {padding: 10px 0; margin-top: 20px;}
.splash #top .location {border-bottom: 0px;}

.navigation_component ul {list-style-type: none; font-size: 18px; padding: 0; margin: 0;}
.navigation_component ul a {text-decoration: none;}
.navigation_component ul li {padding: 5px 0; margin: 0;}
.navigation_component ul ul {padding-left: 35px; list-style-type:square}

.blog_component ul li a, .blog_archive_component ul li a {text-decoration: none;}
.blog_component ul, .blog_archive_component ul {list-style-type: none; padding-left: 0;}
.blog_component .blog_post ul {list-style-type: disc; padding-left: 30px;}
.blog_component p.post_read_more {padding-bottom: 10px;}
.blog_component p.post_read_more a {padding: 10px; background: #000; color: #fff; text-decoration: none;}
.blog_component p.post_read_more a:hover {background: #999; color: #fff; text-decoration: none;}
.blog_component p.archived {text-align: right; padding-top: 10px;}
.blog_component p.archived a {padding: 10px; background: #999; color: #fff; text-decoration: none;}
.blog_component p.archived a:hover {background: #000; color: #fff; text-decoration: none;}

.blog_post .title {margin-top: 20px;}
.metadata {font-size: 11px; padding-top: 5px;}


.component input {min-height: 30px;}
.component input, .component textarea, .component select {font: normal 14px Arial; border: none; color: #ddd; border: 1px solid #444; background-color: rgba(51, 51, 51, 0.7); border-radius:5px;}
.component select {padding: 9px 0px;}
.component button, .blog_component p.post_read_more a, .blog_component p.archived a, input.form_field_submit_button, .submit_wrapper input {font: normal 14px Arial; border-radius: 5px; padding: 10px 20px; background: rgba(0, 0, 0, 0.7); color: #fff; border: none; font-size: 16px;}
.component button:hover, .blog_component p.post_read_more a:hover, .blog_component p.archived a:hover, input.form_field_submit_button:hover, .submit_wrapper input:hover {background: #333; color: #fff; font-size: 16px;border-radius:5px;}



#footer_wrapper {color: #fff; padding: 10px 10px 30px 10px; margin-top: 20px;}
#footer_wrapper a, #footer_wrapper a:visited, #footer_wrapper a:hover {color: #ddd; text-decoration:underline;}
#powered_by {padding-top: 10px; text-align:center;}
#copyright {text-align:center;}


@media screen and (max-width: 768px) {
  #mobile_wrapper {display: block;}
  .navbar {display:none;}
  #header_text h1#site_heading {font-size: 55px;}
  #header_text h2#site_subheading {font-size: 20px;}
  #middle_wrapper { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background:transparent;}
  #content_background {background: rgba(0, 0, 0, 0.8);}
  .component {margin-right: 0;}
}


