source: extensions/Versa/theme.css @ 31844

* {
        border: 0px none;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        font-size: inherit;
        margin: 0px;
        outline: 0px none;
        padding: 0px;
        vertical-align: baseline;
        
        text-size-adjust: none;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
}

HTML { 
        font-family: 'Noto Sans',sans-serif;
        font-weight: normal;
        font-size: 16px;
}

@media (min-resolution: 150dpi) and (orientation: landscape) {  html { font-size: 16px; } }
@media (min-resolution: 150dpi) and (orientation: portrait) {   html { font-size: 20px; } }
@media (min-resolution: 250dpi) and (orientation: landscape) {  html { font-size: 22px; } }
@media (min-resolution: 250dpi) and (orientation: portrait) {   html { font-size: 32px; } }

H1, H2, H3, H4, H5, H6 {
        font-family: 'Raleway',sans-serif;
        font-weight: 300;
}

UL { list-style: none outside none; }

INPUT, TEXTAREA, SELECT {
        padding: 0.5ex 0.5em;
        border: 0px none;
        border-radius: 2px;
        line-height: 1.5;
        color: #999999;
        background-color: #161616;
        box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
}

INPUT[type=submit] { font-weight: bold; } 
INPUT[type=submit], input[type=reset], input[type=button] { cursor: pointer; box-shadow: none; } 
INPUT[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover { color: #66AADD; } 

FIELDSET { 
        margin-bottom: 3ex;
        line-height: 2.0; 
}

FIELDSET > LEGEND {
        margin-bottom: 0.5ex; 
        text-transform: uppercase;
}

FIELDSET > UL { 
        padding: 0.5ex 1em;
        font-size: 0.9rem; 
}

FIELDSET INPUT[type=radio], INPUT[type=checkbox]  { display: none; }

BODY { 
        color: #777777;
        background-color: #212121;
}

A { 
        color: #AAAAAA;
        text-decoration: none; 
}
A:hover {
        color: #66AADD; 
        text-decoration: none;
        border: none; 
}

/****************************************************************/
/*      THE HEADER                                              */      
/****************************************************************/

HEADER { display: block; }

#theHeader {
        width : 100%;
        overflow: auto;
        background-color: #2B2B2B;
        border-bottom: 1px dashed #4D4D4D;
        z-index: 4;
}

#theHeader H1 {
        display: inline-block;
        margin: 0ex 1em;
        padding: 1ex 1em;
        font-size: 1.4rem;
}

#theHeader .searchbar, #theHeader .navbar {
        display: inline-block;
        margin: 0ex 1em;
        padding: 0.5ex 1em;
        font-size: 1.0rem;
        text-align: center;
        text-transform: uppercase;
}

#theHeader .searchbar A { display: inline-block; }

#theHeader .searchbox {
        display: inline-block;
        visibility: hidden;
        margin: 0ex 0.5em;
        z-index: 2;
}
#theHeader .searchbox INPUT { 
        font-size: 0.8rem; 
        border: solid 1px #66AADD; 
}
#theHeader .searchbar:hover > .searchbox { visibility: visible; }

#theHeader .navbar { float: right; }

/****************************************************************/
/*      THE LEFT MENU                                           */      
/****************************************************************/

#menuSwitcher {
        position: absolute;
        padding: 0.5ex;
        color: #AAAAAA;
        cursor: pointer;
}
#menuSwitcher I { font-size: 1.4rem; }
#menuSwitcher:hover { color: #66AADD; }

#menubar {
        display: none;
        flex: 0 1 20%;
        width: 20%;
        min-width: 8em;
        max-width: 16em;
        margin: 0em;
        padding: 4ex 2em;
        background-color: #212121;
        font-size: 1.0rem;
}

/*** Menu CSS driven opening/closing ***/
@media (min-width: 480px) and (orientation: landscape) {
        #menuSwitcher { color: #555555; }
        #menubar { display: block; }
}
/*** Menu JS driven opening/closing ***/
#menuSwitcher.close { color: #AAAAAA; }
#menubar.close { display: none; }
#menuSwitcher.open { color: #555555; }
#menubar.open { display: block; }

