fsfe-website/look/fsfe.less

@import "style.less";

/* fsfe.org pages */

body {
    background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
    font-family: "Roboto", sans-serif;
}
.svg body {
    background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
}

#logo {
    background: url(/graphics/logo_transparent.png) top left no-repeat;
}
.svg #logo {
    background: url(/graphics/logo_transparent.svg) top left no-repeat;
}

#masthead, #logo {
    min-height: 85px;
    min-width: 158px;
}

#link-home a {
    width: 158px; 
    height: 85px; 
}

#menu {
    @media (min-width: @screen-xs) {
        margin-left: 200px;
    }
}

#followup {
    background: url(/graphics/ribbon.png) no-repeat 100% -40px @body-bg; 
    text-shadow: rgb(255,255,255) 0 0 .5em;

    @media (min-width: @screen-sm) {
        background: url(/graphics/ribbon.png) no-repeat 100% -70px @body-bg; 
    }
}

.svg #followup {
    @media (min-width: @screen-sm) {
        background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg; 
    }
}

#followup.join {
    background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg; 
    @media (min-width: @screen-sm) {
        background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg; 
    }
}


#full-menu {
    background: url(/graphics/logo_bw_transparent_small.png) no-repeat top left @body-bg;
}

a.the-fellowship {
    padding: 8px 20px 0 0;   
    background: url(/graphics/plussy-bright-20.png) no-repeat top right transparent;
}

img.signatory-logo {
		padding: 10px;
	}

/* fsfe.org front page */

.frontpage { 

/* motto not displayed */
    
    #campaigns-boxes {

        background: url('/graphics/ribbon.png') top right no-repeat transparent;
        height: 400px;

        @media (min-width: @screen-xs) {
            height: 300px;
        }

        .campaign-box {
            height: 400px;

            @media (min-width: @screen-xs) {
                height: 300px;
            }
            width: 100%;

            img {max-width: 33%;}
        }

        .campaign-box-center {
            text-align: center;
            font-size: 1.3em;
        }

        #freesociety {
            .campaign-box-center;
            font-family: 'GNUTypewriter', @font-family-monospace; 
            background: url('/graphics/motto.jpg') top center no-repeat #666;
            background-size: cover;
            font-size: 2em;
            @media (min-width: @screen-xs) {
                font-size: 2.7em;
                padding-top: 1.8em;
            }
            p.text {
                /*background: url('/graphics/fsfs.png') top center no-repeat transparent; 
                background-size: contain; */
                -moz-hyphens: manual;
                -webkit-hyphens: manual;
                hyphens: manual;
            }
        }

        #amaelle {
            background: url('/graphics/amaelle.jpg')  center 33%  no-repeat #666;
            background-size: cover;
            text-shadow: 0px 1px 8px rgb(0,0,0);

            .author:before {content: "– ";}
            .text { 
                .quote; 
            }
            .author, .text {
                display: block;
                background-color: rgba(0,0,0,0.5);
                padding: 0.5em;
            }

            @media (min-width: @screen-sm) {
                .author, .text {
                    margin-left: 45%;
                }
            }

            .copyright {
                font-size: 0.6em;
                position: absolute;
                bottom: 0;
                right: 0;
            }

            @media (min-width: @screen-md) {
                .text {font-size: 1.25em; }
            }

        }

        #appelbaum {
            background: url('/graphics/appelbaum.jpg')  top right  no-repeat #070400;
            background-size: cover;

            @media (min-width: @screen-sm) {
                background-size: contain;
            }

            img { display: none; }
            .author:before {content: "– ";}
            .text { 
                .quote; 
            }
            .author, .text {
                display: block;
                background-color: rgba(0,0,0,0.5);
                padding: 0.5em;
            }

            @media (min-width: @screen-sm) {
                .author, .text {
                    margin-right: 45%;
                }
            }

            @media (min-width: @screen-md) {
                .author, .text {
                    margin-right: 35%;
                }
            }
            .copyright {
                font-size: 0.6em;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        
        #zacchiroli {
            background: url('/graphics/group-blur-800.jpg')  center 33%  no-repeat #666;
            text-shadow: 0px 1px 2px rgb(0,0,0);

            img { float: right; margin-left: 1em; }
            .author:before {content: "– ";}
            .text { 
                .quote; 
            }

            @media (min-width: @screen-md) {
                img { margin-left: 3em; }
                .text {font-size: 1.3em; }
                .text, .author {max-width: 80ex; margin: 1em auto; display: block;}
            }

        }

        #summit16 {
            .campaign-box-center;
            background: url('/graphics/fsfe-summit-header-background.jpg') center no-repeat #666;
            background-size: cover;
        }
        #summit16 img { position: absolute; }
        #summit16 img:first-of-type { top: 10%; left: 5%; width: 40%; max-width: 250px; }
        #summit16 img:last-of-type  { bottom: 10%; right: 5%; width: 50%; max-width: 400px; }
        @media (min-width: 800px) { #summit16 img:first-of-type {top: 20%;} }
        
        #boxpmpc {
            background: url('/graphics/pmpc_slider.jpg')  left 33%  no-repeat #666;
            background-size: cover;
            text-shadow: 0px 1px 8px rgb(0,0,0);

            .text, .text2 {
                .quote;
            }
            .text, .text2 {
                display: block;
                padding: 1.25em;
                min-width: 120px;
                font-size: 1.25em;
                hyphens: none;
                text-align: center;
            }

            @media (min-width: @screen-sm) {
                .text {
                    float: left;
                    width: 30%;
                }
                .text2 {
                    float: right;
                    width: 30%;
                }
                background-position: center;
            }

        }

        #dfd {
            .campaign-box-center;
            background: url('/graphics/fellowship/plussy_tile_01-33alpha.png') rgba(118, 181, 32,1);
            img {height: 200px;margin-bottom: 10px;margin-top:-70px;max-width: none;}
        }
        
        #ilovefs {
            .campaign-box-center;
            background: url('/graphics/ilovefs-hashtag-campaignbox.png')  center 33%  no-repeat transparent;
        }
        
        #racketware {
            .campaign-box-center;
            background:  center 33%  no-repeat #FFF;

            .text { display: none; }
        }

        #becomefellow {
            .campaign-box-center;
            background: url('/graphics/group-blur-800.jpg')  center 33%  no-repeat #666;
        }

        #fightback {
            .campaign-box-center;
            background: url('/graphics/thedaywefightback.png')  center 33%  no-repeat transparent;
        }
        
    }
}
.svg #campaigns-boxes #dfd {
    img {
        /*TODO: can we maybe change it to svg here?*/
    }
}



