/* Stylesheet to manage the Maintenance Mode plugin */

body {font-family: Verdana, Geneva, Tahoma, sans-serif;}
h1, h2, h3 {margin-bottom:0; padding-bottom:0; text-align: left; }
h1 {margin-top:0; margin-bottom:0.5em;}
h2 {margin-top:3em; margin-bottom:0.5em;}
h3 {margin-top:2em; margin-bottom:0.5em;}
p, #content p {margin-top:0; margin-bottom:1em; padding:0}
a.AnchorTargetFullURL {font-weight:bold; color:red; text-decoration: underline;}
h3 { color: #08658F; }

div#header { 
    display:none;
}
div#content { 
    padding-top:1em;
}
div#content p {
    text-align: left; 
    font-size:11pt;
    line-height: 1.4em;
}

/* Override the menu from being badly attached to the bottom of the viewport */
div#menu {
    display:none !important;
    position: fixed;
    height: 3em;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 75%);
}
div#menu p {
    font-family: Arial, Helvetica, "Sans serif";
    font-size:10px;
    margin: 0;
    padding-top: 1.5em;
}

img.BlurbImage, img.BlurbLogo {
    float: right; 
    height: auto; 
    width: 20%; 
    margin: 0 0 1em 2em; 
}
img.BlurbImage {
    box-shadow:5px 5px 5px rgba(0,0,0,0.6);
    min-width: 250px; 
}

img.BlurbLogo {
    min-width:200px;
}

/* https://www.bestcssbuttongenerator.com/ */
.myButton {
    margin:1em auto 2em auto;
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#c9e0f2 !important;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none !important;
	text-shadow:4px 4px 3px #283966;
}
.myButton:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color:#476e9e;
    color:white !important;
}
.myButton:active {
	position:relative;
    top:1px;
    text-shadow:none;
}

@media only screen and (max-width: 980px) {
    img#BlokesLogo {
        width: 50%;
    }
}


@media only screen and (max-width: 600px) { /*420px*/
    body {
        font-size:initial;
    }
    div#content{
        width: 90%;
    }
    h1, h2 {
        line-height: 1.1em;
    }
    h1 {
        font-size: 160%;
    }
    h2 {
        font-size: 130%;
    }
    div#content p {
        font-size: 14pt;
        line-height: 1.4em;
        word-break: break-word;
    }

    img.BlurbImage, img.BlurbLogo {
        float: none;
        width: 90%;
        margin: 1em auto;
        display: block;
    } 

    .myButton {
        width:75%;
    }
}
div#dropoutrates {
    margin-top: 2em;
    .dorate {
        --highlight_color: #08658F;

        float: left;
        margin: 0 0 1em 5%;
        border: 1px solid #000;
        border-radius: 12px;
        padding: 12px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);

        .dorate_type {
            color: var(--highlight_color);
            font-size: 1.25em;
            font-weight: bold;
            position: relative;
            padding-left: 28px;
            padding-bottom: .5em;

            &:before {
                content: "";
                position: absolute;
                left: 0;
                width: 22px;
                height: 18px;
                top: 5px;
                background: url(https://havantcounselling.com/wp-content/themes/et_divi/epanel/shortcodes/images/shortcodes-sprite.png) no-repeat -74px -2px;
            }

        }
        
        .dorate_value {
            font-weight: bold;
            color: #2fd82f;
            padding-left: 28px;
            font-size: 1.75em;
        }

        &.neg {
            .dorate_value {
                color: #c03b3b;
            }
            
            &:before {
                background: url(https://havantcounselling.com/wp-content/themes/et_divi/epanel/shortcodes/images/shortcodes-sprite.png) no-repeat -74px -21px;
            }
        }

    }
}

@media only screen and (max-width: 980px) {
    div#dropoutrates {
        .dorate {
            margin-left:0;
        }
        .dorate_value {
            font-weight: bold;
            color: #2fd82f;
            padding-left: 28px;
            font-size: 110%;
        }
    }

}