#menubar DL {
        margin-bottom: 4ex;
        padding: 0em;
}

#menubar DT {
        margin-bottom: 2ex;
        overflow: hidden;
        font-size: 1.1rem;
        font-weight: bold;
        text-overflow: ellipsis;
        text-align: left;
        text-transform: uppercase;
}

#menubar UL {
        margin: 0ex;
        padding: 0ex;
        list-style: none outside none;
}

#menubar LI {
        margin: 0.8ex 0em;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: nowrap;
        white-space: nowrap;
}

.totalImages { font-size: 0.9rem; }

#quickconnect DIV { 
        width: 100%;
        margin: 0.5ex 0em; 
}
#quickconnect #username, #quickconnect #password {
        width: 100%; 
        box-sizing: border-box;
}
#quickconnect > FIELDSET > LEGEND {
        margin: 0ex; 
        /*font-size: 0.8rem;*/
        text-transform: uppercase;
}

/****************************************************************/
/*      CONTENTS OF INDEX PAGE                                  */      
/****************************************************************/

#mainBox { 
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        background-color: #1A1A1A; 
}

#contentBox { flex: 1 1 auto; padding-bottom: 2ex; }
#content, .content { width: 100%; }

#the_page .stuffs { margin: 0ex !important; padding: 0ex 0em 2ex 0em !important; }
#the_page .left_block { margin: 0ex !important; }

.titrePage {
        margin: 3ex 2em;
        text-transform: uppercase;
}
.titrePage H2 { 
        font-size: 1.5rem;
        border-bottom: solid 1px #212121; 
}

.categoryActions {
        font-size: 0.9rem;
        font-weight: normal;
        text-transform: uppercase;
}

.categoryActions LI {
        display: inline-block;
        padding-right: 1.0em;
        vertical-align: text-bottom;
}

.switchBox {
        display: none;
        position: absolute;
        padding: 1ex 2em 3ex 1em;
        font-size: 0.8rem;
        text-align: left;
        line-height: 1.5;
        background-color: #333333;
        z-index: 100;
}
.switchOpen { background-color: #333333; }

.calendarViews {
        float: right;
        margin: 0ex 2em;
        padding-right: 0.5em;
        font-size: 0.8rem;
}

.calendarTitle, .calendarBar { 
        margin: 1ex 2em;
        font-size: 1.0rem; 
}

.calendarBar { 
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
}
.prevCal, .nextCal { flex: 1 0 auto; }
.navbarItems {
        flex: 1 1 auto;
        width: 100%;
        padding: 0ex 1em;
}

.calendarCalBar { 
        display: flex;
        padding: 3ex 2em;
        border-style: solid none;
        border-width: 2px;
        border-color: #212121; 
}
.calCalHead {
        flex: 0 0 auto;
        width: 9em;
        font-weight: 900;
}
.calCalItems { flex: 1 1 auto; }

.calItem, .calCal { 
        padding-right: 1em; 
        white-space: nowrap; 
}

.calMonth { 
        margin: 2ex auto; 
        border-collapse: collapse;
}
.calMonth TH {
        padding: 1ex 1em;
        background-color: #2b2b2b;
}

.calDayCellFull, .calDayCellEmpty { 
        font-size: 1.4rem; 
        font-weight: 400;
        vertical-align: top; 
        border: solid 1px #212121;
}
.calBackDate {
        position: absolute;
        padding: 0.6ex 0.6em;
        z-index: 2;
        font-weight: 900;
        vertical-align: top;
        color: #222222;
}
.calForeDate {
        position: absolute;
        padding: 0.5ex 0.5em;
        z-index: 3;
        font-weight: 900;
        vertical-align: top;
        color: #999999;
}

.thumbnails, .thumbnailsCategories {
        display: flex;
        flex-flow: row wrap;
        justify-content: left;
        list-style: none;
}
.thumbnails LI {
        position: relative;
        flex-grow: 1;
        height: auto; 
}

.thumbPhoto {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
}

.thumbLegend {
        position: absolute;
        bottom: 0%;
        width: 100%;
        padding: 1ex 0em;
        font-size: 0.7rem;
        line-height: 1.2; 
}
.thumbLegend P { margin: 0.8ex 0em; }
.thumbLegend SPAN { 
        padding: 0ex 1em;
        box-decoration-break: clone;
        color: #AAAAAA;
        background-color: rgba(17, 17, 17, 0.5);
        line-height: 1.4;
}
.thumbnails LI:hover .thumbLegend SPAN { color: #EEEEEE }
.thumbName { text-transform: uppercase; }


.thumbnailsCategories LI { 
        position: relative;
        flex: 0 1 auto; 
}
.thumbnailsCategories DIV {
        position: absolute;
        top: 20%;
        width: 100%;
        padding: 2ex 1em;
        box-sizing: border-box;
        color: #CCCCCC;
        background-color: rgba(17, 17, 17, 0.5);
}
.thumbnailsCategories H3 { font-size: 1.2rem; margin-bottom: 0.5ex; } 
.thumbnailsCategories P { font-size: 0.9rem; } 
.thumbnailsCategories .Nb_images { font-size: 0.8rem; } 
.thumbnailsCategories A { color: #EEEEEE } 
.thumbnailsCategories A:hover { color: #66aadd } 
.thumbnailsCategories LI:hover P { color: #EEEEEE }

.coverCategory { 
        display: block; 
        width: 100%;
}       

.errors {
        padding: 2ex 2em;
        color: #EEEEEE;
        background-color: #C84B4B;
        font-size: 1.2rem;
}

.infos {
        padding: 2ex 2em;
        color: #DDDDDD;
        background-color: #328F41;
        font-size: 1.2rem;
        font-weight: bold;
}

#copyright { padding: 1ex 1em; font-size: 0.8rem; }

/***** Plugins **************************************************/

#content > FIELDSET { margin: 2ex 2em; }

.download-links { margin-bottom: 2ex; }
.download-links a img { display: none; }
.download-links a:before { content:"\f019"; font-family:FontAwesome; }
.download-links li.warning { color:#999999; font-weight: normal; font-size: 1.0rem }

a.cancel-down { 
        padding: 1ex 1em;
        color: #CCCCCC; 
        background-color: #C84B4B; 
        font-weight: normal; 
        border: none; 
}
a.cancel-down:hover { color: #FFFFFF; }

#uploadProgress, 
#photosAddContent > FIELDSET { width: auto !important; margin: 2ex 2em !important; }
#photosAddContent p.showFieldset { width: auto !important;  margin: 2ex 0em !important; }

#uploadForm { font-size: 0.9rem; }
#uploadForm LEGEND { font-size: 1.0rem; }
#uploadForm > FIELDSET { width: auto !important; margin: 2ex 0em !important; }
#uploadForm > FIELDSET INPUT, 
#uploadForm > FIELDSET SELECT { float: none; }

#uploadWarningsSummary, #uploadModeInfos { margin: 0.5ex 1em !important; font-size: 0.8rem !important; }
#addUploadBox > A:before { content:"\f067\ "; font-family:FontAwesome; }

#simplecr IMG { display: none; }

/****************************************************************/
/*      IMAGE PAGE                                              */      
/****************************************************************/

#theImage {
        position: relative;
        overflow: hidden; 
        text-align: center; 
        background-color: #1A1A1A;
}

#theBackImage {
        z-index: 3;
        position: relative;
        width: 100%;
        max-height: 100vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: grab;
}

#theMainImage { 
        display: block; 
        width: 100%; 
        height: auto;
        visibility: hidden;
}

.navBackThumb {
        z-index: 0;
        display: flex;
        align-items: center;
        color: #333333;
}

.navThumb { z-index: 6; }
.navThumb, .navBackThumb {
        position: absolute;
        top: 0%;
        width: 5%;
        height: 100%;
        font-size: 2.0rem;
}
#prevThumb, #prevBackThumb { left: 0%; }
#nextThumb, #nextBackThumb { right: 0%; }

.linkThumb {
        display: flex;
        visibility: hidden;
        width: 100%;
        height: 100%;
        align-items: center;
        color: #CCCCCC;
        text-shadow: 0.2ex 0.2em #1A1A1A;
}
#linkPrev, #prevBackThumb { justify-content: flex-start; }
#linkNext, #nextBackThumb { justify-content: flex-end; }

.linkThumb > *, .navBackThumb > * { margin: 0.5em; }

.navThumb:hover .linkThumb { visibility: visible; }

/***** Image Info **************************************************/

#imageCard { 
        padding: 0ex 2em;
        background-color: #212121; 
        border: solid 1px transparent;
}

#slideshow { position: relative; }

#imageHeaderBar {
        margin: 3ex auto;
        font-weight: 400;
        text-transform: uppercase;
}
#slideshow > #imageHeaderBar { 
        position: absolute; 
        bottom: 0%; left: 0%;
        padding: 0ex 2em; 
        z-index: 12; 
        color: #DDDDDD;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.5); 
}

#imageToolBar { font-size: 0.9rem; }
#imageToolBar > LI, #imageToolBar > DIV {
        display: inline-block;
        vertical-align: text-bottom;
        padding-right: 1em;
}
#slideshow > #imageToolBar { 
        position: absolute; 
        bottom: 0%; right: 0%; 
        padding: 2ex 2em; 
        z-index: 15; 
        text-shadow: 1px 1px rgba(0, 0, 0, 0.5); 
}

