@charset "utf-8";

/* CSS Document SomdNews -- Responsive Design Navigation Layout Sidebar -- October 2013 */ 
 

li.current a {
  color: #7b7776; }

/* ----------- content ------------- */
#content {
  float: left;
  width: 100%;
  margin: 3em 0 0 0;
  padding-bottom: 3em; }

.main-content {
  overflow: hidden;
  padding-bottom: 4.5em; }
  
	 
/* ----- checkbox fix for android ------- */
body {
  -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
  from {
    padding: 0; }

  to {
    padding: 0; } }


/* ----------- nav ------------- */

.btn-1 {
  float:left;
  margin: 1.75em auto;} 
   
.btn-2 {
  float:right;
  margin: 1.75em auto;}

#toggle-1 {
  position: absolute;
  left: -999em; }

#toggle-2 {
  position: absolute;
  left: -999em; }

nav-1 {
  position: absolute;
  padding: 5em 0 0 0;
  background: #ccc;
  width: 50%;
  left: -50%;
  height: 150%;
  border:1px solid #ccc;
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -ms-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s; }

nav-2 {
  position: absolute;
  padding: 5em 0 0 0;
  background: #ccc;
  width: 50%;
  right: 150%;
  height: 35em;
  border:1px solid #ccc;
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -ms-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s; }

#nav {
  margin: 0.1875em 0 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ccc; }
  #nav a {
    text-decoration: none;
    color: #000000;
    padding: 1em 0 1em 5%;
    display: block;
    border-bottom: 1px solid #ccc;
    height: 2em;
    background-image: -webkit-linear-gradient(top, #fff, #fff);
    background-image: -moz-linear-gradient(top, #fff, #fff);
    background-image: -ms-linear-gradient(top, #fff, #fff);
    background-image: -o-linear-gradient(top, #fff, #fff);
    background-image: linear-gradient(top, #fff, #fff); }
    #nav a:hover {
      background: #4b4746;
      background-image: -webkit-linear-gradient(top, #ccc, #ccc);
      background-image: -moz-linear-gradient(top, #ccc, #ccc);
      background-image: -ms-linear-gradient(top, #ccc, #ccc);
      background-image: -o-linear-gradient(top, #ccc, #ccc);
      background-image: linear-gradient(top, #ccc, #ccc); }

.wrapper {
  width: 100%;
  overflow:hidden;}

.inner {
  float: left;
  width: 100%;}

.close {
  display: none;
  cursor: pointer;
  color: #fff; }
  .close span {
    border: 2px solid white;
    border-radius: 50%;
    padding: 0.2em 0.4em; }
  .close:hover span {
    border-color: #000; }

.close:hover {
  color: #000; }

#toggle-1:checked ~ nav-1 {
  left: 0; 
  }
  #toggle-1:checked ~ nav-1 .close {
    position: fixed;
    top: 1.5em;
    left: 4%;
    display: block; }

#toggle-2:checked ~ nav-2 {
  right: 0; 
  }
  #toggle-2:checked ~ nav-2 .close {
    position: fixed;
    top: 1.5em;
    right: 4%;
    display: block; }
	

/* --------- Header------------ */
header {
  color: #eee;
  text-align: center;
  background: #fff; 
  border-width:1px;
  border-color:#ccc;
  border-top-style:solid;
  border-right-style:none;
  border-bottom-style:solid;
  border-left-style:none; }

.logo {
  margin: 1.25em auto;
  width: 200px; }
 
 


/* ------- Smaller than 480px ------- */
@media screen and (max-device-width: 47em) {

#thirteen {display:none;}
 
#nav li ul {
     margin-left:20px;}
}

/* ------- Wider than 480px, converts to horizontal top nav ------- */
@media screen and (min-width: 48em) {
	
  header {
    padding-bottom: 12em; }

  .logo {
    float: left;
    margin: 1.25em 0;
	width:220px;
	height:55px; }

  .btn-1 {
    display: none; }

  .btn-2 {
    display: none; }

  :checked ~ .wrapper .inner {
    margin-right: 0%;
    -webkit-transition: 0;
    -moz-transition: 0;
    -ms-transition: 0;
    -o-transition: 0;
    transition: 0; }
	

nav-1 {
  position: absolute;
  padding: 5em 0 0 0;
  background: #ccc;
  width: 100%;
  left: 0%;
  height: auto;
  border:0px;
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -ms-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s; }

nav-1,
  :checked ~ nav-1 {
    float: left;
    position: absolute;
	left:auto;
	right:auto;
	margin-top:80px;
    background: transparent;
    padding: 0;
    height: auto;
    width: 100%;
    -webkit-transition: 0;
    -moz-transition: 0;
    -ms-transition: 0;
    -o-transition: 0;
    transition: 0; 
}
	
nav-1 .close,
    :checked ~ nav-1 .close {
      display: none; 
}

nav-2,
  :checked ~ nav-2 {
      display: none; 
}
	  

#nav {
     font-family: arial, sans-serif;
	 background-color:#69C;
     position: relative;
     font-si e:14px;
     color:#999;
     margin: auto;
  	 border-top: 0px;}
 
#nav {
     list-style-type: none;
}

#nav a {
    border-bottom: 0px;
}
 
#nav li {
     float: left;
     position: relative;
}
 
#nav li a {
     text-align: center;
     border-right:1px solid #e9e9e9;
     padding:7px;
     display:block;
     text-decoration:none;
}
 
#nav li ul {
     display: none
}
 
#nav li:hover ul {
     display: block;
     position: absolute;
}
 
#nav li:hover ul li a {
     display:block;
     background:#69c;
     color:#ffffff;
     width: 110px;
     text-align: center;
     border-bottom: 1px solid #f2f2f2;
     border-right: none;
}
 
#nav li:hover ul li a:hover {
     background:#6dc7ec;
     color:#fff;
}
		
#nav #eleven a {display:none;}
#nav #twelve a {display:none;}
#nav #thirteen a {border-right:0px;}
#thirteen ul li a {margin-left:-40px;}

	
}