/*** Style Sheet for Ramblers Area Website ***/
/*** At 7.0.1 Totally revised structure. Replaced divs where possible. Changed p.main_title to h1, h1 to h2, h2 to h3 and h3 to h4. Changed absolute widths of 1000px to 100%.
/*** At 7.0.2 Small tweeks to line up footer text and nav bar when viewed from mobiles. Changed width and position of nav bar when viewed on mobiles.
Structure...
*/
/****************************************/
/* header */
/****************************************/
/*. nav */
/****************************************/
/* main */
/* article.default * article.news */
/* * */
/* * */
/* * */
/****************************************/
/* footer */
/****************************************/
* {margin-top: 0;
box-sizing: border-box;
}
body {background-color: silver;
color: black;
margin: 0;
font: 10pt verdana,arial,helvetica,sans-serif;
}
/* default dark background for header - photos defined in header.php using the $photo variable */
header {width: 100%;
height: 198px;
margin-left: auto;
margin-right: auto;
float: none;
background-color: #404141;
background-repeat: no-repeat;
background-size: cover;
}
main {width: 100%;
border-collapse: collapse;
padding: 0px;
border-style: none;
margin-left: auto;
margin-right: auto;
float: none;
background: #F08050;
display: flex;
flex-wrap: wrap;
}
/* two article columns that float next to each other */
.default {flex: 75%;
background-color: linen;
vertical-align: top;
padding-top: 0.3cm;
padding-left: 1.0cm;
padding-right: 1.0cm;
padding-bottom: 0.3cm;
}
.news {flex: 25%;
color: white;
background-color: #F08050;
vertical-align: top;
padding: 0.2cm;
}
footer {width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
background-color: #404141;
padding: 0.2cm;
padding-left: 0.5cm;
vertical-align: top;
color: white;
}
/************ Tables **********/
table.walks {width: 100%;
background-color: #9BC8AB;
border-collapse: collapse;
border-style: none;
margin-left: auto;
margin-right: auto;
}
td.walk_date {color: black;
text-align: left;
padding-left: 5px;
width: 25%;
border-bottom: 1px solid grey;
}
td.walk_date_header {color: white;
text-align: left;
padding-left: 5px;
background-color: #F08050;
width: 25%;
}
td.walk_title {color: black;
text-align: left;
width: 50%;
border-bottom: 1px solid grey;
}
td.walk_title_header {color: white;
text-align: left;
background-color: #F08050;
width: 50%;
}
td.walk_org {color: black;
text-align: left;
width: 25%;
border-bottom: 1px solid grey;
}
td.walk_org_header {color: white;
text-align: left;
background-color: #F08050;
width: 25%;
}
td.areawalk_date_header {color: white;
padding-left: 5px;
text-align: left;
background-color: #F08050;
width: 25%;
}
td.areawalk_title_header {color: white;
text-align: left;
background-color: #F08050;
width: 50%;
}
td.areawalk_grade_header {color: white;
text-align: left;
background-color: #F08050;
width: 25%;
}
td.areawalk_date {color: black;
padding-left: 5px;
text-align: left;
width: 25%;
border-bottom: 1px solid grey;
}
td.areawalk_grade {color: black;
text-align: left;
width: 25%;
border-bottom: 1px solid grey;
}
/*********** Headings and Paragraphs *************/
h1 {padding-top: 80px;
padding-bottom: 0px;
font-size: 26pt;
font-weight: 600;
color: white;
font-family: Arial;
}
h2, h3, h4 {text-align: left;
color: black;
font-family: Arial;
}
h2 {font-size: 16pt;
font-weight: 700;
}
.warning {text-align: center;
color: red;
}
h2.newstext {font-size: 11pt;
text-align: center;
color: white;
}
h3 {font-size: 12pt;
font-weight: 600;
text-decoration: none;
}
h4 {font-size: 10pt;
font-weight: 600;
text-decoration: underline;
}
p.newstext {color: white;
}
p.footer {font-size: 7pt;
color: white;
}
li {padding-bottom: 1em;}
.deep {line-height: 3;
}
hr {width: 70%;
color: black;
}
hr.news_hr {
color: white;
}
/* Box to draw attention to change(s) (e.g. in Area walks page) */
.note_box {
border: 2px solid black;
padding: 10px;
margin: 5px;
}
/******** Navigation *********/
.navbar {
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 3rem 0 0;
background-color: #9BC8AB;
color: #fff;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-item {
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
margin-bottom: 0;
padding-right: 0;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
text-align: center;
font-size: 10pt;
font-weight: 600;
font-family: Arial;
}
.nav-link {
color: black;
text-decoration: none;
}
/*** Hamburger Menu ***/
.hamburger {
display: none; /* Hidden on desktop */
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
/*********** Images *********/
img {border:none;
padding: none;
}
img.raVlogo {float: left;
width: 90px;
height: 90px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
img.events_std {float: none;
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 1em;
}
/********** iframes ********/
iframe {border-collapse: collapse;
padding: 0px;
border-style: none;
height: 200px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
iframe.area_and_group_400 {height: 400px;}
iframe.area_and_group_800 {height: 800px;}
iframe.areawalks {height: auto;}
/************** spans ***********/
span {color: black;
font-weight: 700;
}
span.area_detail_note {font-size: 10pt;}
/********** Links **************/
a {color: blue;
text-decoration: none;
}
a:hover {text-decoration: underline;}
a.newslink {color: yellow;}
/* get rid of annoying wrongly interpreted Safari blue telephone links */
a[href^="tel:"] {color: inherit;
text-decoration: none;
}
/********** Forms and Inputs ************/
select {
padding: 4px 10px;
border: 1px solid linen;
border-radius: 4px;
font-size: 100%;
color: white;
background-color: #F08050;
}
input[type=submit]
{
background-color: blue;
border-radius: 4px;
border: none;
font-size: 100%;
color: white;
padding: 4px 10px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/******** Layout changes for small devices - i.e. mobile phones *********** */
@media (max-width: 768px) {
main {
flex-direction: column;
}
footer {
padding-left: 0.2cm;
}
.default {padding: 0.3cm;
}
h1 {padding-top: 80px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 10px;
font-size: 18pt;
font-weight: 600;
color: white;
font-family: Arial;
}
img.raVlogo {float: left;
width: 50px;
height: 50px;
margin-top: 5px;
margin-left: 5px;
border: none;
}
a.linkmenu {font-size: 10pt;
font-weight: 400;
}
div.nav {float: left;
width: 100%;
font-family: Arial;
font-size: 10pt;
text-align: left;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
color: gray;
background-color: #9BC8AB;}
img.events_std {float: none;
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}
/**** Hamburger Menu ****/
.hamburger { display: block; }
.navbar {
padding: 1rem 1rem;
}
.nav-menu {
position: fixed;
left: -100%; /* Hide off-screen */
top: 70px;
flex-direction: column;
background-color: #9BC8AB;
width: 100%;
text-align: center;
transition: 0.3s;
padding: 0.5rem;
}
.nav-menu.active { left: 30%; width: 70%;} /* Slide into view */
.nav-item { margin: 1rem 0; }
}
/************** End ******************/