#slideshow .imageNumber { color: #AAAAAA; }

.browsePath { 
        font-family: 'Raleway',sans-serif; 
        font-weight: 300; 
        font-size: 1.5rem;
}
.browsePath > H2 { display: inline-block; }
.browsePath .fa-stop-circle { margin-left: 1em; margin-right: 0.5em; }

.additional_info { margin: 1ex 2em; font-size: 1.0rem; }

#InfosAndComments { margin: 2ex auto; }
#InfosAndComments > * { vertical-align: top; }

.imageComment { margin-bottom: 2ex; }

#imageInfos, #MetadataBox { 
        display: inline-block;
        max-width: 16em;
        margin-right: 2em;
        margin-bottom: 2ex;
        text-align: left;
}

.imageInfoTable { font-size: 1.0rem; }
.imageInfoTable > DIV { margin-bottom: 1ex; }
.imageInfoTable DT { font-weight: 900; text-transform: uppercase; }

.licIcons { font-size: 1.0rem; }
.licIcons IMG { vertical-align: text-bottom; }

.navigationBar { margin: 1ex 1em; font-size: 1.0rem; }
.navigationBar > .pageNumberSelected { padding: 0ex 0.5em; font-weight: bold; }
.navigationBar > A { padding: 0ex 0.5em; }

.rateButton, .rateButtonStarFull, .rateButtonStarEmpty { cursor: pointer; }
.rateButtonSelected { font-weight: bold; }
.rateButtonStarFull {
        color: red;
        background-color: blue; 
        background: url(icon/star_font_awesome.svg) no-repeat center left;
        background-size: contain;
}
.rateButtonStarEmpty { 
        color: red;
        background-color: blue; 
        background: url(icon/star_empty_font_awesome.svg) no-repeat center left;
        background-size: contain;
}

/****************************************************************/
/*      TAGS PAGE                                               */      
/****************************************************************/

.tagLevel1 { font-weight:200; font-size: 0.9rem; white-space: nowrap; }
.tagLevel2 { font-weight:300; font-size: 1.0rem; white-space: nowrap; }
.tagLevel3 { font-weight:400; font-size: 1.1rem; white-space: nowrap; }
.tagLevel4 { font-weight:700; font-size: 1.3rem; white-space: nowrap; }
.tagLevel5 { font-weight:900; font-size: 1.5rem; white-space: nowrap; }

#fullTagCloud, #menuTagCloud {
        font-family: 'Raleway',sans-serif;
        text-align: left; 
}
#fullTagCloud { margin: 0ex 2em; }
#menuTagCloud { margin: 0ex 0em; }
#fullTagCloud > SPAN, #menuTagCloud > SPAN { margin-right: 0.5em; }

#tagLetterList { 
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: flex-start;
        margin: 2ex 2em;
}
.tagLetter { 
        flex: 0 0 auto;
        width: 10em; 
        padding: 1ex 1em;
}
.tagLetterLegend {
        margin: 1ex 1em;
        font-weight: bold;
        font-size: 1.2rem;
        border-bottom: solid 1px #333333;
 }
.tagLetterContent { width: 100%; font-size: 0.9rem; }
.nbEntries { float: right; padding: 0ex 0.5em; }

/****************************************************************/
/*      SEARCH PAGE                                             */      
/****************************************************************/

.filter { margin: 0ex 2em; }
.filter > FIELDSET { display: inline-block; margin-right: 2em; }
.filter > * { vertical-align: top }

.radioLab, .checkLab { cursor: pointer; }
.radioLab:before { padding-right: 0.5em; font-family:FontAwesome; content:"\f10c"; }
.checkLab:before { padding-right: 0.5em; font-family:FontAwesome; content:"\f096"; }
INPUT[type=radio]:checked + LABEL.radioLab:before { content:"\f111"; }
INPUT[type=checkbox]:checked + LABEL.checkLab:before { content:"\f0c8"; }

.selectize-input, .selectize-input > INPUT {
        padding: 0.5ex 0.5em;
        border: 0px none;
        border-radius: 2px;
        font-size: 1.0rem;
        line-height: 1.5;
        color: #999999;
        background-color: #161616;
        box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
}
.selectize-dropdown {
        padding: 0.5ex 0.5em;
        border: 0px none;
        border-radius: 0px;
        font-size: 0.9rem;
}

.date_today { font-size: 0.8rem; }
.date_arrow { font-size: 1.5rem; text-align: center; }

#srchRulesInfo, .search_results { margin: 2ex 2em; }
#srchRulesInfo > UL { 
        padding: 1ex 1em;
        font-size: 0.9rem; 
        line-height: 1.5; 
        list-style-type: circle; 
}

/****************************************************************/
/*      COMMENTS                                                */      
/****************************************************************/

#commentsBox { margin: 3ex 0em; }

.commentsList { 
        display: flex;
        flex-flow: row wrap;
}
#pictureCommentList > .commentsList { flex-flow: column nowrap; }

.commentElement {
        flex-grow: 1;
        flex-shrink: 0;
        margin-bottom: 2ex;
}
.commentElement IMG { width: 100%; height: auto; }

.description { 
        margin: 0ex 1em;
        padding: 0.5ex 0.5em;
        border-radius: 2px;
        background-color: #161616;
        font-size: 0.8rem;
}
#pictureCommentList .description { background-color: #1A1A1A; }
 
.actions {
        float: right;
        margin: 0ex;
        text-transform: uppercase; 
}
.actions > A { 
        padding-left: 0.5em; 
        white-space: nowrap; 
}
.cmtAction > SPAN { display: none; }
.cmtAction:hover > SPAN { display: inline; }

.commentDate { margin: 0.5ex 0em; }
.commentAuthor {
        margin-right: 0.5em;
        font-size: 0.9rem; 
        font-weight: bold; 
        text-transform: uppercase; 
}
.commentText { font-size: 0.9rem; color: #AAAAAA; }

#editComment TEXTAREA, #editComment INPUT[type=text] { width: 90% }

#comments { 
        display: inline-block; 
        max-width: 24em;
}
#comments H3 {
        font-size: 1.2rem;
        font-weight: 400;
}

#pictureComments { margin: 2ex 0em; }
#pictureCommentNavBar {
        margin: 1ex 1em;
        font-size: 0.8rem; 
        text-transform: uppercase;
} 

#commentAdd { margin: 2ex 0em; }
#commentAdd > H4 { 
        font-size: 1.1rem;
        font-weight: 400;
}

#addComment { margin: 1ex 1em; font-size: 0.9rem; }
#addComment > P, #editComment > P { margin-bottom: 0.5em; }
#addComment TEXTAREA, #addComment INPUT[type=text] { width: 100% }

.cmtFilter { margin: 1ex 0em; font-size: 0.9rem; }
.cmtFilter LABEL { margin-right: 1em; }
.cmtFilter INPUT, .cmtFilter SELECT { float: right; }

