@charset "utf-8";
/* Copyright Ⓒ 2021 ChurchMapped */
/* Version 0.00 */
body{
background-color:#009900;
color: #ffffcc; /* This is one of the official colours for ChurchMapped.com. This determines the colour of the text for all elements within the <body></body> section. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* This determines the font for ChurchMapped.com. I am not sure if licensing is required for these fonts but I will have to check. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
font-size: 160%;
margin: 0px;
overflow: scroll;
/* END OF SEGMENT */
}
#churchmappedextensionforbrowseralert{ /* This governs the segment for the ChurchMapped Extension alert */
background-color: #006600;
width: 100%;
top: 0px;
position: relative;
z-index: 1;
text-align: center;
animation-name: churchmappedExtensionForBrowserAlertAnimation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
}
/* We use this segment to create a fade-in animation for churchmappedextensionforbrowseralert */
@keyframes churchmappedExtensionForBrowserAlertAnimation{
from{opacity: 0.0}
to{opacity: 1.0}
}
#churchMappedLogo{
position:relative;
top:70px;
z-index: -1;
}
#overlayforpreloader{
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.92);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
#verticalcrossForCircle{
/* This section determines the colour for the vertical part of the Cross within the Eucharist. */
height: 150px;
width: 22.75px;
background-color: #CD9368;
position: fixed;
display: block;
margin:auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9995;
animation-name: verticalCrossAnimation;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#horizontalcrossForCircle{
height: 22.75px;
width: 150px;
background-color: #CD9368;
position: fixed;
display: block;
margin:auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9995;
animation-name: horizontalCrossAnimation;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
#eucharistCircle{
/* This section determines the colour of the Eucharist as an animation. */
height: 300px; /* When it comes to adjusting the size of the Eucharist for other viewports, the height and the width are the values will change. For instance, if we want the Eucharist to be half as big, we use 150px for the height and 150px for the width. */
width: 300px;
background-color: #FFFFCC;
border-radius: 50% 50% 50% 50%;
position: fixed;
display: block;
margin:auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9995;
animation-name: eucharistCircleAnimation;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes eucharistCircleAnimation {
0% { transform:rotateY(0deg); }
100% { transform:rotateY(360deg); }}
@keyframes verticalCrossAnimation{
0% { transform:rotateY(0deg); }
100% { transform:rotateY(360deg); }}
@keyframes horizontalCrossAnimation{0% { transform:rotateY(0deg); }
100% { transform:rotateY(360deg); }}
/* End of section used to create pre-loading screen. */
/* This segment describes the styling for the (unlisted/unnumbered) bullet points. It is in the style of the Eucharist, which appears through ChurchMapped.com. The filename is eucharistbullet.png */
/* w3Schools.com recommends that the list-style-type also be used in addition to list-style-image in the event the image is not available for some reason. In this case a circle is used in the event the image is not available; this is because it is the closest to the image icon. The colour used is #ffff99, which is the alternative colour of ChurchMapped.com. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
ul{
list-style-image: url("assets/eucharistbullet.png"); /* Be sure to change the URL reference on the live version, if necessary. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */ /* An image has been used for the Eucharist as bullet points because recreating something similar in CSS would create a number of difficulties, and there is much greater certainty in simply using a picture. Having said this, some precautions have been taken with the picture. One of the main problems of using an image as a bullet point is that it does not properly align with the text. One way of somewhat getting around this is to simply use a small picture (in this case, 10x10) that is roughly the same size as the disc/bullet that would have been created natively by a browser. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
list-style-type: disc;
list-style-position: inside;
color: #ffffcc; /* This is one of the official colours for ChurchMapped.com. The other is #009900. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
font-weight: bold; /* This indicates that items in an unordered list should be in bold type. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
li{
padding-top: 10px; /* This section determines the spacing of the elements in a list. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
padding-bottom: 10px; /* This section determines the spacing of the elements in a list. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
padding-left: 10px; /* This section determines the spacing of the elements in a list. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
padding-right: 10px; /* This section determines the spacing of the elements in a list. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
a[class~="ComingSoon"]:link, a[class~="ComingSoon"]:visited, a[class~="ComingSoon"]:active, a[class~="ComingSoon"]:hover{ /* This section determines the appearance of all elements in the "ComingSoon" class. More specifically, it is used to style the "ComingSoon" parts after the flags associated with the respective language at international.html. They are coloured "Light Grey" (Hex value: #FFFAFA). ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
color:#D3D3D3;}
a[class~="nameOfLanguage"]:link, a[class~="nameOfLanguage"]:visited, a[class~="nameOfLanguage"]:active, a[class~="nameOfLanguage"]:hover{
color: #ffffcc; /* This determines the colour of the text for the word and link "English" on international.html for all states (link/visited/active/hover). ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
.maincontent{ /* This is the text for the main section of each page. This is different from the #maincontent below in that this is a class, whereas #maincontent is an id which is used for international.html. I will consider whether they should all just be converted to a class. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
background-color:#006600; /* This determines the background colour for the part where the main text goes. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
border-radius: 10px;
padding: 10px;
text-align: center; /* We align the text in the center for version 0.00 of ChurchMapped.com. However, in later versions, this may be changed. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
#maincontent{ /* This is the text for the main section of each page. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
background-color:#006600; /* This determines the background colour for the part where the main text goes. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
border-radius: 10px;
padding: 10px;
text-align: center; /* We align the text in the center for version 0.00 of ChurchMapped.com. However, in later versions, this may be changed. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
a[class~="maincontent"]:link, a[id~="maincontent"]:link, a[class~="maincontent"]:active, a[id~="maincontent"]:active, a[class~="maincontent"]:hover, a[id~="maincontent"]:hover{ /* This determines how links appear in the section designated as "maincontent" (class) or "maincontent" (id). The states here are defined for: link, active and hover. This should apply to all stylesheets: stylesver00mobile.css, stylesver00mobile375x667.css, stylesver00mobile375x667.css. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
color: #a5e04d;
}
a[class~="maincontent"]:visited, a[id~="maincontent"]:visited{ /* This determines how the link appears once it has been visited for <a> elements given the class "maincontent" or id "maincontent". It is a light-pink colour, exactly the same as that which appears in "lowernavbar". This should apply to all stylesheets: stylesver00mobile.css, stylesver00mobile375x667.css, stylesver00mobile375x667.css. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
color: #c567c5;
}
a[class~="maincontent"]:active, a[id="maincontent"]:active{ /* This determines how the link appears at the moment it is clicked for <a> elements given the class "maincontent" or id "maincontent". It is exactly the same as as the colour(#c567c5) for the state of visited for <a> elements in the class of "maincontent" and/or given an id of "maincontent". The main difference here is that a font-weight: bold is added. The effect of this is that upon clicking the link, it becomes bold. */
font-weight: bold;
color: #c567c5;
}
a[class~="maincontent"]:hover, a[id~="maincontent"]:hover{
font-weight: bold;
}
a[class~="churchmappedalerts"]:link, a[class~="churchmappedalerts"]:active, a[class~="churchmappedalerts"]:hover{ /* This section determines the appearance of ChurchMapped alerts. */
color: #a5e04d;
}
a[class~="churchmappedalerts"]:visited{
color: #c567c5;
}
ul[class~="lowernavbar"], li[class~="lowernavbar"], #contactinlowernavbar{ /* This section determines the appearance of the navigation bar, generally speaking. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
position: sticky;
background-color: #006600; /* The navigation bar should use the darker shade that is within the style guide of ChurchMapped.com. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
list-style-type: none;
font-weight: normal;
display: inline;
}
ul[class~="lowernavbar"]{
text-align: center;
padding-top: 1%; /* We use em/percent values to try to get around the fact that when the viewport is constricted, it seems the navigation bar collapses upon itself. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
padding-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
}
a[class~="lowernavbar"]:link, a[class~="lowernavbar"]:active, a[class~="lowernavbar"]:hover{
color: #a5e04d; /* This is the style that determines the appearance of the text in the bottom navigation bar. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
}
a[class~="lowernavbar"]:visited{ /* This is the style that determines the appearance of the next in the navigation bar when the link has been visited. It is a light pink. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
color: #c567c5;
}
a[class~="lowernavbar"]:active{
font-weight: bold;
color: #c567c5;
}
a[class~="lowernavbar"]:hover{
font-weight: bold;
}
#activepage{
}
/* This determines the animation for the outline of the search field box. */
@keyframes searchbarglow{
from{box-shadow: 0px 0px 0px 0px #ffffcc;}
to{box-shadow: 0px 0px 7px 3px #ffffcc;}
}
/* This determines the glow around the search field box - and only for the search field box. We use this style consistently throughout the main website too. */
input[type=text]{
width: 40%;
height: 30px;
background-color: #fff;
border: 1px solid #000;
box-shadow: none;
-webkit-appearance: none;
}
#formfieldforchurchsearch{
background-image: url("https://www.churchmapped.com/assets/magnifyingglassforsearchbar.png"); /* This should be changed on live server. */
background-repeat: no-repeat;
background-position: left center;
background-size: 35px;
padding-left: 40px;
}
input[type=text]:focus{
outline-color: #ffffcc;
outline-width: 4px;
box-shadow: 0px 0px 6px 3px #ffffcc;
animation-name: searchbarglow;
animation-duration: 0.5s;
font-weight: bold; /* We use font-weight bold to aid those who may be visually impaired */
}
#sidenavigationarea{
background-color: #006600;
width: 0px;
color: #FFFFCC;
transition: 0.5s; /* Remove this line of code for mobile versions - mobile users expect information as quickly as possible. */
overflow-x: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
z-index: 4; /* The z-index ensures that the side navigation area is always on top */
top: 0px;
}
.sidenavigationarealinks{
display: block;
padding: 20px 20px 20px 0px;
color: #FFFFCC;
}
.sidenavigationarealinks:hover{
font-weight: bold;
}
.sidenavigationarealinks:visited{
color: #FFFFCC;
}
#loginPassword{
height: 20px;
background-size: 35px;
background-color: #fff;
border: 1px solid #000;
box-shadow: none;
float: right;
background-image: none;
position: absolute;
padding-left: 5px;
vertical-align: middle;
display: inline-block;
margin-left: 48%;
margin-top: 1%;
margin-bottom: auto;
right: 4%;
width: 15%;
}
#loginUsername{ /* This determines the appearance of the loginUsername field. */
float: right;
position: absolute;
background-image: none;
padding-left: 5px;
vertical-align: middle;
display: inline-block;
margin-left: 5%;
margin-top: 1%;
margin-bottom: auto;
right: 20%;
width: 15%;
padding-right: 25px;
height: 20px;
}
#LoginButtonForUser{ /* This determines the appearance of the log in button. We use ChurchMapped's alternative style scheme for this log in button */
background-color: #FFFFCC;
color: #006600;
border-width: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
#LoginButtonForUser:hover{ /* This determines how the log in button appears when a user hovers their cursor over the button. When the user hovers over the button, it should turn to ChurchMapped's dark scheme' */
background-color: #006600;
color: #FFFFCC;
font-weight: bold;
}
#LogoutButtonForUser{ /* This determines the appearance of the log out button. We use ChurchMapped's alternative style scheme for this log out button. */
background-color: #FFFFCC;
color: #006600;
border-width: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
#LogoutButtonForUser:hover{/* This determines how the log out button appears when a user hovers their cursor over the button. */
background-color: #006600;
color: #FFFFCC;
font-weight: bold;
}
#submitLoginButtonForUser{ /* This determines the appearance of the log in button on the home page (index.html) */
background-color: #FFFFCC;
color: #006600;
border-width: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
#submitLoginButtonForUser:hover{ /* This determines the appearance of the log in button on the home page when a user hovers over it */
background-color: #006600;
color: #FFFFCC;
font-weight: bold;
}
#submitLogoutButtonForUser{
background-color: #FFFFCC;
color: #006600;
border-width: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
#submitLogoutButtonForUser:hover{ /* This determines the appearance of the log out button on the home page when a user hovers over it. */
background-color: #006600;
color: #FFFFCC;
font-weight: bold;
}
#modalBoxForNameLeadingToUserArea{ /* This determines the appearance of the modal box when a user clicks the name leading to the personal area. */
display: none; /* The modal box is hidden by default. */
position: fixed; /* We set the position to fixed so that it continues to be displayed when a user scrolls. */
z-index: 100; /* We set the z-index to something really high so that we can be assured that it remains at the top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto;
background-color: rgb(0,0,0); /* This is the fallback background-color in the event opacity is not supported in the browser */
background-color: rgb(0,0,0,0.4); /* This is black with an opacity of 0.4 */
}
#modalContentForNameLeadingToUserArea{
background-color: #FFFFCC;
margin: auto;
padding: 20px;
border: 1px #006600; /* We use the darker shade of green for the border */
width: 80%;
color: #009900; /* We set the colour of the text to match the standard background of ChurchMapped. */
position: relative;
top: 50%;
}
#modalBoxForNameLeadingToBusinessArea{ /* This determines the appearance of the modal box when a user clicks the name leading to the business area */
display: none; /* The modal box is hidden by default. */
position: fixed; /* We set the position to fixed so that it continues to be displayed when a user scrolls. */
z-index: 100; /* We set the z-index to something really high so that we can be assured that it remains at the top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto;
background-color: rgb(0,0,0); /* This is the fallback background-color in the event opacity is not supported in the browser */
background-color: rgb(0,0,0,0.4); /* This is black with an opacity of 0.4 */
}
#modalContentForNameLeadingToBusinessArea{
background-color: #FFFFCC;
margin: auto;
padding: 20px;
border: 1px #006600; /* We use the darker shade of green for the border */
width: 80%;
color: #009900; /* We set the colour of the text to match the standard background of ChurchMapped. */
position: relative;
top: 50%;
}
.closebutton{
float: right;
}
.closebutton:hover, .closebutton:focus{ /* This determines the appearance of the close button*/
cursor: pointer;
}
#submitLoginButtonForUser{ /* This determines the appearance of the submit button for the log in. We use ChurchMapped's alternative style scheme for this log in button */
background-color: #FFFFCC;
color: #006600;
border-width: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
#submitLoginButtonForUser:hover{ /* This determines how the log in button appears when a user hovers their cursor over the button. When the user hovers over the button, it should turn to ChurchMapped's dark scheme' */
background-color: #006600;
color: #FFFFCC;
font-weight: bold;
}
.marketplaceitemstitle{
color: #FFFFCC;
}
.marketplaceitemstitle:hover{
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
img.marketplaceitems{
max-height: 150px;
max-width: 150px;
}
.marketplacemessageforloggedoutusers{ /* This is the CSS class selector for the message shown to logged-out users and users who have not registered, in place of the basketAdd and basketRemove items. */
background-color: #a5e04d;
color: #006600;
border: none;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
z-index: 2;
padding: 3px;
}
.marketplacemessageforloggedoutusers:hover{
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
/* This segment determines the appearance of the Google Play icon */
img[class~="googleplayicon"]{
width: 5%;
height: 5%;
}
/* This segment determines the appearance of the Apple App Store icon */
img[class~="applestoreicon"]{
margin-left:20px;
width: 10%;
height: 10%;
}
/*This segment determines the appearance of the Amazon AppStore icon */
img[class~="amazonappstoreicon"]{
margin-left:20px;
width: 5%;
height: 5%;
}
/* This segment determines the buttons for the home page, namely, "ChurchMapped Search" as well as "I'm feeling blessed" */
#churchmappedsearchbuttonforhomepage{
background-color: #006600;
color: #FFFFCC;
border: none;
padding: 7px;
margin-left: 5px;
}
#churchmappedsearchbuttonforhomepage:hover, #imfeelingblessedhomepagebutton:hover{ /* This segment determines the appearance of the ChurchMapped Search Button (note: the button, not the search field) and the "I'm Feeling Blessed' button. When the mouse hovers over either of these two buttons, we want the text to pop out. */
font-weight: bold;
}
#imfeelingblessedhomepagebutton{
background-color: #006600;
color: #FFFFCC;
border: none;
padding: 7px;
margin-left: 5px;
}
a[class~="searchresultsfromdropdown"]:link, a[class~="searchresultsfromdropdown"]:active, a[class~="searchresultsfromdropdown"]:hover{
color: #a5e04d;
}
a[class~="searchresultsfromdropdown"]:visited{ /* This is the style that determines the appearance of the next in the navigation bar when the link has been visited. It is a light pink. ***REMOVE THIS COMMENT ON LIVE SERVER.*** */
color: #c567c5;
}
a[class~="searchresultsfromdropdown"]:active{
color:#c567c5;
}
a[class~="searchresultsfromdropdown"]:hover{
font-weight:bold;
}
/* This section determines the appearance of the links and button on the search results page. */
a[class~="textonbuttonforsearchresultspageforchurchmapped"]:link, a[class~="textonbuttonforsearchresultspageforchurchmapped"]:active, a[class~="textonbuttonforsearchresultspageforchurchmapped"]:hover{
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
color: #006600;
}
a[class~="textonbuttonforsearchresultspageforchurchmapped"]:active, a[class~="textonbuttonforsearchresultspageforchurchmapped"]:visited{
color:#c567c5;
}
a[class~="textonbuttonforsearchresultspageforchurchmapped"]:hover{
font-weight: bold;
}
.buttonsforresultsonsearchresultspageforchurchmapped{
background-color: #a5e04d;
color: #006600;
border: none;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
z-index: 2;
padding: 3px;
}
/* This ends the section relating to the appearance of links and buttons on the search */
/* This segment governs the box surrounding the advert of the ChurchMapped advert */
.boxsurroundingchurchmappedmodaladvert{
display: block;
position: fixed; /* We set the position to fixed so that it continues to be displayed when a user scrolls. */
z-index: 100; /* We set the z-index to something really high so that we can be assured that it remains at the top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto;
background-color: rgb(0,0,0); /* This is the fallback background-color in the event opacity is not supported in the browser */
background-color: rgb(0,0,0,0.4); /* This is black with an opacity of 0.4 */
}
.topnavigationbar{
width: 100%;
background-color: #006600;
color: #FFFFCC;
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
height: 5%;
display: inline-block;
}
/* This segment governs the display of area surrounding the modal box of ChurchMapped adverts */
.churchmappedmodaladvert{
background-color: #FFFFCC;
margin: auto;
padding: 20px;
border: 1px #006600; /* We use the darker shade of green for the border */
width: 40%;
color: #009900; /* We set the colour of the text to match the standard background of ChurchMapped. */
position: relative;
top: 20%;
}
/* This determines the appearance of the image within the ChurchMapped modal advert */
img.churchmappedmodaladvert{
width: 60%;
height: 60%;
}
/* This determines the heading within the ChurchMapped modal advert */
h1.churchmappedmodaladvert{
text-align: center;
}
/* This determines the text below the heading within the ChurchMapped modal advert */
h2.churchmappedmodaladvert{
text-align: center;
font-size: 80%;
}
/* This determines the button in the ChurchMapped modal advert that links to the page in question */
button.churchmappedmodaladvert{
background-color: #009900;
color: #FFFFCC;
margin: auto;
}
/* This determines the appearance of the header on the page relating to how much notice should one give for a Catholic wedding? */
h1.howmuchnoticeshouldigiveforcatholicweddingdivarea{
font-size: 120%;
}
.howmuchnoticeshouldigiveforcatholicweddingdivarea{
font-size: 80%;
}
/* This determines the appearance of the header for the description of the church */
h1.descriptionofchurch{
font-size: 120%;
}
.descriptionofchurch{
font-size: 80%;
}
/* This determines the appearance of the information for the church in question. */
h1.informationaboutchurch{
font-size: 120%;
}
.informationaboutchurch{
font-size: 80%;
}