/* Theme Name: RP by FUFF */
/* HTML5 Reset Wordpress Theme :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://ericmeyer.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
Special thanks: The Wordpress theme owes its start to an empty theme authored 
by Chris Coyier & Jeff Starr: http://digwp.com
-------------------------------------------------------------------------------*/

/* 
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable, label, input[type=button], input[type=submit], button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button {width: auto; overflow: visible;}
.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
body {
font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  
}
body, select, input, textarea {color: #333;}
a {color: #000; text-decoration: none;}
a:hover {color: #000; text-decoration: none;}
::-moz-selection {background: #000; color: #fff; text-shadow: none;}
::selection {background: #000; color: #fff; text-shadow: none;}
a:link {-webkit-tap-highlight-color: #fff;}
ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
.mobile{
  display: none;
}

/* Navigation.
-------------------------------------------------------------------------------*/
#head-menu {/* float: left; */margin-top: 20px;}
header .drag img {display: none;}
.home header .drag img {position: absolute; right: 10px; top: 10px; cursor: default; opacity: 0.3; width: 12px; height: 12px; display: none;}
header .drag img:hover {opacity: 1;}
#head-menu li {display: block; padding-left: 6px}
#head-menu li a {/* padding: 0 6px; */color: #000;font-size: 16px;text-decoration: underline;line-height: 24px;font-weight: 700;}
#head-menu li a:hover {text-decoration: none;}
#head-menu .current-menu-item a, #head-menu .current-portfolio-parent a {color: #000; font-size: 28px; line-height: 34px; text-decoration: none;}
.menu-bottom-menu-container, #menu-bottom-menu, #menu-bottom-menu li, #menu-bottom-menu ul {display: inline!important;}
#menu-bottom-menu li a {border-left: 1px solid #333; padding-left: 6px; margin-left: 4px; font-size: 13px; text-decoration: underline; font-weight: bold;}
#menu-bottom-menu li.current-menu-item a {text-decoration: none;}
#menu-bottom-menu a {color: #000;}
.post-navigation {float: none; overflow: hidden; margin-bottom: 0}
.nav-previous{float: left;margin: 10px 0 10px}
.nav-next{float: right; margin: 10px 10px}
.post-navigation a {font-size: 22px; font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: #000; margin-left: 3px;}
.post-navigation a:hover {font-weight: normal; color: #666;}

/* And here begins the Wordpress fun.
-------------------------------------------------------------------------------*/
.decade-text {margin-bottom: 10px; margin-top: 3px;}
.decade-text p{line-height: 1.35em; padding-bottom: 1em}
.left-text {position: fixed; top: 400px; left: 55px;}
header {position: fixed; width: 230px; padding: 20px 30px 30px 20px; min-height: 300px; background: rgba(255,255,255,.9)!important; left: 20px; top: 20px; z-index: 10;}
header img{width: 250px}
#page-wrap {width: 960px; background: #000!important; margin: 20px auto; position: relative;}
footer {font-weight: normal;background-color: #fff;position: fixed;bottom: 30px;left: 20px;padding: 5px 10px;width: 260px;font-size: 11px;}
.copyright {display: inline;}
.entry {position: absolute; left: 320px; width: calc(100% - 320px); padding-bottom: 40px;}
.dec-desc {margin-top: 10px; font-size: 12px; line-height: 14px; margin-right: 20px;}
.works {width: 100%; padding-bottom: 0!important;}
.works .box {float: left;margin-right: 5px;margin-bottom: 0!important;width: 330px;}
.works .box img {margin-bottom: 2px!important;width: 330px;}
.work-title {font-size: 11px; display: none;}
.works .box:hover .work-title {font-size: 12px; font-weight: 500; display: block; position: absolute; bottom: 0; left: 0; border-top: 0 solid #fff; padding: 10px 10px 15px; width: 330px; background: rgba(255,255,255,.7);}
.works .box .work-title {color: #333!important;}
.notes-details {background-color: #000; padding: 10px!important; margin-top: -11px; margin-bottom: 6px;}
a .notes-details {color: #fff; text-decoration: none!important;}
.notes-details h2{font-size: 15px; text-align: left!important}
.notes-details p{font-size: 13px; text-align: left!important; margin-top: 5px}
.breadcrumbs {margin-top: 20px; margin-bottom: 10px;}
.breadcrumbs a {color: #000; font-weight: bold;}
.single-portfolio article, .single-notes article {position: absolute; left: 300px; padding-bottom: 40px;}
.single-notes article .entry-content {width: 620px;}
.single-notes article h2 {margin-top: 10px; font-size: 15px; margin-bottom: 5px;}
header .intro {padding-left: 6px; margin-top: 20px; font-size: 13px; line-height: 18px;}
#sgl-wk-details {position: fixed;cursor: pointer;top: 460px;left: 30px;padding: 15px;width: 200px;/* box-shadow: 1px 1px 3px #999; */background: rgba(255,255,255,.9);z-index: 11;}
#sgl-wk-details h2 {font-size: 13px; padding-bottom: 10px;}
#sgl-wk-details .dateetc {font-size: 12px; line-height: 15px; margin-bottom: 5px;}
#sgl-wk-details .sgl-desc {font-size: 12px; line-height: 14px; margin-bottom: 5px;  padding-bottom: 20px; text-align: left!important}
#sgl-wk-details .sgl-desc p{text-align: left!important; margin-bottom: 5px;}
#sgl-wk-details .drag img {position: absolute; right: 10px; top: 10px; cursor: default; opacity: 0.3; width: 12px; height: 12px; display: block;}
#sgl-wk-details .drag img:hover {opacity: 1;}

/* Print styles
-------------------------------------------------------------------------------*/
@media print {}

/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-device-width: 480px) {}
@media all and (orientation: portrait) {}
@media all and (orientation: landscape) {}
@media screen and (min-width: 1230px) {
  .works {position: absolute;/* width: 1100px; */}
  .entry {/* width: 1000px; *//* max-width: calc(100% - 140px); */}
  #post-2 .entry {width: 750px;}
  #sgl-wk-details {position: fixed;cursor: pointer;top: 45px;left: 950px;padding: 15px;width: 200px;/* box-shadow: 1px 1px 3px #999; */background: rgba(255,255,255,.9);}
.post-navigation {width: 60px;}

}
@media screen and (max-height: 520px) {
  header {position: absolute;}
  #sgl-wk-details {position: absolute;}
}
@media screen and (max-width: 740px) {
.desktop{
  display: none;
}
.mobile{
  display: block;
}
  
  #head-menu li a {
    /* padding: 0 6px; */
    color: #000;
    font-size: 18px;
    text-decoration: underline;
    line-height: 28px;
    font-weight: 700;
}
    .works{margin-bottom: 100px;}
  .entry {width: 100%; max-width: calc(100% - 90px);left: 0;right: 0;margin-left: 45px;margin-top: 70px;position: relative}
.works .box{top: auto!important;width: 100%!important; height: auto!important; position: relative!important; float: none!important; margin-bottom: 1em!important}
  .works .box img{width: 100%!important;}

footer {position: relative;margin-left: 35px;padding: 10px 10px 15px; width: 100%; width: calc(100% - 90px); font-size: 11px; border-top: 1px solid;}
.home footer{border-top: 0; margin-left: 0; width: calc(100% - 60px)}
.single-portfolio footer, .single-notes footer, .post-type-archive footer, .tax-decade footer {position: relative;bottom: 0px;left: 0px; text-align: left;}
  
.home footer {position: fixed;}

header {
    position: relative;
    width: calc(100% - 90px);
    padding: 20px 30px 30px 20px;
    min-height: 300px;
    height: auto;
    margin-bottom: 3em;
    background: rgba(255, 255, 255, .9) !important;
    left: 20px;
    top: 20px;
    z-index: 10;
}
.home header{
  position: fixed;
}

 .single-portfolio article, .single-notes article {
    position: relative;
    left: 45px;
    padding-bottom: 40px;
   max-width: 100%;
   max-width: calc(100% - 45px)
}
.single-portfolio .entry-content, .single-notes .entry-content{
    max-width: calc(100% - 45px)!important;
}
.single-portfolio .entry-content img, .single-notes .entry-content img{
  max-width: 100%;
  margin-top: 60px;
} 

#sgl-wk-details {
    position: relative;
    top: 0px;
    padding: 0 15px;
    width: calc(100% - 90px);
  height: auto;
    box-shadow: none;
    overflow: visible;
  margin-bottom: 50px;
}  
#sgl-wk-details h2{
    margin-bottom: 0
}    

.ui-tooltip {
  padding: 2px 4px!important;
  color: white;
  position: absolute;
  top: 0;
  left: 100px;
  border-radius: 0;
  font: 11px "Helvetica Neue", Sans-Serif!important;
  box-shadow: 0 0 0 #ccc;
}
.page-id-308, .page-id-2 {background-color: #fff;}
h2 {font-size: 25px; margin-bottom: 20px;}
.page-id-308 h2, .page-id-2 h2, .page-id-27 h2 {font-size: 25px; margin-bottom: 15px; margin-top: 22px;}
.page-id-308 h3, .page-id-2 h3, .page-id-27 h3 {font-size: 16px; margin-bottom: 3px;}
.page-id-308 .entry .decade-text p, .page-id-2 .entry .decade-text p, .page-id-27 .entry .decade-text p {margin-bottom: 10px; line-height: 22px;}
#post-308 .entry {padding-bottom: 200px!important;}
#post-308 .entry a {text-decoration: underline;}
.notes-details h2 {font-size: 15px; margin-top: 5px; margin-bottom: 10px;}
}