html {
}

body {
  font-family: Lato, helvetica, arial, sans-serif /* "Josefin Slab",georgia,times,serif */;
  font-weight:100;
  font-size:1.1em /* 1.23em */;
}

header, section, footer, aside, nav, main, article, figure {
    display: block;
}

/* skeleton */

div#container {
  max-width:1050px;
  margin:auto;
}

header {
  height:80px;
  text-align:center;
  border-bottom:1px solid #efefef;
  padding:20px 0px 20px 0px;
  margin:0px 0px 10px 0px;
}

logo {
  float:left;
  max-width:400px;
  text-align:left;
}

logo img {
  height:90px;
  width:auto;
}

nav {
  float:right;
  max-width:500px;
}

nav ul {
  float:right;
  list-style:none;
  margin:0px;
  padding:0px;
  display:block;
}

nav ul li {
  float:left;
  display:block;
}

nav ul li a {
  margin:0px 9px 0px 9px;
  display:block;
  line-height:34px;
  color:#000;
  text-decoration:none;
}

nav ul li a:hover {
  text-decoration:underline;
}

section#main {
  width:700px;
  float:left;
}

section#sidebar {
  width:300px;
  float:right;
}

section#sidebar div {
  margin-bottom:30px;
  border-bottom: 1px solid #efefef;
padding-bottom: 30px;
}

#sidebar span#peeve_button, span.link_button {
	display: inline-block;
background: #ff0000;/* #f5f5f5 */;
border-radius: 5px;
}

#sidebar span#peeve_button:hover, span.link_button:hover {
background: #444;
}

#sidebar span#peeve_button b, span.link_button b {
font-weight:normal;
display:inline-block;
margin-right:5px;
color:#FC0D1B;
}

#sidebar span#peeve_button:hover b, span.link_button:hover b {
color:#fff;
}

#sidebar span#peeve_button a, span.link_button a {
  text-decoration:none;
  color:#fff;
  padding: 0px 11px;
  display:inline-block;
  line-height: 32px;
font-weight: bold;
}

#sidebar span#peeve_button a:hover, span.link_button a:hover {
  text-decoration:none;
  color:#fff;
}

#sidebar span#peeve_button:hover a, span.link_button:hover a {
  color:#fff;
}

div.clear
{
clear:both;
}

blockquote {
  font-size:125%;
}

note {
  background:#FFFBE2;
  padding:5px 11px 5px 11px;
  display:inline-block;
  line-height:30px;
  border-radius:3px;
  border:1px solid #DDD8B1;
}

noteSML {
  background:#FFFBE2;
  padding:7px 11px 2px 11px;
  display:inline-block;
  border-radius:3px;
  border:1px solid #DDD8B1;
  font-size:85%;
}

footer {
  text-align:center;
  font-size:90%;
  color:#666;
  border-top:1px solid #efefef;
  margin:50px 0px 0px 0px;
  padding:20px 0px 10px 0px;
}

footer a {
  color:#666;
  margin-right:5px;
  margin-left:5px;
  text-decoration:none;
}

footer a:hover {
  text-decoration:underline;
}

/* text formatting */

h1,h2,h3,h4 {
  font-family:"Lato",
    verdana, tahoma, arial;
  font-weight:bold;
}

h1 {
  font-size:1.7em;
}

h2 {
  font-size:1.3em;
}

h3 {
  font-size:1.0em;
}

p {
  line-height:25px;
}

p a, li a {
  color:#000;
}

p a, note a, noteSML a {
font-weight:500;
}

note a, noteSML a {
  color:#000;
}

p b.bold {
  font-weight:500;
}

blockquote.large_bq {
  font-size:100%;
  font-style:italic;
}

p b {
 font-weight:500;
}

ul li {
    margin-bottom: 15px;
}

/* home page */

home_head h1 {
    margin-bottom: 0px;
}

home_head h2 {
    margin: 0px;
    border-top: 1px solid #efefef;
    font-size: 100%;
    display: inline-block;
    padding-top: 5px;
}

span#oscar {
  width:200px;
  float:right;
  margin:0px 0px 0px 10px;
}

span#oscar img {
  width:200px;
  height:auto;
  border-radius:5px;
}

span#oscar i {
  display:block;
  font-style:normal;
  font-size:0.9em;
  line-height:17px;
  padding:0px 5px 5px 5px;
  border-bottom:1px solid #efefef;
}

/* home > moher */

div#moher {
  display:block;
  margin:20px 0px 0px 0px;
  height:284px;
  background:url('../images/cliffs-of-moher.jpg') no-repeat;
  background-size:cover;
  border-radius:5px;
  position:relative;
}

div#moher div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#moher div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#moher div b {
  font-weight:100;
}

/* contact */

div.form {
}

div.form b {
  font-weight:100;
}

div.form input, textarea {
  display:block;
  border:1px solid #cfcfcf;
  border-radius:5px;
  margin-bottom:15px;
  padding:5px;
  font-family:"Lato",
    verdana, tahoma, arial;
  font-size:100%;
  font-weight:100;
}

input.button {
  margin-top:-25px;
  background:#333;
  border:0px !important;
  color:#fff;
  padding:3px 19px 3px 19px !important;
}

