STY - Flickr WideScreen (Viewer) - FFFLCKR v.2

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("fffflckr.com") {
/* ==== FLICKR (Viewer) -  FFFLCKR (fffflckr) v.2 (new2) - OBSOLETE - just for INFOS  ==== */


/*
*{
    box-sizing: border-box !important;
} */
div#photoHolder {
    display: block;
    margin: 35px auto 0!important;
}

.column a {
    color: #BB4933!important;
    text-decoration: none;
}

#menu {
  background: none repeat scroll 0 0 rgba(30, 30, 30, 0.9);
height: 30px !important;
  position: fixed;
  top: 0;
  width: 100%;
border-bottom: 1px solid red !important;
  z-index: 999;
}
#menu-buttons {
  cursor: pointer;
  height: 29px!important;
  position: absolute;
  right: 50px;
  top: 0;
}
#menu-buttons div {
    float: left;
    height: 29px !important;
    line-height: 29px !important;
    padding-top: 0px !important;
    text-align: center;
    text-transform: uppercase;
    width: 222px !important;
    background: none repeat scroll 0 0 rgba(4, 4, 4, 0.18);
transition: all ease 0.7s !important;
}
#menu-buttons div:hover {
    background: none repeat scroll 0 0 rgba(246, 199, 10, 1);
    color: black;
}
#logo {
    background-color: rgba(4, 4, 4, 0.18) !important;
background-size: 45% 100% !important;
background-position: center center !important;
height: 29px!important;
    left: 0;
    margin-left: 50px;
    position: absolute;
    top: 0;
    width: 200px;
}
#preloader {
/* position: absolute; */
/* display: block; */
width: 20px !important;
height: 20px !important;
/* margin-top: -20px !important; */
/* left: -6px; */
    top: 6px;
}
#preloader::before {
    position: absolute;
    display: block;
/* width: 20px !important; */
/* height: 20px !important; */
/* margin-top: -20px !important; */
/* left: -6px; */
/* top: -6px; */
    border-color: rgba(246, 199, 10, 0.8) transparent transparent;
    border-radius: 100%;
    border-style: solid;
    border-width: 6px;
    content: "";
}

.galcolumn {
    box-sizing: border-box;
    float: none !important;
    clear: none !important;
/* height: 170px !important; */
    width: 98% !important;
    margin-left: 20px !important;
/* margin-top: 5px !important; */
    padding: 0px !important;
    padding-left: 0;
/* outline: 1px solid green !important; */
}
.galcolumn:nth-last-child(2) .js-photo.photo {
outline: 1px solid red !important;
}
.photo {
/* box-sizing: border-box !important; */
    float: left !important;
    height: 1px !important;
    width: 197.5px!important;
    margin-bottom: 10px !important;
    padding: 10px 5px 90px 5px !important;
    vertical-align: middle !important;
    text-align: center;
    color: #f6c70a;
    background: #333;
    overflow: hidden;
    outline: 1px solid gray !important;
}
.photo img {
/* box-sizing: border-box !important; */
    position: relative !important;
    display: inline-block !important;
    float: none !important;
    clear: none !important;
    width: 100%;
    height: auto;
/* padding-bottom: 70px !important; */
    margin-left: auto;
    margin-right: auto;
/* transition: margin-top ease 0.3s !important; */
/* vertical-align: middle!important; */
}

.photo:hover img {
/* box-sizing: border-box !important; */
    position: relative !important;
    display: inline-block !important;
    float: none !important;
    clear: none !important;
    margin-top: -146% !important;
/* outline: 2px dotted yellow !important; */
}
/* ===================== */
.photo a {
    color: #f6c70a;
}

.photo a:hover {
    background: #f6c70a;
    color: white;
}
.photo .over-nav {
    position: relative !important;
    display: inline-block !important;
    width: 155px !important;
height: 100% !important;
    min-height: 0px !important;
    max-height: 0px !important;
padding: 0 !important;
    float: none !important;
    clear: both !important;
/* margin-top: 100%!important; */
    padding: 0 !important;
    margin-top: -22% !important;
    text-align: center;
    cursor: pointer;
    z-index: 2;
/* transition: margin-top ease 0.3s !important; */
  background: none repeat scroll 0 0 rgba(30, 30, 30, 0.9);
/* border: 1px solid gold !important; */
}
.photo:hover .over-nav {
    position: relative !important;
display: inline-block !important;
    width: 155px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    float: none !important;
    clear: both !important;
/* margin-top: 100%!important; */
    padding: 0 !important;
    margin-top: 135% !important;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    border: 1px solid gold !important;
}
.over-nav div .nav-content {
    position: absolute !important;
    width: 100% !important;
    height: 30px !important;
    top: 0;
    left: 0;
    font-size: 100% !important;
    text-align: center !important;
    padding-top: 1px !important;
/* outline: 1px solid tomato !important; */
}
.nav-bg:hover  ,
.nav-bg {
/* max-height: 20px !important; */
/* outline: 1px solid red !important; */
    display: none !important;
}