#news {
    padding-bottom: 1.5em;

    .dt-published {
        color: @gray-light;
        font-size: .9em;
        display: block;

        @media (min-width: @screen-sm) {
            display: inline-block;
            padding: 0;
        }
    }

    .entry {
        h3 {
            display: inline-block;
            padding-right: 0.5em;
        }
        p.date {
            display: inline-block;
            #news .dt-published;
            font-weight: 300;
            margin-bottom: 0;
        }
    } 
    
    .entry:nth-child(1n+3) {

        h3 {
            font-size: 1em;
            margin: 0.7em 0 0  0;
        }
        .text, p { display: none; }
        p.date { display: inline-block; }
    }
    
}


#latest-news-list, #more-news-list {
    list-style-type: none;
    font-size: 1.2em;
    font-weight: 300;
    padding: 0;
}

.newsdate {
  font-size: .875em;
  color: #888;
  margin-right: 1ex;
}


#events {
    clear: both;
    padding-top: 1.5em;

    #map { height: 280px; }

    .entry {
        h3 {
            display: inline-block;
        }
        p.date {
            #news .dt-published;
            display: block;
            margin-bottom: 0;
            @media (min-width: @screen-sm) {
                display: block;
            }
        }
    }
    a.learn-more {
        line-height: 2;
    }
}

@media (min-width: @screen-sm) {
    #news, #events {
        display: inline-block;
        float: left;
        width: 69%;
    }
    #team {
        display: inline-block;
        float: left;
    }

    #newsletter, #shop-promo, .country.frontpage #teams  {
        display: inline-block;
        float: right;
        width: 30%;
        padding-left: 2%;
        clear: none;
        padding-top: 0;
    }
}

#newsletter, .newsletter #sidebar {
    input {
        display: block;
        margin: .5em 0;
    }
}

#feeds {
    a.ical, a.rss-feed {
        .small;
        color: @gray-light;

        i.fa {
        }
    }
}


/* Testimonials divs */

.testimonial {
    overflow: auto;
    clear: both;
}

.testimonial img {
    float: left;
    margin-right: 10px;
}