/****************************************************************/
/*      MISC PAGES                                              */      
/****************************************************************/

.loader {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
}

#helpBox { padding: 2ex 2em; }
#helpBox H2, #helpBox DL, #helpBox P { margin: 2ex 0em; }
#helpBox DT { margin-top: 1ex; }
#helpBox DD { padding-left: 0.5em; font-size: 0.9rem; }

#piwigoAbout { margin: 2ex 2em; }
#piwigoAbout > P { margin: 1ex 0em; }
#piwigoAbout > UL { margin: 1ex 1em; }
#linkToPiwigo { text-align: center; }

.notification { margin: 2ex 2em; }
.notification > P { margin-bottom: 2ex; }
.notification > DL { margin: 1ex 1em; }

.properties { display: inline-block; margin: 2ex 2em; }
.properties > P { margin: 1ex 0em; }
.properties LI { margin: 0.5ex 0em; }
.properties > FIELDSET INPUT, 
.properties > FIELDSET SELECT { float: right; }
.property { margin-right: 0.5em; }

.proprad { float: right; }
.proprad > LABEL { margin-left: 1em; }

#lostPassword { margin: 2ex 2em; }
#lostPassword P { margin: 1ex 0em; }

#closeLink {
        margin: 3ex 0em 1ex; 
        font-weight: bold;
        text-align: center; 
}

/****************************************************************/
/*      UNICODE ICONS                                           */      
/****************************************************************/

.pwg-icon { 
        display:inline;
        padding-right: 0.3em;
        font-family:FontAwesome;
        font-style:normal;
        font-weight:normal;
        line-height:1;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
}

.pwg-button { cursor: pointer; }
.pwg-button-text { display: inline; }
.pwg-state-disabled { color: #555555; }

.navigationButtons { font-size: 1.0rem; }
.navigationButtons .pwg-button-text { display: none; }
#slideshow .navGroup { margin-right: 1em; }
.navGroup > .fa-clock-o { margin-right: 0.5em; }

.pwg-icon-category-edit:before { content:"\f0ad"; }
.pwg-icon-sort:before { content:"\f0dc"; }
.pwg-icon-caddie-add:before { content:"\f196"; }
.pwg-icon-category-view-flat:before { content:"\f24d"; }
.pwg-icon-camera-calendar:before { content:"\f073"; }
.pwg-icon-calendar:before { content:"\f133"; }
.pwg-icon-slideshow:before { content:"\f144"; }
.pwg-icon-sizes:before { content:"\f047"; }
.pwg-icon-camera-info:before { content:"\f083"; }
.pwg-icon-save:before { content:"\f019"; }
.pwg-icon-favorite-add:before { content:"\f08a"; }
.pwg-icon-favorite-del:before { content:"\f004"; }
.pwg-icon-representative:before { content:"\f045"; }
.pwg-icon-edit:before { content:"\f044"; }
.pwg-icon-category-view-normal:before { content:"\f06e"; }
.pwg-icon-letters:before { content:"\f15d"; }
.pwg-icon-cloud:before { content:"\f0c2"; }
.pwg-icon-lost-password:before { content:"\f059"; }
.pwg-icon-help:before { content:"\f059"; }
.pwg-icon-info:before { content:"\f05a"; }
.pwg-icon-close:before { content:"\f148"; }
.pwg-icon-clock-minus:before { content:"\f068"; }
.pwg-icon-clock-plus:before { content:"\f067"; }
.pwg-icon-repeat:before { content:"\f01e"; }
.pwg-icon-stop:before { content:"\f28d"; }
.pwg-icon-play:before { content:"\f144"; }
.pwg-icon-pause:before { content:"\f28b"; }
.pwg-icon-arrow-w:before { content:"\f053"; }
.pwg-icon-arrow-e:before { content:"\f054"; }
.pwg-icon-arrow-n:before { content:"\f139"; }

.batch-downloader-icon { background: none !important; }
.batch-downloader-icon:before { content:"\f019"; }

#showPhotoProperties:before { content:"\f040  "; font-family:FontAwesome; }