/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 */

/* HTML element (SMACSS base) rules */
@import "normalize.css";

/* Layout rules */
@import "layouts/responsive.css";

/* Component (SMACSS module) rules */
@import "components/misc.css";
/* Optionally, add your own components here. */
@import "print.css";

/* SMACSS theme rules */
/* @import "theme-A.css"; */
/* @import "theme-B.css"; */

.front #header {
  background-image: url(../images/typing.jpg);
  opacity: .98;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  right: -0px;
  padding-top: 20px;
  padding-left: 70px;
}

#block-block-1 {
    background-image: url('../images/drupalWatchdog.jpg');
    background-size: 80px 60px;
    background-repeat: no-repeat;
    background-position: center; 
}

div#block-search-form {
    /* margin: 10px 0px 0px 2px; */
    padding: 1px 0px 0px 20px;
}

#header {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  right: -0px;
  padding-top: 20px;
}

h2#site-slogan {
    /* text-align: center; */
    padding-left: 30%;
    font-style: italic;
}

title {
  font-family: "Playfair Display", serif;
  width: 70%;
}

.views-row {
    clear: both;
}

.front .region-sidebar-first, .front .sidebars {
  max-width: 20%;
  position: relative;
  top: 615px;
}
.region-sidebar-first, .sidebars {
  max-width: 20%;
}

#block-block-6 {
    padding: 5px;

}

#logo img {
    vertical-align: bottom;
    height: 75px;
    float: left;
    margin-top: 15px;
}

#page #site-name a:link, #page #site-name a:visited {
    <!--color: #F8F8FF;-->
    color: #d02200;
    text-decoration: none;
    padding-left: 15px;
    float: left;
}
h1 a {
  color: acqua;
}

#site-name a {
  color: acqua;
}

#container {
    background: url("images/minecraft.jpeg") repeat scroll 0 0 transparent;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

.block, .sidebar {
    background-color: #F4F4F4;
    opacity: .7;
    border-width: 1px;
    margin: 0 0 15px;
    border-radius: 15px;
}

#content, #footer {
    background: rgb(0, 0, 0);
    background: rgba(248, 248, 248, 0.9);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    _display: inline;
    _overflow: hidden;
    _overflow-y: visible;
}

.front #content {
    width: 70%;
    margin-left: 22%;
    margin-right: -100%;
    padding: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: absolute;
    top: 650px;
}

.front .sidebar-first #content {
    width: 70%;
    margin-left: 22%;
    margin-right: -100%;
    padding: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: relative;
    top: 615px;
}

.sidebar-first #content {
    width: 70%;
    margin-left: 22%;
    margin-right: -100%;
    padding: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: 
}

#secondary-menu{
    float: right;
}

#secondary-menu a{
    color: white;
}

#main {
    padding-top: 3em;
    position: relative;
    margin-left: 100px;
}

.field-type-taxonomy-term-reference {
    display: none;
}

pre {
    background: #eee;
    padding: 10px;
    border: 2px solid grey;
    overflow: hidden;
    margin: 0 0 15px 0;
    width: 563px;
    font-family: Courier, Monospace;
}

.pause-button {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 100px;
  width: 100px;
}

.play-button {
  position: fixed;
  top: 5%;
  right: 2%;
  padding: 10px;
  font-family: Arial;
  height: 70px;
  width: 70px;
}


.region-header .block {
  width: 20%;
  float: left;
  margin-right: 40px;
  min-height: 430px;
}

.front .region-header {
  clear: both;
  width: 100%;
  margin-left: 15%;
}

.region-header #block-block-14 h2:before {
  content: "\f0e9";
  font-family: 'FontAwesome';
  font-size: 24px;
  padding-right: 5px;
}
.region-header #block-block-15 h2:before {
  content: "\f275";
  font-family: 'FontAwesome';
  font-size: 24px;
  padding-right: 5px;  
}
.region-header #block-block-16 h2:before {
  content: "\f1b9";
  font-family: 'FontAwesome';
  font-size: 24px;
  padding-right: 5px;
}
.region-header #block-block-17 h2:before {
  content: "\f24e";
  font-family: 'FontAwesome';
  font-size: 24px;
  padding-right: 5px;
}

@media only screen
and (min-width : 321px)
and (max-width: 1000px) {
  #page #site-name a:link, #page #site-name a:visited {
    text-decoration: none;
    padding-left: 15px;
    float: none; 
    /* clear: both; */
  }
  h2#site-slogan {
    /* text-align: center; */
    padding-left: 0%;
    font-style: italic;
  }
  .front #header {
    height: 100%;
    width: 100%;
    position: static;
    padding-top: 20px;
    padding-left: 13px;
    background-image: none;
  }

  .front #content {
    width: 70%;
    margin-left: 22%;
    margin-right: -100%;
    padding: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: static;
  }

  #header {
    height: 100%;
    width: 100%;
    position: static;
    padding-top: 20px;
  }

  .front .region-sidebar-first, .front .sidebars {
    max-width: 20%;
  }


    #main {
        padding-top: 3em;
        position: relative;
        margin-left: 7px;
    }
    /*ToDO:  below display none conflicts with script.js*/
    .front .play-button, .pause-button, #block-block-12 {
      display: none !important;
    }
    .region-sidebar-first, .sidebars {
      max-width: 0%;
      padding: 10px 10px 10px 10px;
    }
    .region-header .block {
      width: 100%;
      float: left;
      margin-right: 0px;
      min-height: 200px;
    }
    .block, .sidebar {
      background-color: #F4F4F4;
      border-width: 1px;
      margin: 0 0 15px;
      border-radius: 15px;
      padding: 10px 10px 10px 10px;
    }
    .front .region-header {
      clear: both;
      width: 100%;
      margin-left: 0%;
    }
    .region-sidebar-first, .sidebars {
      max-width: 100% !important;
    }
    .sidebar-first #content {
        width: 100%;
        margin-left: 3%;
        margin-right: 0%;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
    pre {
        background: #eee;
        padding: 10px;
        border: 2px solid grey;
        overflow: hidden;
        margin: 0 0 15px 0;
        width: 90%;
        font-family: Courier, Monospace;
    }

}