/*

CSS for Good Tidings: The 2019 Holiday Layout Marathon
Hand-coded by Ainna (https://northstar.nu) (c) 2019
Featuring photography by Jill Wellington (http://pixabay.com/users/JillWellington), used under the Pixabay Free License

*/



































































































































































































/*

                         -------------------------------
                         |          L E A R N          |         
                         |                             |
                         |           F R O M           |
                         |                             |
                         |           Y O U R           |
                         |                             |
                         |            O W N            |        
                         |                             |
                         |       S O U R C E S !       |    
                         -------------------------------

I put together a LOT of tutorials in the web to come up with this final design.
Copying+pasting my CSS is absolutely NOT okay. 

*/













































































































































































































































/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #e5e3e2; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b8c5c9; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a4b6c1; 
}

html, body {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

body {
    margin: 0px;
    padding: 0px;
    font: 1.5em/150% 'Raleway', Verdana, Arial, Sans-Serif;
    background: #e5e3e2 url(wood.jpg) repeat;
    background-position: fixed;
    color:#bbb;
    height: 100%;
    text-align: justify;
}

a, a:visited, a:active  {
    color:#41877c;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    cursor: pointer;
}

a:hover {
    color:#416087;
    text-decoration: none;
}

b, strong {
    color: #227ea8;
}


del, strike {
    color:rgba(65, 106, 135, 0.4);
}

hr {
width: 85%;
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #85b3c9, rgba(0, 0, 0, 0));
}

fieldset {
    border:0px;
    margin:0 auto;
}

input, textarea, select, input[type=submit], input[type=reset] {
    border:1px solid #89957a;
	font: 14px/100% 'Coda', Verdana, Tahoma, sans-serif;
	/*text-transform: uppercase;*/
	background: inherit;
	padding: 10px;
}

input[type=submit], input[type=reset] {
    width: 150px;
    text-transform: uppercase;
}

input[type=text], textarea, select {
    width: 68%;
}

textarea {
overflow-x: hidden;
overflow-y: hidden;
width: 400px;
height: 200px;
}

.corners, input, textarea, select, button, .bq, .nb, .clique {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; 
    -khtml-border-radius: 20px; 
}

.opacity, input, textarea, select, button, #footer, h1, .tablinks, .div, .quote {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    opacity: 0.65;
}

.shadow{
    -moz-box-shadow: 10px 8px #dcd9c8;
    -webkit-box-shadow: 10px 8px #dcd9c8;
    box-shadow: 10px 8px #dcd9c8;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}



.cat, .credit, .edit {
color: #DB8183;
text-transform: uppercase;
}

.cat, .edit {
font: 10px/100% 'Coda', Verdana, Serif;
text-align: center;
position: relative;
top: -15px;
z-index: 200;
}

.edit {
  position: relative;
  top: -2px;
  left: 5px;
  letter-spacing: 1px;
}

.border {
    width: 150px;
    height: 150px;
    margin: 10px;
    background-color: #d7b5c5;
	outline: 16px double white;
	outline-offset: -10px;
	padding: 5px;
	margin: 8px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85);
    opacity: 0.85;
}

.bq, blockquote, .nb, .clique {
    width: 60%;
    background: rgba(232, 217, 219, 0.3);
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    font: italic 0.8em/100% 'IM Fell Great Primer';
    letter-spacing: 1px;
}

.nb {
    padding: 10px;
    width: 90%;
    font: 0.7em/120% 'Raleway';
    text-align: justify;
    letter-spacing:0;
}

.clique {
    width: 75%;
    font: 0.6em/120% Verdana;
    letter-spacing: 1px;
}


ol {
    list-style-type: lower-roman;
    color: #555;
    width: 80%;
    margin: 0 auto;
}

ol li {
    padding-left: 5px;
    margin-bottom: 15px;
}

ul li::before {
  color: #c7adb6;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.text {
    width: 90%;
    margin: 0 auto;
}

.textleft {
    width: 25%;
    float: left;
}

.textright {
    width: 65%;
    float: right;
    padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}


img.trans, .trans img {
    filter:Alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;
    border:none;
}

img.trans:hover, .trans img:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    transition: .5s ease;
}

.nbsp {
    margin-right: 5px;
}


.clearfix {
	clear: both;
}


#gray {
    margin: 0 auto;
    height: 100%;
    width: 1134px;
    padding: 50px 0;
    background: rgba(240, 240, 241, 0.7);
}

#vers {
    margin: 0 auto;
    background: url('gift-JillW.jpg') no-repeat;
    width: 1034px;
    height: 463px;
    border-radius: 15px 50px;
}


#nsnu {
  margin: 0 auto;
  width: 90%;
  height: 100%;
}

.entry, .todo {
    background: rgba(255, 255, 255, 0.2);
    padding: 30px;
    margin: 0 auto;
    z-index: 5;
    border-radius: 15px 40px;
    font-size: 0.9em;
    line-height:140%;
    transition:0.3s;
}

.entry {
    width: 90%;
}

.todo {
    width: 90%;
    padding: 10px;
}

#menu {
  width: 110%;
  height: 70px;
  text-align: center;
  margin: 0 0 60px -60px;
}


/* Style the tab */
.tab {
  overflow: hidden;
  margin: 0 auto;
  z-index: 10;
}

/* Style the buttons inside the tab */
.tab button, .tablinks, .tablinks a, .tablinks a:active, .tablinks a:visited {
  font: italic 1.3em/120% 'IM Fell Great Primer', 'Alegreya';
  color: #89957a;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 3px;
  margin: 5px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover, .tablinks a:hover {
  color: #416087;
}


/* Style the tab content */
.tabcontent {
  height: 100%;
  display: none;
  padding: 6px 12px;
  border-top: none;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  /*margin-bottom: 40px;*/
  color: #888;
  margin: 0 auto;
  width: 90%;
}


.splash {
    margin-left: 0 auto;
    text-align: right;
}

.center {
    text-align:center;
}

.div {
    background: url('floral.png');
    /*background-color: #e5d6dc;
    background-blend-mode: color;*/
    width:640px;
    height:320px;
}


.accent {
    color: #c07e8f;
}
.archive ul, .archive ol, .entry ul {
   columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

h1, h2, h3 {
    font: 3em/100% 'Allura';
    color: #d18a9e;
    text-align: center;
    margin-bottom:-5px;
    font-size:40px;
}

h3 {
  margin-bottom: 20px;  
}

.quote {
    font: italic 2em/50% 'IM Fell Great Primer';
}

.post ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    position: relative;
    left: 20px;
}

.post ul li {
    padding: 5px 0px 2px 25px;
    background: url(check.gif) no-repeat 0 10px;
    text-align: left;
}

#footer {
    margin: 0 auto;
    width: 90%;
    text-align:center;
    font: 0.7em/100% 'Raleway', Verdana, Sans-Serif;
    color: #627f7b;
    z-index:3;
    padding-bottom: 20px;
    margin-top: 50px;
}