input.button:hover {
  background:#FC0D1B;
  cursor:pointer;
}

.missinginfo {
  color:#FC0D1B;
}

note#contact_note {
  margin: 0px 0px 30px 0px;
line-height: 100%;
padding: 15px;
font-size: 80%;
}

/* sarcastic quotes */

p#sq_intro {
  /* background:#FFFBE2;
  border:1px solid #DDD8B1; */
  margin-bottom:50px;
}

quote, quote_each {
  display:block;
  margin:0px 0px 0px 0px;
  border-top:1px solid #efefef;
  padding:20px 0px 20px 0px;
}

quote p, quote_each p {
  margin:0px;
}

section#main quote_each:first-of-type {
border-top:0px;
}

quote span {
  display:block;
  /* text-align:right; */
  margin-top:10px;
}

quote span b {
  font-weight:100;
  border-radius:3px;
  background:#f9f9f9;
  padding:5px 7px 5px 7px;
  display:inline-block;
  border:1px solid #efefef;
  font-size:80%;
}

quote span a {
  color:#000;
}

quote span a:hover {
  text-decoration:none;
}

/* sarcastic quotes > sq */

div#sq {
  display:block;
  margin:20px 0px 0px 0px;
  height:353px;
  background:url('../images/dolomites.jpg') no-repeat;
  background-size:contain;
  border-radius:5px;
  position:relative;
}

div#sq div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#sq div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#sq div b {
  font-weight:100;
}

/* sarcasm */

dictionary {
}

dictionary h3 {
  margin-bottom:10px;
  display:inline-block;
  font-size:120%;
}

dictionary i {
  display:inline-block;
  margin:0px 0px 0px 5px;
}

dictionary s_and_p {
  display:block;
}

dictionary syllable {
  background:#f5f5f5;
  border-radius:5px;
  padding:0px 11px 0px 11px;
}

dictionary pronunciation {
  background:#f5f5f5;
  border-radius:5px;
  padding:0px 11px 0px 11px;
  margin:0px 0px 0px 5px;
}

dictionary p {
  padding:0px 5px 0px 5px;
  font-size:105%;
}

dictionary span {
  background:#f5f5f5;
  display:block;
  padding:15px 20px 15px 20px;
  border-radius:5px;
  line-height: 145%;
}

p.footnote {
  font-size:90%;
  line-height:19px;
  font-style:italic;
}

/* sarcasm > tatev */

div#tatev {
  display:block;
  margin:20px 0px 0px 0px;
  height:359px;
  background:url('../images/tatev-cathedral-armenia.jpg') no-repeat;
  background-size:cover;
  border-radius:5px;
  position:relative;
}

div#tatev div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#tatev div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#tatev div b {
  font-weight:100;
}

/* satire > masculism */

div#masculism {
  display:block;
  margin:20px 0px 0px 0px;
  height:466px;
  background:url('../images/masculism.jpg') no-repeat;
  background-size:contain;
  border-radius:5px;
  position:relative;
}

div#masculism div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#masculism div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#masculism div b {
  font-weight:100;
}

/* irony > socrates */

div#socrates {
  display:block;
  margin:20px 0px 0px 0px;
  height:460px;
  background:url('../images/death-of-socrates.jpg') no-repeat;
  background-size:contain;
  border-radius:5px;
  position:relative;
}

div#socrates div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#socrates div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#socrates div b {
  font-weight:100;
}

/* parody > vegan */

div#vegan {
  display:block;
  margin:20px 0px 0px 0px;
  height:460px;
  background:url('../images/vegan-burger.jpg') no-repeat;
  background-size:contain;
  border-radius:5px;
  position:relative;
}

div#vegan div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#vegan div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#vegan div b {
  font-weight:100;
}

/* things that peeve my pet > puppy */

div#puppy {
  display:block;
  margin:20px 0px 0px 0px;
  height:460px;
  background:url('../images/puppy.jpg') no-repeat;
  background-size:contain;
  border-radius:5px;
  position:relative;
}

div#puppy div {
  position:absolute;
  bottom:27px;
  right:30px;
  text-align:left;
  color:#fff;
  background:rgba(0,0,0,0.4);
  padding:9px 17px 9px 17px;
  border-radius:5px;
  box-shadow:0px 0px 3px #000;
}

div#puppy div span {
  display:block;
  font-size:130%;
  font-weight:100;
}

div#puppy div b {
  font-weight:100;
}

/* responsive */

@media screen and (max-width: 600px) {

header nav, section#main, section#sidebar, etymology {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}

header {
border-bottom:0px;
}

logo {
width:100%;
display:block;
clear:both;
text-align:center;
}

logo img {
width:90%;
height:auto;
}

nav {
  display:block;
  float:left;
  clear:both;
  width:100%;
}

nav ul {
  list-style:none;
  padding:0px;
  margin:0px;
  float:left;
}

nav ul li {
  display:inline-block;
  float:left;
  text-align:center;
  background:#efefef;
  margin:3px 3px 0px 0px;
  border-radius:5px;

}

nav ul li a {
  display:inline-block;
  padding:0px 7px 0px 7px;
}

div#puppy, div#vegan, div#socrates, div#masculism, div#tatev, div#sq {
background-size:cover !important;
}

etymology img {
width:100%;
}

}