/*
useful external resources / tutorials;
https://www.w3schools.com/colors/colors_picker.asp
https://htmlcolorcodes.com
https://coder-coder.com/background-image-opacity/
put the background image into a child element of the parent. This will ensure that the background image and the text content will be on their own “layer” in the parent. You can then control each layer’s opacity without affecting each other!
DJ - initially links didn't work!!!
ensure any links are in a div or element with a hignest z-index!!
*/
/*
css page CONTENTS
1 - general body and text classes
2 - page div classes - top to bottom
wrapper
header
banner
subscribe - link to anchor button
intro_section
info_section
forthcoming
forthcoming_event
footer
3 - fontawesome styling
*/
/* 1 - general body and text classes */
body {
margin: 0 0 0 0;
font-family: 'Lato', sans-serif;
font-size: 1.2em; /* general font before specific text sizing and styling */
line-height: 1.3;
background-color: #fff ;
/*
#e3e2df
#edf5e1
#c8a474
#3AC0D5
#A0D5DE
#82C7EE
#ABD5ED
#788B9B
*/
}
@media(max-width:1100px){
body{font-size: 1.0em;}
/* general font before specific text sizing and styling */
}
@media(max-width:800px){
body{font-size: 0.85em;}
/* general font before specific text sizing and styling */
}
p{
}
h1{ font-size: 350%; }
h2{ font-size: 200%; }
h3{ font-size: 150%; }
h4{ font-size: 110%; }
a{
font-style: italic;
text-decoration: none; }
.headliner{
font-size: 2.9em;
font-weight: bold;
color: #82C7EE ;
font-style: italic;
}
.info_1{
font-size: 1.1em;
font-style: italic;
}
.info_2{
font-size: 1.05em;
}
.details{
font-size: 1.1em;
font-weight: bold;
}
.muso{
font-size: 1.05em;
font-weight: bold;
}
.soldout{
font-size: 1.05em;
font-weight: bold;
font-style: italic;
color: #82C7EE ;
}
.phone{
font-size: 0.80em;
font-style: italic;
}
.italic{
font-style: italic;
}
/* 2 - page div classes - top to bottom
wrapper
header
banner
subscribe - link to anchor button
intro_section
info_section
forthcoming
forthcoming_event
readmore
footer
errormessages
*/
/* do you need this div ?? */
.wrapper{
margin: 1em 0 1em 0;
}
.menu{
padding: 5%;
height: 50px;
}
/* do you need this div ?? */
.header{
padding: 5%;
height: 50px;
}
.banner{
/*
position: relative;
justify-content: center;
align-items: center;
background-color: #fff ;
*/
text-align: center;
padding: 5%;
}
.banner::before {
content: "";
background-image: url(../images/thommer.png);
background-size: cover;
position: absolute;
top: 20px;
right: 20px;
bottom: 0px;
left: 20px;
opacity: 0.20;
z-index: -1;
}
/*
putting the background image into this child element of the parent allows the background image and the text content to be on their own “layer” within the parent.
You can then control each layer’s opacity without affecting each other!
*/
.subscribe{
text-align: center;
z-index: 1;
}
.link_to_anchor_button{
background:#fff;
false;clear:left;
font:17px Helvetica,Arial,sans-serif;
width: px;
}
.intro_section{
padding: 5%;
}
.intro_section img{
float: right;
width: 45%;
margin: 1em 0 1em 1em;
}
.info_section{
clear: both; /* stops this element floating up over the intro_section img */
padding: 5%;
margin: 0em 0 1em 0;
}
.forthcoming{
background-color: #e3e2df ;
}
.forthcoming_event{
clear: both; /* stops this element floating up over the intro_section img */
padding: 5%;
}
.forthcoming_event img{
float: right;
width: 35%;
margin: 1em 0em 1em 1em;
}
.readmore{
background-color: #e3e2df ;
}
.readmore_item{
clear: both; /* stops this element floating up over the intro_section img */
padding: 5%;
}
.readmore_item img{
float: right;
width: 40%;
margin: 0em 0em 1em 1em;
}
.archive_section{
padding: 5%;
}
.archive_section img{
float: right;
margin: 1em 0 1em 1em;
width: 30%;
max-height: 400px;
max-width: 200px;
}
.footer{
clear: both; /* stops this element floating up over the intro_section img */
padding: 3% 5% 2% 5%;
}
.subscribebox{
margin: 0% 5% 0% 5%;
padding: 2% 10% 5% 10%;
}
.subscribetext{
font-style: italic;
font-size: 70%;
}
.messages{
margin: 0% 40% 10% 25%;
padding: 2% 2% 2% 2%;
border-radius: 20%;
font-style: italic;
font-size: 70%;
background-color: #fff ;
}
#menu{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
padding: 0 60;
position: fixed;
width: 100%;
top: 0;
transition: background 0.5s;
}
#menu ul{
width: 500px;
justify-content: space-around;
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
}
#menu ul li a{
text-decoration: none;
color: #000000;
}
/* style changes made by javascript based on positio of page scroll */
#menu.custom-nav{
background: #262626;
z-index: 999;
}
#menu.custom-nav a{
color: #fff;
}
/*
3 - font awesome styling
*/
.fa {
padding: 8px;
font-size: 1em;
width: 1em;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Mailchimp sign up form styling */
#mc_embed_signup{
background:#fff;
false;clear:left;
font:14px Helvetica,Arial,sans-serif;
}
@media(max-width:1100px){
#mc_embed_signup{
width: 80%;}
}
@media(min-width:1100px){
#mc_embed_signup{
width: 50%;}
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */