@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
  box-sizing: border-box;
}

body, ul, p {
  margin: 0;
}

/*Topmost strip Navigation*/
.top-nav{
  overflow: hidden;
  background-color: #4b4b4b;
}
.top-nav ul {
  list-style-type: none;
}

.top-nav li {
  float: left;
}

.left{
  float: left;
}

.right{
  float: right;
}

.top-nav li a{
  display: block;
  text-decoration: none;
  padding: 6px 16px 6px 16px;
  margin-right: 6px;
  background-color: #6b6b6b;
  color: #ffffff;
}

.top-nav li a:hover{
  background-color: #ffffff;
  color: #1b1b1b;
}

/*Top Main Navigation*/
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.top-main-nav{
  background-color: #f1eded;
  z-index: 100;
}
.top-main-nav ul {
  list-style-type: none;
  overflow: hidden;
  padding: 16px 2px 16px 2px;

}

.top-main-nav li {
  float: left;
  padding: 0px 6px 0px 6px;
}

.top-main-nav li a{
  display: block;
  text-decoration: none;
  padding: 6px 16px 6px 16px;
  color: #054e08;
  font-variant-caps: all-petite-caps;
  font-size: 20px;
}

.top-main-nav li a:hover{
  color: #ff0000;
}

/*Dashboard Navigation*/
.dashboard-nav{
  margin-top: 0px;
  padding-left: 6px;
  display: block;
  width: 160px;
  background-color: #f1eded;
}
.dashboard-nav ul {
  margin: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 8px 2px 8px 2px;
}

.dashboard-nav ul li{
  padding: 0px;
}

.dashboard-nav ul li:hover > ul{
  display: block;
}

.dashboard-nav ul li a{
  display: block;
  padding: 6px 0px;
  text-decoration: none;
  color: #054e08;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.dashboard-nav ul li a:hover{
  background-color: #6b6b6b;
  color: #f1eded;
}

.dashboard-nav li ul{
  position: absolute;
  margin-left: 150px;
  margin-top: -38px;
  width: 160px;
  display: none;
  background-color: #f1eded;
}

.dashboard-nav li ul li{
  font-family: 'Roboto', sans-serif;
}

/*Main Content*/
.main-content{
  width: 100%;
  clear: both;
  padding-top: 20px;
}

.container{
  padding: 0px;
}

.w2, .w3, .w5{
  float: left;
}

.w5{width: 20%;}
.w2{width: 60%;}
.w3{ width: 33.33%;}

.footer{
  padding: 12px;
  background-color: #f1eded;
  margin: auto;
}

a{
    text-decoration: none;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #ffffff;
    padding: 14px;
}

/* Style the topnav links */
.topnav a {
    float: right;
    display: block;
    color: #d43f3a;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.w1, .w2, .w3, .w4, w5{
    float: left;
    clear: both;
}

/* Create columns that floats next to each other */
.column10, 
.column20, 
.column33, 
.column35, 
.column30, 
.column40, 
.column50, 
.column60, 
.column65, 
.column70, 
.column80, 
.column90, 
.column100 {
    float: left;
    padding: 0px 8px 8px;
}
.column10 { width: 10%; }
.column20 { width: 20%; }
.column33 { width: 33.33%; }
.column35 { width: 35%; }
.column30 { width: 30%; }
.column40 { width: 40%; }
.column50 { width: 50%; }
.column60 { width: 60%; }
.column65 { width: 65%; }
.column70 { width: 70%; }
.column80 { width: 80%; }
.column90 { width: 90%; }
.column100 { width: 100%; }
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.paper{
    position: relative;
    border: 1px solid #1b1b1b;
}

.featured-paper{
  position: relative;
}

.featured-paper img{
    width: 100%;
}

.paper-label{
    position: absolute;
    left: 15px;
    bottom: 15px;
    background-color: #4b4b4b;
    color: #ffffff;
    margin: 2px;
    padding: 2px;
}

.paper-price{
    position: absolute;
    left: 15px;
    top: 15px;
    background-color: #4b4b4b;
    color: #ffffff;
    margin: 2px;
    padding: 2px;
}

