/************************************************
Style sheet for Saints & Sinners
Created by Mike Lewis, May 2017.
This version uses responsive web design with media queries.
*************************************************/
body
{
/* All page content. This will occupy the width of the viewport,
but subject to an overall maximum of 970 px. */
max-width: 970px;
font-size: 80%;
line-height: 1.4em;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
background-color: #e4e4e4;
}
/* --------- MASTHEAD -------------- */
.masthead
{
/* Extends across the top of the page */
padding-top: 1.5em;
}
.masthead h1
{
text-align:center;
font-size: 2.4em;
margin-top: -0.5em;
font-family: "Berlin Sans FB Demi", "Bell MT", "Book Antiqua", serif;
color:maroon;
line-height: 1.4em;

}
@media (min-width: 700px)
{
.masthead h1
{
font-size:3.2em;

}
}
@media (min-width: 500px) and (max-width: 699px)
{
.masthead h1
{
font-size:2.6em;;

}
}
.phonebox 
{
text-align:center;
font-size:1.5em;
font-weight:bold;
line-height: 1.8em;
font-family: "Arial", sans-serif;
background-color: maroon;
color: white;
border-radius: 25px;
box-shadow: 10px 10px 5px #888;
}
.phonebox p
{
margin: 0.1em;
padding: 0.1em;
}
/* --------- NAVIGATION -------------- */
.navigation
{
padding-top:1em;
padding-bottom:1em;
float:left;
width:95%;
margin-left:1em;
}
.navigation p
{
line-height: 2.2em;
padding:0;
margin:0;
font-size:1.0em;
font-weight:bold;
text-align:left;
text-indent:1em;
float:left;
width:48%;
color: black;
}
/* Links within the main menu */
.navigation a {display:block;text-decoration:none; color:maroon; }
.navigation a:focus {text-decoration:none; background-color:transparent; border-style:none; }
.navigation a:hover {background-color: lightgray; border-style:none;}
.navigation a:active {background-color: lightgray;  border-style:none;}
@media (min-width: 700px)
{
.navigation
{
float: left;
width: 22.5%;
padding-top:1.5em;
padding-bottom:1.5em;
}
.navigation p
{
/*  Menu items for main menu at top of page */
width:100%;
font-size:1.3em;
}
}
@media (min-width: 500px) and (max-width: 699px)
{
.navigation
{
padding-top:1em;
padding-bottom:1em;
width:95%;
margin-left:1em;
}
.navigation p
{
/*  Menu items for main menu at top of page */
float:left;
width:32%;
}
}
/* --------- MAIN CONTENT -------------- */
.main-content
{
/* Main body of the page.  */
margin: -2.0em 2% 0 2%;
line-height:1.8em;
text-align:left;
}
p
{
font-size: 1.2em;
padding: 0.5em 2em 0.5em 0em;
}
h3
{
font-weight:bold;
padding: 0.8em 0 0 0;
text-align: left;
font-size: 1.8em;
font-family:  "Bell MT", "Book Antiqua", serif;
color:maroon;
}
ul li
{
margin-bottom: 1.0em;
font-size: 1.2em;
padding-left: 1em;
list-style-type: square;
}
a { text-decoration:none; color:Blue;}
a:focus {background-color:Silver;}
a:hover {background-color:Silver; }
a:active {background-color:Silver;}
img
{
border-width: 0;
background-color:transparent;
max-width: 100%;
height: auto;
}

.social a:focus {text-decoration:none; background-color:transparent}
.social a:hover {text-decoration:none; background-color:transparent}
.social a:active {text-decoration:none; background-color:transparent}
/* .social img  {max-width: 100px;}
 */
.social img {padding:5px;}

@media (min-width: 700px)
{
.main-content
{
float: left;
width: 71.5%;
}
}
@media (min-width: 500px) and (max-width: 699px)
{
.main-content
{
float: left;
width: 71.5%;
}
}
/* --------- PHOTO -------------- */
.photo
{
/* To hold main photos; these will occupy the full width of the
vuewport on small screens, and will otherwise float to the right. */
float:right;
margin-left: 1em;
text-align:center;
width:100%;
}
.photo  a  { text-decoration:underline; color:gray; }
.photo img
{
max-width:300px;
}
.photo p
{
font-size:0.85em;
margin: 0.5em 0 1em 0;
padding-right:0;
text-align:center;
line-height:1.2em;
}
@media (min-width: 700px)
{
.photo
{
width:50%;
}
.photo p
{
text-align:right;
}
.photo img
{
max-width:100%;
}
}
@media (min-width: 500px) and (max-width: 699px)
{
.photo
{
width:38%;
}
.photo p
{
text-align:right;
}
.photo img
{
max-width:100%;
}
}
/* --------- ENDPIECE -------------- */
.endpiece
{
/* Extra navigation links and other small print usually at
the foot of the page */
font-size: 0.8em;
line-height:2.0em;
clear: both;
text-align: center;
width: 98%;
padding-top: 0em;
}
/* --------- HIDE / SHOW -------------- */
/* For elements that we want to show or hide respectively on 
various sizes of screens */
.hide-on-tiny
{
/* For elements that we want to hide on the smallest screens */
display: none;
}
.hide-on-small
{
/* For elements that we want to hide on small and medium screens */
display: none;
}
.hide-on-large
{
/* For elements that we want to hide on large screens */
display:block;
}
.print-only
{
/* For elements that are only to appear in printed versions; suppressed
on screen */
display:none;
}
@media (min-width: 700px)
{
.hide-on-tiny
{
/* For elements that we want to hide on the smallest screens */
display: block;
}
.hide-on-small
{
/* For elements that we want to hide on small and medium screens */
display: block;
}
.hide-on-large
{
/* For elements that we want to hide on large screens */
display:none;
}
}
@media (min-width: 500px) and (max-width: 699px)
{
.hide-on-tiny
{
/* For elements that we want to hide on the smallest screens */
display: block;
}
.hide-on-small
{
/* For elements that we want to hide on small and medium screens */
display: none;
}
.hide-on-large
{
/* For elements that we want to hide on large screens */
display:block;
}
}