/*****************************************************************
 *****************************************************************
 **                                                             ** 
 ** The BLACK ACTIVIST, Journal of the Black Left Unity Network **
 ** jblun.org                                                   **
 **                                                             **
 ** towards global liberation, @bzelip                          **
 **                                                             **
 *****************************************************************
 *****************************************************************/

@import url(http://fonts.googleapis.com/css?family=Special+Elite|Roboto+Condensed:300,400,700);
@import "pure.css";

body {
	font-family: "Roboto Condensed";
	background: none repeat scroll 0% 0% rgb(25, 24, 24);
}

button, input {
    font-family: "Roboto Condensed", sans-serif;
    color: #C90101;
    font-weight: 700;
}

::selection {
	background: rgba(201, 1, 1, 0.8);
	}
::-moz-selection {
	background: rgba(201, 1, 1, 0.8);
}

#layout, #menu, .pure-menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#layout {
    width: 66.66%;
    margin: 0 auto;
    padding-top: 20px;
}

img {
   border: 8px solid white;
   border-radius: 6px;
}

.action {
    float: right;
    text-align: center;
}

h1 {
    font-size: 2.5em;
    color: white;
    font-weight: 300;
    padding: 0;
    margin: 0;
    font-family: "Special Elite"
}

.action ul {
    text-align: center;
    list-style-type: none;
    padding: 0;
}

.pure-button {
    padding: .5em 0em;
}


.pure-button-cta {
    font-size: 150%;
    font-family: "Roboto Condensed";
    color: white;
    margin: 0.25em 0;
    width: 100%;
    background-image: -moz-linear-gradient(top, #E40A2A, #C90101);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E40A2A), to(#C90101));
    background-image: -webkit-linear-gradient(top, #E40A2A, #C90101);
    background-image: -o-linear-gradient(top, #E40A2A, #C90101);
    background-image: linear-gradient(to bottom, #E40A2A, #C90101);
    background-repeat: repeat-x;
    border-color: #bd362f #bd362f #802420;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.pure-button-cta:hover {
    background-image: -moz-linear-gradient(top, #C90101, #B40404);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#C90101), to(#B40404));
    background-image: -webkit-linear-gradient(top, #C90101, #B40404);
    background-image: -o-linear-gradient(top, #C90101, #B40404);
    background-image: linear-gradient(to bottom, #C90101, #B40404);
}

.pure-button-cta:active, .pure-button-cta:focus  {
    background-image: -moz-linear-gradient(top, #FF0000, #B40404);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF0000), to(#B40404));
    background-image: -webkit-linear-gradient(top, #FF0000, #B40404);
    background-image: -o-linear-gradient(top, #FF0000, #B40404);
    background-image: linear-gradient(to bottom, #FF0000, #B40404);
}

.pure-button-cta-secondary {
    font-size: 150%;
    font-family: "Roboto Condensed";
    color: white;
    margin: 0.25em 0;
    width: 100%;
    background: grey;
    border-radius: 6px;
}

.pure-form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0px;
    margin-bottom: 0.3em;
    font-size: 1.5em;
    color: white;
    border-bottom: 2px solid rgb(229, 229, 229);
}

.pure-form input[type="email"] {
    padding: 0.5em 0.6em;/* 1em 3.8em*/
    display: inline-block;
    border: 1px solid rgb(204, 204, 204);
    font-size: 100%;
    box-shadow: 0px 1px 3px rgb(221, 221, 221) inset;
    border-radius: 6px;
    width: 68%;
    transition: border 0.3s linear 0s;
    -moz-box-sizing: border-box;
}

::-webkit-input-placeholder {
   color: grey;
}

:-moz-placeholder { /* Firefox 18- */
    color: grey;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: grey;
}

:-ms-input-placeholder {
    color: grey;
}

.sub {
    font-family: "Roboto Condensed";
    color: white;
    font-size: 100%;
    background: #2A5C44;
    margin-left: 2px;
    border-radius: 6px;
    padding: 0.5em 0.6em;
}

.sub:hover {
    background: #20523A;
}

.sub:active {
    background: #2A5C44;
}

a.contact, a.contact:visited, a.contact:active {
    text-decoration: none;
    color: white;
}

a.contact:hover, a.contact:focus {
    text-decoration: underline;
}

p.contact {
    color: white;
    font-size: 200%;
    font-weight: 400;
    margin: 1em 0px;
}

/* ---------------------------------------------------------------------
 * responsive styles
 * ---------------------------------------------------------------------
 */
@media (max-width: 1345px) {
    h1 {
        font-size: 2.3em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 140%;
    }
    .pure-form input[type="email"] {
        width: 65%;
    } 
    p.contact {
        font-size: 180%;
        margin: .7em 0px;
    }
}

@media (max-width: 1230px) {
    h1 {
        font-size: 2.2em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 130%;
    }
    .pure-form input[type="email"] {
        width: 63%;
    } 
    p.contact {
        font-size: 180%;
    }
}

@media (max-width: 1165px) {
    h1 {
        font-size: 2.1em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 120%;
    }
    .pure-form input[type="email"] {
        width: 60%;
    } 
    p.contact {
        font-size: 175%;
    }
}

@media (max-width: 1075px) {
    .pure-form input[type="email"] {
        width: 58%;
    } 
}

@media (max-width: 1025px) {
    .pure-form input[type="email"] {
        width: 56%;
    } 
}

@media (max-width: 997px) {
    .pure-form input[type="email"] {
        width: 54%;
    }
    p.contact {
        font-size: 160%;
    }
}

@media (max-width: 935px) {
    h1 {
        font-size: 1.9em;
    }
    .pure-form input[type="email"] {
        width: 50%;
    }
    p.contact {
        font-size: 150%;
    }
}

@media (max-width: 860px) {
    .pure-g-r > .pure-u, .pure-g-r > [class*="pure-u-"] {
        width: 100%;
    }
    h1 {
        font-size: 2.5em;
        margin-top: 20px;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 150%;
    }
    .pure-form input[type="email"] {
        width: 70%;
    } 
    p.contact {
        font-size: 180%;
        margin: .4em 0px;
    }
}

@media (max-width: 675px) {
    .pure-form input[type="email"] {
        width: 65%;
    }
}

@media (max-width: 580px) {
    h1 {
        font-size: 2.3em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 140%;
    }
    .pure-form input[type="email"] {
        width: 60%;
    } 
    p.contact {
        font-size: 170%;
    }
}

@media (max-width: 510px) {
    h1 {
        font-size: 2.1em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 130%;
    }
    .pure-form input[type="email"] {
        width: 57%;
    } 
    p.contact {
        font-size: 160%;
        margin: .3em 0px;
    }
}

@media (max-width: 475px) {
    h1 {
        font-size: 2em;
    }
    .pure-button-cta, .pure-button-cta-secondary {
        font-size: 120%;
    }
    .pure-form input[type="email"] {
        width: 55%;
    } 
    p.contact {
        font-size: 150%;
    }
}
/* ---------------------------------------------------------------------
 * 
 * Thanks to the Firefox Accessibility Extension for providing a tool
 * to resize windows easily. It was helpful for responsive styles!
 * http://firefox.cita.illinois.edu/
 *
 * ---------------------------------------------------------------------
 */