/* news archive */

.archivenews h3 { line-height: 1.2em; }

.archivenews p { font-size: 0.9em; }

ul.archivemeta, ul.archivetaglist {
    color: #999;
    font-size: 0.9em;
    padding-left: 0;
}

ul.archivemeta li {
    display: inline-block;
    padding: 0 0.15em;
}

ul.archivetaglist li {
    display: inline-block;
    padding: 0 0.25em;
}

ul.archivemeta li:first-child {padding-left: 0; }

ul.archivemeta li a, ul.archivetaglist li a { color: #999; }

.archiveauthor { margin: 0 0.25em; }

ul.archivetaglist { margin-left: 6%; }

/* donate */

#donate-fsfe {
    table {
        .table;
        .table-hover;
    }

    form {
        .form-group input {
            .form-control;
            max-width: 25em;
        }
        #donate-validate {
            .btn;
            .btn-lg;
            .btn-success;
            margin-bottom: 1em;
        }
    }

}

/* thank donors */

.thank-donors {
    table {
        .table;
        .table-striped;
    }
}


/* Android campaign style */

#hello-free-droid {
    background: url('/campaigns/android/robot.png') no-repeat top left transparent;
    height: 200px;
    width: 230px;
    float: left;
    margin-left: -6em;
    margin-right: 1.5em;

    @media (min-width: @screen-md) {
        position: absolute;
        margin-left: -200px;
        margin-top:-10em;
    }
    img {display: none;}
}

/* Valentine for ILOVEFS style */

.valentine-ilovefs {
    #logo {
        background: url(/graphics/logov.png) top left no-repeat;
    }
    .svg #logo {
        background: url(/graphics/logov.svg) top left no-repeat;
    }

    #followup {
        background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg; 

        @media (min-width: @screen-sm) {
            background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg; 
        }
    }
}

.svg .valentine-ilovefs #followup {
    @media (min-width: @screen-sm) {
        background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg; 
    }
}



/* Planet style */

.planet #motto {
    clear: none;
    font-size: 1em;
    text-align: left;
    position: absolute;
}

#planet-sources a {
    display: inline-block;
    width: 90%;
}

#planet-sources a:before {
    content: "→ ";
}

#planet-posts {
    .daygroup {
    	h2:first-child {
            color: @brand-strong;
        }
        .blogitem {
            padding-bottom: 3em;
            margin-bottom: 3em;
        }
    }
}

/* wiki */

.wiki #motto {
    .planet #motto;
}

.wiki #direct-links {
    visibility: visible;
    
    a {
        display:inline-block;
    }
}

.wiki #text h1 {
    color: @brand-strong;
}

@import "fonts.less";
@import "font-icon-no-js.less";

/* PDFreaders buglist */

tr.highlighted {
  background-color: rgb(208,244,0);
}


/* FSFE Shop (/order) */

table.merchandise tr {
  border-bottom: 1px solid #ddd;
}
table.merchandise tr:last-child {
  border-bottom: medium none;
}
table.merchandise td {
  padding: 10px 0;
}
table.merchandise .image {
  width: 25%;
  min-width: 250px;
}
table.merchandise .image img {
  max-height: 120px;
  margin: 5px;
}
table.merchandise .description {
  width: 60%;
}
table.merchandise .quantity {
  text-align: right;
  width: 15%;
  min-width: 100px
}
@media only screen and (max-device-width: 700px) {
  table.merchandise .image {
    min-width: 125px;
  }
}
@media only screen and (max-device-width: 400px) {
  table.merchandise .quantity {
    min-width: 0px;
  }
  table.merchandise .image img {
    max-width: 110px;
  }
}
table.order-form {
  width: 100%;
}
table.order-form .order-left {
  min-width: 65px;
  width: 10%;
}
table.order-form .order-right input,textarea {
  max-width: 400px;
  width: 90%;
}
table.order-form #order-submit {
  width: auto;
}
form.thankyou {
  margin-bottom: 10px;
}


/* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
.share-buttons.bottom {
  margin: 4em 0 -2em 0;
  font-size: 0.7em;
}
.share-buttons.bottom button.button,
.share-buttons.bottom label.button {
  display: inline-block;
  margin: 2.5px 5px 2.5px 0;
  color: #fff;
  font-weight: normal;
  font-size: 1em;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  padding: 7px 7px 7px 20px;
  width: 19%;
  min-width: 100px;
  max-width: 110px;
  border: none;
  border-radius: 3px;
  background-position: left 5px center;
  background-repeat: no-repeat;
  background-size: 20px auto;
  opacity: 0.9;
  vertical-align: top;
}
.share-buttons.bottom a:hover {
  text-decoration: none;
}

.share-buttons.bottom .share-facebook {
  background-color: #3b5998;
  background-image: url("/graphics/services/facebook_white.png");
}
.share-buttons.bottom .share-facebook:hover {
  background-color: #143271 !important;
}
.share-buttons.bottom .share-twitter {
  background-color: #55acee;
  background-image: url("/graphics/services/twitter_white.png");
}
.share-buttons.bottom .share-twitter:hover {
  background-color: #338acc !important;
}
.share-buttons.bottom .share-gplus {
  background-color: #d34836;
  background-image: url("/graphics/services/gplus_white.png");
}
.share-buttons.bottom .share-gplus:hover {
  background-color: #b12614 !important;
}
.share-buttons.bottom .share-diaspora {
  background-color: #404040;
  background-image: url("/graphics/services/diaspora_white.png");
}
.share-buttons.bottom .share-diaspora:hover {
  background-color: #101010 !important;
}
.share-buttons.bottom .share-flattr {
  background-color: #7ea352;
  background-image: url("/graphics/services/flattr_white.png");
}
.share-buttons.bottom .share-flattr:hover {
  background-color: #5a7f2e !important;
}
.share-buttons.bottom .share-support {
  background-color: #202d79;
  background-image: url("/graphics/services/fsfe_white.png");
}
.share-buttons.bottom .share-support:hover {
  background-color: #0a1763 !important;
}
.share-buttons.bottom .share-reddit {
  background-color: #ff5700;
  background-image: url("/graphics/services/reddit_white.png");
}
.share-buttons.bottom .share-reddit:hover {
  background-color: #dd3500 !important;
}
.share-buttons.bottom .share-gnusocial {
  background-color: #a22430;
  background-image: url("/graphics/services/gnusocial_white.png");
}
.share-buttons.bottom .share-gnusocial:hover {
  background-color: #850713 !important;
}
.share-buttons .share-mastodon {
  background-color: #2b90d9;
  background-image: url("/graphics/services/mastodon_white.png");
}
.share-buttons .share-mastodon:hover {
  background-color: #1060a9 !important;
}
.share-buttons.bottom .share-hnews {
  background-color: #ff6600;
  background-image: url("/graphics/services/hackernews_white.png");
}
.share-buttons.bottom .share-hnews:hover {
  background-color: #dd3500 !important;
}
.share-buttons.bottom .share-rss {
  background-color: #f4a000;
  background-image: url("/graphics/services/rss_white.png");
}
.share-buttons.bottom .share-rss:hover {
  background-color: #f78200 !important;
}
.share-buttons.bottom .share-mail {
  background-color: #6e6e6e;
  background-image: url("/graphics/services/mail_white.png");
}
.share-buttons.bottom .share-mail:hover {
  background-color: #272727 !important;
}

/* Share buttons form layout and behaviour hacks */
.share-buttons input[type="radio"],
.share-buttons input[type="radio"] + span,
.share-buttons input[type="checkbox"],
.share-buttons input[type="checkbox"] + span {display: none;}
.share-buttons input[type="radio"]:checked + span,
.share-buttons input[type="checkbox"]:checked + span {
  position: absolute;
  margin-top: 3.5em; margin-left: -10em;
  padding: .5em;
  z-index: 3;
  background-color: #333;
  border-radius: .5em;
  display: inline-block;
}
.share-buttons input[type="radio"]:checked + span:before,
.share-buttons input[type="checkbox"]:checked + span:before {
  content: '';
  position: absolute;
  top: -1em;
  height: 0em; width: 0em;
  border-bottom: 1em solid #333;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  z-index: 3;
}
.share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
.share-buttons input[type="radio"] + span > button {
  margin: 2.5px 0 2.5px 5px;
  min-width: 4em;
  padding: .25em;
  font-weight: normal;
  font-size: 1em;
  line-height: normal;
}
.share-buttons input[type="radio"] + span > label {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, .5);
}

/* Separate share buttons form from possibly floating content */
form.share-buttons {
  clear: both;
}

/* Free Your Andoid pages */
video#freeyourandroid {
  max-width:500px;
}