.js-load-more.load-more {
position: absolute !important;
display: inline-block !important;
    height: 20px !important;
top: 1px!important;
right: 1px !important;
/* outline: 4px dashed peru !important; */
}



/* .narrow {
    width: 40% !important;
    float: left;
} */
/* .narrow.second {
    margin-left: 0% !important;
    float: right !important;
} */


.narrow {
    position: absolute !important;
    display: inline-block !important;
    width: 20px !important;
    float: none !important;
    clear: right !important;
    left: 30%!important;
/* outline: 4px dotted peru !important; */
}

.narrow.second {
    position: absolute !important;
    display: inline-block !important;
    float: none !important;
    clear: right !important;
    width: 30px !important;
    top: 1px!important;
    left: 55%!important;
/* outline: 2px solid red !important; */
}

.over-nav div {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 20px !important;
    width: 30px !important;
    margin-bottom: 10px;
}
.over-nav div:hover {
    background: #f6c70a;
    color: white;
}

.over-nav div .nav-bg {
    top: 0;
left: 0;
/* right: 0!important; */
    width: 55% !important;
    background: white;
    opacity: 0.7;
    height: 20% !important;
}

.over-nav div.faved {
    background: #f6c70a;
    color: white;
    cursor: default;
}


/* ICONS */
.icon-resize-full-alt.nav-content ,
.icon-star.nav-content ,
.icon-popup.nav-content ,
.icon-down-big.nav-content {
/* padding-top: 8.5px; */
    font-size: 10px !important;
/* outline: 4px solid red !important; */
}

.icon-popup.nav-content{
/* border: 4px solid blue !important; */
    width: 20px !important;
    height: 10px !important;
    padding: 0 !important;
}

.icon-star.nav-content{
/* border: 4px solid blue !important; */
    width: 20px !important;
    height: 10px !important;
    padding: 0 !important;
}

.icon-down-big.nav-content{
/* border: 4px solid blue !important; */
    width: 20px !important;
    height: 10px !important;
    padding: 0 !important;
}

.icon-resize-full-alt.nav-content{
/* border: 4px solid blue !important; */
    width: 20px !important;
    height: 10px !important;
    padding: 0 !important;
}

/* ===================== */

#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft,
#cboxBottomLeft{
clear:left;
}
#cboxContent{
position:relative;
}
#cboxLoadedContent{
overflow:auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle{
margin:0;
}
#cboxLoadingOverlay,
#cboxLoadingGraphic{
position:absolute;
top:0; left:0;
width:100%;
height:100%;
}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow{
cursor:pointer
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
max-width:none;
-ms-interpolation-mode:bicubic;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#colorbox,
#cboxContent,
#cboxLoadedContent{
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
}

#cboxOverlay{
background:#000;
}
#colorbox{
outline:0;
}

#cboxContent{
margin-top:20px;
background:#000;
}
.cboxIframe{
background:#fff;
}

#cboxError{
padding:50px;
border:1px solid #ccc;
}

#cboxLoadedContent{
border:5px solid #000;
background:#fff;
}

#cboxTitle{
position:absolute;
top:-20px;
left:0;
color:#ccc;
}

#cboxCurrent{
position:absolute;
top:-20px;
right:0px;
color:#ccc;
}




/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
border:0;
padding:0;
margin:0;
overflow:visible;
width:auto;
background:none;
}


/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */


#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
outline:0;
}


#cboxSlideshow{
position:absolute;
top:-20px;
right:90px;
color:#fff;
}

#cboxPrevious{
position:absolute;
top:50%;
left:5px;
margin-top:-32px;
width:28px;
height:65px;
text-indent:-9999px;
}

#cboxPrevious:hover{
background-position:bottom left;
}

#cboxNext{
position:absolute;
top:50%;
right:5px;
margin-top:-32px;
width:28px;
height:65px;
text-indent:-9999px;
}

#cboxNext:hover{
background-position:bottom right;
}

#cboxClose{
position:absolute;
top:5px;
right:5px;
display:block;
width:38px;
height:19px;
text-indent:-9999px;
}

#cboxClose:hover{
background-position:bottom center;
}


/* ==== END === */
}