.epaper-form input[type="tel"],
.epaper-form input[type="email"],
.epaper-form input[type="password"],
.epaper-form input[type="file"],
.epaper-form input[type="text"],
.epaper-form input[type="url"],
.epaper-form input[type="search"],
.epaper-form input[type="number"],
.epaper-form input[type="range"],
.epaper-form input[type="date"],
.epaper-form input[type="month"],
.epaper-form input[type="week"],
.epaper-form input[type="time"],
.epaper-form input[type="datetime"],
.epaper-form input[type="datetime-local"],
.epaper-form input[type="color"],
.epaper-form select,
.epaper-form textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: #4CAF50 solid thin;
    border-radius: 4px;
    transition: border-color 0.5s ease-out;
}

.epaper-form input[type=button], 
.epaper-form input[type=submit], 
.epaper-form input[type=reset]{
    background-color: #008000;
    color: #FFFFFF;
    padding: 10px;
    border: #4CAF50 solid thin;
    text-decoration: none;
    cursor: pointer;
}

.epaper-form input[type=button]:hover, 
.epaper-form input[type=submit]:hover, 
.epaper-form input[type=reset]:hover{
    color: #008000;
    background-color: #FFFFFF;
}


/*Form Critica */
button,
.epaper-form-critical input[type="tel"],
.epaper-form-critical input[type="email"],
.epaper-form-critical input[type="password"],
.epaper-form-critical input[type="file"],
.epaper-form-critical input[type="text"],
.epaper-form-critical input[type="url"],
.epaper-form-critical input[type="search"],
.epaper-form-critical input[type="number"],
.epaper-form-critical input[type="range"],
.epaper-form-critical input[type="date"],
.epaper-form-critical input[type="month"],
.epaper-form-critical input[type="week"],
.epaper-form-critical input[type="time"],
.epaper-form-critical input[type="datetime"],
.epaper-form-critical input[type="datetime-local"],
.epaper-form-critical input[type="color"],
.epaper-form-critical select,
.epaper-form-critical textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: #4CAF50 solid thin;
    border-radius: 4px;
    transition: border-color 0.5s ease-out;
}
.epaper-form-critical input,
.epaper-form-critical input[type=button], 
.epaper-form-critical input[type=submit], 
.epaper-form-critical input[type=reset]{
    background-color: #008000;
    color: #FFFFFF;
    padding: 10px;
    border: #4CAF50 solid thin;
    text-decoration: none;
    cursor: pointer;
}

.epaper-form-critical input:hover,
.epaper-form-critical input[type=button]:hover, 
.epaper-form-critical input[type=submit]:hover, 
.epaper-form-critical input[type=reset]:hover{
    color: #008000;
    background-color: #FFFFFF;
}


/* Add a green text color and a checkmark when the requirements are right */

.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -35px;
    content: "✔";
}

/* Add a red text color and an "x" icon when the requirements are wrong */

.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
}


.epaper-form-critical input:optional {
    border-color: gray;
}
.epaper-form-critical input:required:valid {
    border-color: green;
}
.epaper-form-critical input:invalid {
    border-color: red;
}
.epaper-form-critical input:required:focus:valid {
    background: url("../../images/svg/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
    background-size: 25px;
}
.epaper-form-critical input:focus:invalid {
    background: url("../../images/svg/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;
    background-size: 25px;
}

.form-action-description{
    width: 70%;
    margin: auto;
}

.obj-container{
    padding:  0px 20px;
}

.obj-float-right{
    float: right;
    text-align: right;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.footer-info{
  font-size: 12px;
  font-weight: bold;
}

.close{
  display: none;
}

  
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .w2, .w5, .w3,
    .column10, 
    .column20, 
    .column33, 
    .column35, 
    .column30, 
    .column40, 
    .column50, 
    .column60, 
    .column65, 
    .column70, 
    .column80, 
    .column90, 
    .column100{
        width: 100%;
    }

    .obj-float-left,
    .obj-float-right,
    .copyright{
        float: none;
        text-align: center;
    }

    .dashboard-nav,
    .Featured-link{
      display: none;
    }

    .close {
      display: block;
      color: #aaa;
      float: right;
      padding: 14px;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

}