(eg Home) */
/* so need to cope with both */
#topmenu ul li {
font-weight: bold;
font-size: 24px;
color: #FFFFFF; /*#6E6C64; */
padding: 6px 60px 5px 15px; /* was 6 15 5 15 */
display: inline-block;
text-decoration: none;
}
#topmenu ul li a {
color: #FFFFFF; /* for top single items (Home, Contact) */
}
/* sub menu items */
#topmenu ul li ul li{
padding: 6px 15px 5px 15px;
}
#topmenu ul li ul li a {
color: #6E6C64; /* sub menu items */
font-size: 16px;
}
#topmenu ul a:hover {
color: #E0E0E0;
}
#topmenu ul li:hover {
color: #E0E0E0;
}
#topmenu ul a {
text-decoration: none;
}
#topmenu ul li.selected, #topmenu ul li.selected a{
color: #C03333;
background-color: #FFFFFF;
}
/* for toplevels with a selected submenu */
#topmenu ul li.subselected{
color: #C03333;
background-color: #F8F8F8;
}
#topmenu ul li.subselected li a{
color: #6E6C64; /* submenu not selected */
}
#topmenu ul li li a:hover{
color: #C03333; /* submenu hover */
}
#topmenu ul li.subselected li.selected a{
color: #C03333;
background-color: #FFFFFF;
}
/* DROP DOWN TOP LEVEL */
ul.dropdown { position: relative; z-index:10;}
ul.dropdown li:hover { position: relative; }
/* DROPDOWN SUB MENU */
ul.submenu { width: 300px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; }
ul.submenu li { font-weight: normal; background: #f6f6f6; color: #000; width: 100%;
border-bottom: 1px solid #ccc; text-align: left; float: left }
ul.submenu li.selected a{
color: #C03333;
background-color: #C8EDFF;
}
/* IE 6 & 7 Needs Inline Block */
ul.submenu li a { border-right: none; width: 100%; display: inline-block; }
/* ~~ The left sidebar navigation list styles ~~ */
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #C03333;
}
ul.nav li.selected a{
color: #C03333;
background-color: #C8EDFF;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #F8F8F8;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
}
.footerdiv {
width: 100%; /* was 1000, just to centre it, OK ? */
margin: 50px auto 50px;
}
ul.footernav {
list-style: none;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 60px; /* to clear the cookie popup*/
font-size: 100%;
/* width: 95%; /* just to centre it, OK ? */
margin: 0 auto 0;
}
ul.footernav li {
display: inline-block;
border-right: 2px solid #999999;
margin-left: 10px;
margin-right: 10px;
padding-right: 20px;
}
ul.footernav a, ul.footernav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
}
ul.footernav a:hover, ul.footernav a:active, ul.footernav a:focus {
color: #C03333;
}
ul.footernav li.selected a{
color: #C03333;
background-color: #C8EDFF;
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a
or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*HTML5 support - Sets new HTML5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
/* Central column styles, rounded borders and padding to cope with them */
section {
border : 1px #8C2300 solid;
border-radius: 20px;
margin-bottom: 30px;
overflow: hidden;
}
section h3 {
margin-bottom: 0;
padding: 10px;
}
section h4 {
margin-bottom: 0;
padding: 10px;
}
section h5 {
margin-bottom: 0;
padding: 10px;
}
section p {
margin-bottom: 0;
padding: 10px;
}
section table {
margin-left: 10px;
padding-bottom: 10px;
}
.bluebkgd {
/* blue
background-color: #66CCFF;
background-image: linear-gradient(#C8EDFF, #66CCFF);
*/
/* new maroon */
background-color: #8C2300;
background-image: linear-gradient(#DE3D00, #8C2300);
color: white;
}
.ulinebkgd {
/* used for Info headers ? (not maroon) */
border-bottom: 2px solid #CCCCCC;
}
/* col5 styles, all pages the same ? */
#col5 h3, #col5 h4, #col5 h5, #col5 p {
padding-left: 15px;
padding-right: 15px;
}
#col5 h4 {
padding-top: 5px;
margin-bottom: 10px;
}
#col5 p {
padding-top: 10px;
padding-bottom: 10px;
}
/* col 5 links, home page and info page*/
div#col5 p.col5link a {
color: #C03333;
font-weight: bold;
text-decoration: underline;
display: block;
}
div#col5 p.col5link a:hover, div#col5 p.col5link a:active, div#col5 p.col5link a:focus {
color: #FF0000;
text-decoration: underline;
}
/* col5 styles, supporters page */
div#col5.supporters h5 {
font-size: 87.5%;
font-weight: normal;
color: #C03333; /* old red */
}
div#col5.supporters p {
padding-left: 25px;
border-bottom: 1px solid #666666;
margin-bottom: 10px;
}
/* col5 styles, entryform page */
div#col5.entryform h5 {
font-size: 87.5%;
font-weight: bold;
color: #C03333; /* old red */
}
/* Home page 'Reveal' animation DE90 theme */
.revealbox img {
width: 100%; /* to stretch the photos on big screens if necessary */
}
#revealbox1 {
position: fixed;
top: 0;
left: 0;
right: 48%;
bottom: 50%;
z-index: 100;
}
#revealbox1 {
animation-name: reveal1;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal1 {
from { }
to {
transform: scale(0,0);
transform-origin:top left;
}
}
#revealbox2 {
position: fixed;
top: 0;
right: 0;
left: 50%;
bottom: 50%;
z-index: 101;
}
#revealbox2 {
animation-name: reveal2;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal2 {
from { }
to {
transform: scale(0,0);
transform-origin:top right;
}
}
#revealbox3 {
position: fixed;
bottom: 0;
left: 0;
right: 50%;
top: 50%;
z-index: 102;
}
#revealbox3 {
animation-name: reveal3;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal3 {
from { }
to {
transform: scale(0,0);
transform-origin:bottom left;
}
}
#revealbox4 {
position: fixed;
bottom: 0;
right:0;
top: 50%;
left: 50%;
z-index: 104;
}
#revealbox4 {
animation-name: reveal4;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal4 {
from { }
to {
transform: scale(0,0);
transform-origin:bottom right;
}
}
/* -------------Home page de90 theme------------------- */
#homeintro {
margin: 10px auto;
width: 80%;
font-size: 42px;
text-align: center;
}
#homeintro p {
font-size: 21px;
}
#homeintro p.smallfont {
font-size: 16px;
}
#homeimgdiv {
/* for discipline images on home page, esp to fix iPhone ios15.4.1 overlay problem */
margin: 10px auto;
width: 90%;
text-align: center;
vertical-align: top;
}
/* for the 3 discipline images */
.col3img-1 {
display: inline-block; /* was float left but probs on iPhone */
padding: 10px 0;
width: 29%;
margin-right: 3%;
cursor: pointer;
}
/* to solve Safari15.4.1 mis-positioning imgs inside links on iPhones iPads ? 22apr2022 */
.col3img-1 a {
display: block;
}
.col3img-1 img {
width: 100%;
}
.col3img-2 {
display: inline-block; /* was float left but probs on iPhone */
padding: 10px 0;
width: 29%;
margin-right: 3%;
cursor: pointer;
}
/* to solve Safari15.4.1 mis-positioning imgs inside links on iPhones iPads ? 22apr2022 */
.col3img-2 a {
display: block;
}
.col3img-2 img {
width: 100%;
}
.col3img-3 {
display: inline-block; /* was float left but probs on iPhone */
padding: 10px 0;
width: 29%;
margin-right: 0;
cursor: pointer;
}
/* to solve Safari15.4.1 mis-positioning imgs inside links on iPhones iPads ? 22apr2022 */
.col3img-3 a {
display: block;
}
.col3img-3 img {
width: 100%;
}
#homeinfodiv {
clear: both;
width: 100%;
}
#homeinfodiv h2 {
font-size: 32px;
text-align:center;
font-weight:normal;
padding-bottom: 10px;
}
#homeinfocol1 {
border: #8C2300 solid 1px;
width: 30%;
display: inline-block;
padding: 10px;
margin: 0 5px 0 10px;
}
#homeinfocol2 {
border: #8C2300 solid 1px;
width: 32%;
display: inline-block;
padding: 10px;
margin: 0 5px 0 5px;
}
#homeinfocol3 {
border: #8C2300 solid 1px;
width: 30%;
display: inline-block;
padding: 10px;
margin: 0 10px 0 5px;
}
.infotable td {
padding : 5px;
font-size: 18px;
}
.infotable td:first-child {
color: #FF0000;
}
h4.newshdg {
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 0;
color: #FF0000;
font-size: 18px;
font-weight: bold;
}
p.newsdate {
font-size: 75%;
font-style:italic;
padding: 0 10px;
}
section.news p {
padding-top: 0;
padding-bottom: 15px;
}
span.rightjust {
display: block;
text-align: right;
}
ul.classlist {
font-size: 87.5%;
list-style: none;
padding-left: 20px;
}
/* ------------ MSD page and Arts page for de90------------------- */
.fourcol1, .fourcol2, .fourcol3, .fourcol4 {
float: left;
padding: 10px 0;
width: 23%; /* was 228px */
margin-left: 1%;
margin-right: 1%; /* was 15px */
}
.img100 {
/* mainly for arts soc logo on arts page in iPad etc (it didn't reduce in size ) */
width: 100%;
}
/* to solve iOS15.4.1 mis-positioning imgs inside links ? 22apr2022 */
.inlineblockdiv a {
display: block;
}
/* used for Town Council image on supporters page */
.displayblock {
display: block;
}
/* links to class lists, msd page*/
p.col5link a {
color: #C03333;
font-weight: bold;
text-decoration: underline;
display: block;
}
p.col5link a:hover, p.col5link a:active, p.col5link a:focus {
color: #FF0000;
text-decoration: underline;
}
.colhdg {
font-size: 32px;
text-align:center;
font-weight:normal;
padding-bottom: 10px;
}
h4.datehdg {
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 0;
color: #FF0000;
font-weight: bold;
}
/* buttons to Entry pages */
.ellipse {
height: 150px;
width: 100%;
border-radius: 50%;
margin-top: 5px;
padding: 10px;
font-size: 21px;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 2px solid #8C2300;
/* background-image: linear-gradient(#C8EDFF, #66CCFF); */
background-color: #8C2300;
background-image: linear-gradient(#DE3D00, #8C2300);
}
a .ellipse {
color: white;
text-decoration: none;
text-decoration-color: #C03333;
}
a:visited .ellipse {
color: white;
text-decoration: none;
text-decoration-color: #C03333;
}
/*
a.myellipse:visited {
color: #00FF00;
text-decoration: none;
}
*/
a:hover .ellipse {
color: #E0E0E0;
text-decoration: none;
}
.actionbutton {
width: 90%;
border-radius: 30px;
margin: 10px auto 10px;
padding: 10px;
font-size: 21px;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 2px solid #8C2300;
background-color: #8C2300;
background-image: linear-gradient(#DE3D00, #8C2300);
transition: transform .2s; /* Animation on hover */
}
.actionbutton:hover {
transform: scale(1.03); /*expand on hover */
}
/* --------------------- Dance page DE90 theme ------------------------ */
#pageheading {
margin: 10px auto;
width: 80%;
font-size: 42px;
text-align: center;
}
#pageintro {
margin: 10px auto 50px;
width: 80%;
font-size: 21px;
text-align: center;
}
p.smallfont {
font-size: 16px;
}
.pageinfocol1 {
/* 4 col width, should call it ...4 ?*/
float: left;
padding: 1%;
width: 20%; /* was 228px */
margin-left: 1%;
margin-right: 1%; /* was 15px */
}
/* 2 col width */
.pageinfocol2 {
float: left;
padding: 1%;
width: 45%;
margin-left: 1%;
margin-right: 1%;
}
/* 3 col width */
.pageinfocol3 {
float: left;
padding: 1%;
width: 29%;
margin-left: 1%;
margin-right: 1%;
}
/* to add border to infocols above if needed */
.border {
border: #8C2300 solid 1px;
}
#col234dance {
float: left;
width: 72%; /* was 714 = 744 - 15px on either side */
margin-top: 0px; /* was 166px before strapline */
margin-right: 1%;
margin-left: 1%;
padding-top: 15px;
}
/* new for accordions */
/* list of dance classes , 3 columns */
#dancepage-classesdiv {
column-count: 3;
}
#dancepage-rulesdiv {
}
#dancepage-resultsdiv {
margin-top: 30px;
}
#dancepage-entriesdiv {
/* this one needs to be hidden because read in using include, display later */
display:none;
}
/* music upload accordion on dance page */
table.entryupload td {
font-size: 18px;
padding: 5px;
vertical-align:middle;
}
/* Partnership page de90 */
ul.partnerbenefits {
list-style-type: disc;
font-size: 16px;
margin: 20px;
padding: 10px;
}
ul.partnerbenefits li {
padding: 5px 10px 5px;
}
/* new 4aug2026 becuse partner images suddenly gone huge ! */
.pageinfocol2 figure.size-full img{
width: 90%;
}
/* for partner adverts (Is this used now (jun2023) ?)*/
#col234partners {
float: left;
width: 63%;
margin-top: 0px;
margin-right: 10px;
margin-left: 10px;
padding: 0 10px 10px 10px;
}
/* ------------ Info page ---------- */
/* dates */
.imptdates h5 {
font-size: 87.5%;
font-weight: bold;
color: #C03333; /* old red */
}
.imptdates p {
padding-left: 20px;
padding-top: 0px;
}
.imptdates p.last {
border-bottom: solid thin #999999;
margin-bottom: 0px;
}
/* info page venues */
/* not a list because that can get corrupted when editing in WP editor */
.venue h4 {
font-size: 87.5%;
padding-bottom: 0px;
}
.venue h5 {
font-size: 87.5%;
font-weight: bold;
color: #C03333;
padding-bottom: 3px;
padding-left: 28px;
text-indent: -18px;
}
.venue h5.blue {
color: #699BF2;
}
.venue p {
padding-left: 28px;
padding-top: 0px;
}
#googlemapdiv {
width: 100%; /* was 350px; */
height: auto; /* was 350px; */
}
/*----------------- Entry form pages ------------------------ */
/* bigger text to match the form */
#col234entryform p {
font-size: 100%;
padding: 10px;
}
/* put box around top instructions */
#col234entryform .boxed {
border: 1px solid red;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
}
/* draggable, resizable div for classlist */
#classlistdiv {
position: absolute;
top: 167px;
right: 220px;
width: 160px;
height: 260px;
border: 1px solid #CCCCCC;
border-radius: 5px;
background-color: #F0F0F0;
padding: 10px;
}
/* widen button */
.wideformbutton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#wideformspan {
vertical-align: middle;
}
.showhidebutton {
background-color: #4D7AFF;
border: none;
border-radius: 8px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input[type="text"], input[type="tel"], input[type="email"] {
font-size: 16px;
font-weight: 400;
line-height: 1.3;
padding: 6px;
color: #333333;
}
.deletebuttoncell {
cursor:pointer;
}
.deletebuttoncell:hover {
transform: scale(1.1);
}
/* colour all bits user has to fill in blue */
#agedeclarationpara {
background-color: #C8EDFF;
}
/* programmes form */
#programmesform {
background-color: #C8EDFF;
}
/* programmes para */
#programmestable td {
font-size: 16px;
padding: 10px;
vertical-align:middle;
}
/* number input (programmes) doesn't accept size param, so size it here */
#programmes {
width: 3em;
}
.field-label {
display: inline-block;
/* width: 10%; */
}
.required-label {
color: red;
}
.red {
color: red
}
.orange {
color: orange;
}
.smallh2 {
font-size: 16px;
font-weight: normal;
}
.validationerror {
border: 2px solid red;
}
#errorbox, #uploaderrorbox {
border: 2px solid red;
}
/* Specific to MSD (Music, Speech, Drama) entry form page */
#entrytable {
border : 1px solid #000000;
border-collapse: collapse;
empty-cells: show;
table-layout:fixed;
width: 100%;
background-color: #C8EDFF;
}
#entrytable th {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
font-weight: normal;
}
#entrytable td {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
}
#entrytable .namecol {
width: 20%;
}
#entrytable .vouchercol {
width: 5%;
}
#entrytable .vouchercell {
text-align: center;
padding-top: 16px;
line-height: 1.3;
}
#entrytable .classnumcol {
width: 10%;
}
#entrytable .classnamecol {
width: 15%;
}
#entrytable .classagecol {
width: 10%;
}
#entrytable .instrumentcol {
width: 12%;
}
#entrytable .accompcol {
width: 10%;
}
#entrytable .pricecol {
width: 8%;
}
#entrytable .deletecol {
width: 8%;
}
.nameinput, .classnumberinput, .instrumentinput {
width: 95%; /* of cell ? */
}
#showmsdclassesbutton {
margin-right: 20px;
}
/* checkboxes filtering classlist */
.classcheckbox {
margin-right: 10px;
}
/* list of msd and dance classes , hidden to start with */
#msdclasslist, #danceclasslist {
display:none;
column-count: 3;
font-size: 87.5%;
}
/* hide beginnersworkshop para unless needed */
#beginnersworkshoppara {
display: none;
}
/* hide accompanist para unless accomp requested */
#accompanistpara {
display: none;
}
/* msd entry page forms */
#personform, #partnerform {
background-color: #C8EDFF;
}
#ponumber {
margin-top: 10px;
}
.vertcentre {
vertical-align:middle;
}
.addMSDRowButton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 4px 30px 2px 5px;
cursor: pointer;
}
.msdclassesdiv {
display: flex; /* use flex here to get vertical align of buttons and text */
align-items:center;
}
.showclassesbutton {
background-color: #4D7AFF;
border: none;
border-radius: 8px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submitMSDButton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* ************ Specific to Dance entry form page************* */
#showhidemaininstructionsbutton {
margin: 4px 10px 10px 2px;
float: right;
}
/* list of dance classes in sidebar */
#danceclasslist {
display:none;
}
/* danceperformer form */
#danceperformerform {
background-color: #C8EDFF;
}
#danceperformertable {
border : 1px solid #000000;
border-collapse: collapse;
empty-cells: show;
table-layout:fixed;
width: 100%;
background-color: #C8EDFF;
}
#danceperformertable th {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
font-weight: normal;
}
#danceperformertable td {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
}
#danceperformertable .classnamecol {
width: 50%;
}
#danceperformertable .classneedscol {
width: 40%;
}
#danceentrytable {
border : 1px solid #000000;
border-collapse: collapse;
empty-cells: show;
table-layout:fixed;
width: 100%;
background-color: #C8EDFF;
}
#danceentrytable th {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 16px; /* was 14 */
font-weight: normal;
}
#danceentrytable td {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 16px; /* was 14 */
}
#danceentrytable .classnumcol {
width: 10%;
}
#danceentrytable .classnamecol {
width: 25%;
}
#danceentrytable .partnercol {
width: 45%;
}
#danceentrytable .pricecol {
width: 10%;
}
#danceentrytable .deletecol {
width: 10%;
}
.classnumberinput {
width: 95%; /* of cell ? */
}
.classpartnerinput {
width: 95%; /* of cell ? */
}
#dancewarningtable {
padding : 10px;
height: 30px;
width: 95%;
font-size: 16px; /* was 14 */
}
#danceentrywarning {
width: 60%;
padding: 10px;
text-align:center;
}
.adddancerowbutton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 10px 2px 4px;
cursor: pointer;
}
#submitDanceButton, #anotherEntryButton,
#anotherMSDEntryButton, #anotherDanceEntryButton, #anotherArtsEntryButton,
#mainPageButton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#mainPageButton {
background-color: #999999;
border: none;
border-radius: 10px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#danceaddressdiv {
}
#detailsrecorded {
border: 1px black solid;
margin-bottom: 15px;
}
/* for Dance Music Upload items */
#danceuploaddiv {
width: 100%; /* was 714 = 744 - 15px on either side */
margin-top: 0px; /* was 166px before strapline */
margin-right: 10px;
margin-left: 10px;
padding-top: 15px;
z-index: 10;
}
/* put box around info text */
#danceuploaddiv .boxed {
margin: 10px auto 10px;
width: 90%;
border: 1px solid red;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
}
p.uploadheading {
font-size: 125%;
margin-left: 2.5%;
padding-top: 20px;
padding-bottom: 20px;
}
p.uploadpara {
padding-top: 20px;
}
#danceuploadtable {
width: 95%;
margin: 10px auto 10px;
border : 1px solid #000000;
border-collapse: collapse;
empty-cells: show;
table-layout:fixed;
background-color: #F0F0F0;
}
#danceuploadtable th {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px; /* was 14 */
font-weight: normal;
}
#danceuploadtable td {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px; /* was 16 */
}
.shortmusicinput {
width: 90%; /* of cell ? */
}
.danceajaxresponse {
font-size: 12px;
}
.responsegreen {
background-color: #98D09C;
}
.responsered {
background-color: #E00000;
}
/*
#danceuploadtable .namecol {
width: 20%;
}
#danceuploadtable .classcol {
width: 20%;
}
#danceuploadtable .shortmusiccol {
width: 20%;
}
*/
.uploadbutton {
background-color: #98D09C;
border: none;
border-radius: 8px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
/* Specific to Creative Arts entry form page ************ */
#artsentrytable {
border : 1px solid #000000;
border-collapse: collapse;
empty-cells: show;
table-layout:fixed;
width: 100%;
background-color: #C8EDFF;
}
#artsentrytable th {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
font-weight: normal;
}
#artsentrytable td {
border : 1px solid #000000;
padding : 10px;
height: 30px;
font-size: 14px;
}
#artsentrytable .itemcol {
width: 8%;
}
#artsentrytable .namecol {
width: 20%;
}
#artsentrytable .vouchercol {
width: 5%;
}
#artsentrytable .vouchercell {
text-align: center;
padding-top: 16px;
line-height: 1.3;
}
#artsentrytable .classnumcol {
width: 10%;
}
#artsentrytable .classnamecol {
width: 15%;
}
#artsentrytable .classagecol {
width: 10%;
}
#artsentrytable .pricecol {
width: 8%;
}
#artsentrytable .deletecol {
width: 8%;
}
.nameinput, .classnumberinput, .instrumentinput {
width: 95%; /* of cell ? */
}
/* list of classes , hidden to start with, 3 columns */
#artsclasslist {
display:none;
column-count: 3;
font-size: 87.5%;
}
/* msd entry page forms - duplications ?*/
#personform, #partnerform {
background-color: #C8EDFF;
}
#partnerorgspan {
vertical-align:middle;
}
.addArtsRowButton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 30px 2px 5px;
cursor: pointer;
}
#numbernewrows {
width: 4em;
margin-left: 1em;
margin-right: 3em;
}
.artsclassesdiv {
display: flex; /* use flex here to get vertical align of buttons and text */
align-items:center;
}
#pastenamesbutton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 5px 2px 30px;
cursor: pointer;
}
#submitArtsButton {
background-color: #4D7AFF;
border: none;
border-radius: 10px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
/* ------- holding page, replacing entryformpage while entries closed ---- */
#col234holding {
float: left;
/* width: 714px; /* 744, - 15px on either side */
margin-top: 166px; /* was 124 */
margin-right: 15px;
margin-left: 0px;
padding-top: 15px;
z-index: 10;
}
/* put box around text */
#col234holding .boxed {
border: 1px solid red;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
}
#nextyeartable {
border : none;
padding: 10px;
font-size: 100%;
}
#nextyeartable td {
border : none;
padding: 10px;
font-size: 100%;
}
/* ------------- supporters page --------------------- */
table.committeetable td {
padding: 3px 3px 3px;
vertical-align:top;
}
ul.friendslist {
list-style:none;
padding-left: 30px;
}
ul.supporterlist {
font-size: 75%;
padding-left: 30px;
}
/* for corporate member images */
p.nosidepadding {
padding: 10px 0;
text-align: center;
}
/* rules page */
.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:20px;
}
.accordion-section-title {
/* white titles on policy page ?*/
width: 98%;
padding: 10px 0;
display:inline-block;
/*border : 1px #66CCFF solid;*/
/*border-radius: 20px 20px 0 0; */
/* overflow: hidden; */
/* border-bottom:1px solid #1a1a1a; */
/*background-color: #66CCFF;
background-image: linear-gradient(#C8EDFF, #66CCFF);
*/
/*transition:all linear 0.15s; */
/* Type
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff; */
}
/* red titles on dance page */
a.accord-red {
height: 60px;
border-radius: 30px;
margin: 5px;
padding: 10px 30px;
font-size: 32px;
color: white;
text-decoration: none;
cursor: pointer;
border: 2px solid #8C2300;
background-color: #8C2300;
background-image: linear-gradient(#DE3D00, #8C2300);
}
a.accordion-section-title {
text-decoration: none;
}
.arrowpic {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.accordion-section-title.active, .accordion-section-title:hover {
/*
background-color: #3399FF;
background-image: linear-gradient(#66CCFF, #3399FF);
*/
/* Type */
text-decoration:none;
}
.accordion-section:first-child .accordion-section-title {
border-bottom: 1px solid #CCCCCC;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Accordion Section Content -----*/
#col2plusrules section, #col3plusrules section {
border : 1px #66CCFF solid;
border-radius: 10px;
margin-bottom: 30px;
overflow: hidden;
}
.accordion-section-content {
padding:0px;
display:none;
}
.accordion-section-content ul {
margin-left: 25px;
padding-right: 10px;
font-size: 87.5%;
}
/* ycw page */
ul.ycwlist {
font-size: 87.5%;
padding-left: 30px;
}
table.ycwrules td {
vertical-align:top;
}
/* -------------- Contact Form --------------- */
div#wpforms-1393 {
padding-left: 10px;
padding-right: 10px;
font-size: 87.5%;
}
.wpforms-field-label {
font-weight: 400 !important;
}
.fscf-div-field {
margin-bottom: 20px;
}
.fscf-div-submit {
margin-top: 10px;
}
.fscf-div-error {
color: #FF0000;
}
#wpforms-1393 p {
padding: 0 !important; /* plugin creates s when errors */
}
/* (big) map page --------------- */
#bigmapdiv {
width : 1200px;
height: 800px;
}
/* for image in Musical Theatre page,could use elsewhere in col2plus ? 13feb20 */
.adimg {
width: 100%;
}
/* for young writers page, but could use elsewhere */
.centred {
text-align: center;
}
/* *********************** Results page ***************** */
#danceclassnamespan, #msdclassnamespan, #artsclassnamespan {
vertical-align: middle;
}
#resultsdiv {
padding-left: 10px;
}
table.resultstable {
border: #CCCCCC thin solid;
background-color: #F0F0F0;
}
.resultstable th {
padding: 5px 10px;
font-weight: bold;
border: #CCCCCC thin solid;
}
.resultstable td {
padding: 5px 10px;
border: #CCCCCC thin solid;
}
.resultstable td.centred {
text-align: center;
}
.resultstable tr.winner td, .resultstable td.winner {
color: red;
font-weight: bold;
}
.resultstable tr.runnerup td, .resultstable td.runnerup {
color: blue;
font-weight: bold;
}
/* result buttons */
.resultbutton {
background-color: #6898FF;
border: none;
border-radius: 10px;
color: white !important;
padding: 5px 20px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.resultinstructions {
padding-top: 0;
font-size: 12px;
font-style: italic;
vertical-align: middle; /* for spans */
}
#printResultsButton {
float: right;
}
#showhideselectionoptionsbutton {
background-color: #C0C0C0;
margin-bottom: 20px;
margin-left: 10px;
padding: 5px 20px;
}
/* put box around top instructions */
#col234results .boxed {
border: 1px solid red;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
}
/* layout for tablets. <= 1199px */
/* '4 column' */
/* full content plus right sidebar, but not left menu */
@media screen and (max-width: 74.9375em) {
.container {
width: 100%;
}
#col1 {
display: none;
}
#col2 {
margin-top: 0;
margin-left: 2%;
margin-right: 0%;
width: 22.5%;
}
#col3 {
margin-top: 0;
margin-left: 2%;
margin-right: 0%;
width: 22.5%;
}
#col4 {
margin-top: 0;
margin-left: 2%;
margin-right: 2%;
width: 22.5%;
}
#col2plus{
margin-top: 0;
margin-left: 3%;
margin-right: 0%;
width: 35%;
}
#col3plus{
margin-top: 0;
margin-left: 3%;
margin-right: 3%;
width: 35%;
}
#col5 {
margin-top: 0;
width: 20%;
height: auto !important; /* impt to override JS column ht calc */
}
#col234holding {
float: none;
text-align: center; /* to center the boxed div, but not very elegant */
margin-top: 0;
margin-left: 10px;
}
#col234holding div.boxed {
display: inline-block; /* to shrink to content */
}
#col234rules, #col234entryform, #col234results {
float: left;
width: 73%; /* col5 is 20% */
margin-top: 0px;
margin-right: 1%;
margin-left: 1%;
}
header img {
width: 100%;
}
#homephotodiv { /* slider */
position: static;
width: 100%;
height: auto;
}
#infophotodiv { /* and used on other 'normal' pages */
position: static; /* top, left etc have no effect */
width: 100%;
height: auto;
}
#homestrapline {
position: static;
width: 100%;
height: auto;
}
#strapline {
position: static;
width: 100%;
height: auto;
}
.header-right { /* page name */
position: absolute; /* relative to container, better if rel to header ? */
display: inline-block;
top: 10%;
right: 10px; /* needs to be more flexible ? */
margin-top: 0;
padding-right: 0;
z-index: 100;
font-size: 12px;
line-height: 1.0;
}
/* slightly narrower topmenu so no overflow till 955px breakpoint */
#topmenu ul li {
padding: 6px 30px 5px 15px;
}
#topmenu ul a {
padding: 6px 15px 5px 15px;
}
}
/* layout for phones landscape. <= 955px */
/* "2 columns" */
/* not done yet, mostly copied from above */
@media screen and (max-width: 59.6875em) {
.container {
width: 100%;
}
#col1 {
display: none;
}
#col2 {
float: left;
margin-top: 0;
margin-left: 3%;
margin-right: 0%;
width: 45%;
}
#col3 {
float: left;
margin-top: 0;
margin-left: 3%;
margin-right: 0%;
width: 45%;
}
#col4 {
clear: both; /* to force #col4 (facebook) below #col2 */
float: left;
margin-top: 0;
margin-left: 3%;
margin-right: 0%;
width: 45%;
}
#col2plus{
float:left;
margin-top: 0;
margin-left: 3%;
margin-right: 0%;
width: 45%;
}
#col3plus{
float: left;
margin-top: 0;
margin-left: 3%;
margin-right: 3%;
width: 45%;
}
#col5 {
/* display: none; /* just for now, eventually needs to be below col2,3,4 ? */
display: block; /* because hidden for now in phone layout */
margin-top: 0;
float: left; /* was none; */
width: 45%;
margin-left: 3%;
margin-right: 0%;
height: auto !important; /* impt to override JS column ht calc */
}
#col234rules, #col234entryform, #col234results {
float: left;
width: 98%;
margin-top: 0px;
margin-right: 1%;
margin-left: 1%;
}
/* remove wideform button, can't go any wider */
.wideformbutton {
display: none;
}
#wideformspan {
display: none;
}
header img {
width: 100%;
}
#topmenu {
height: auto; /* allow for 2nd row in topmenu */
line-height: 32px; /* for touchscreens */
}
#homephotodiv { /* slider */
position: static;
width: 100%;
height: auto;
}
#homeintro p {
font-size: 18px; /* cf 21 full size */
}
#homeinfocol1, #homeinfocol2, #homeinfocol3 {
width: 45%; /* two cols not 3 here */
padding: 5px;
margin: 5px;
}
.fourcol1, .fourcol2, .fourcol3, .fourcol4 {
width: 47%;
margin-left: 1%;
margin-right: 1px;
}
.pageinfocol1, .pageinfocol3 {
/* for Calendar etc on Dance page, make it full width to push dance accordion below */
width: 95%;
}
#col234dance {
/* and dance accordions full width too */
width: 95%;
}
#infophotodiv { /* and used on other 'normal' pages */
position: static; /* top, left etc have no effect */
width: 100%;
height: auto;
}
#homestrapline {
position: static;
width: 100%;
height: auto;
}
#strapline {
position: static;
width: 100%;
height: auto;
}
.header-right { /* page name */
position: absolute; /* relative to container, better if rel to header ? */
display: inline-block;
top: 10%;
right: 10px; /* needs to be more flexible ? */
margin-top: 0;
padding-right: 0;
z-index: 100;
font-size: 12px;
line-height: 1.0;
}
/* footer */
.footerdiv {
width: 93%; /* to match col width above */
}
ul.footernav li {
border-right: none;
margin-left: 10px;
margin-right: 10px;
padding-right: 0px;
}
/* supporters page */
img.attachment-corporate-member {
display: block;
width: 100%;
max-width: 348px;
height: auto;
margin: 0 auto 0;
}
}
/* layout for mobiles portrait. <= 485px */
/* single column for everything, hamburger menu */
@media screen and (max-width: 30.3125em) {
#col2, #col3, #col4, #col2plus, #col3plus, #col5 {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
/* make homeslider not too big */
#homephotodiv {
height: 160px;
overflow: hidden;
}
/* v9 classes etc */
#homeinfocol1, #homeinfocol2, #homeinfocol3 {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
.fourcol1, .fourcol2, .fourcol3, .fourcol4 {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
.pageinfocol1 {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
#col234dance {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
#col5 {
display: block; /* because hidden for now in phone layout */
margin-top: 0;
height: auto !important; /* impt to override JS column ht calc */
}
/* hide history section on phone layouts, to save space */
section.history {
display: none;
}
/* Home page 'Reveal' animation DE90 theme */
/* trying to cover the whole screen, in all portrait sizes */
.revealbox img {
width: 100%; /* to stretch the photos on big screens if necessary */
}
#revealbox1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
#revealbox1 {
animation-name: reveal1;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal1 {
from { }
to {
transform: scale(0,0);
transform-origin:top left;
}
}
#revealbox2 {
display: none;
/*
position: fixed;
top: 100px;
right: 0;
width: 100%;
z-index: 101;
*/
}
#revealbox2 {
animation-name: reveal2;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal2 {
from { }
to {
transform: scale(0,0);
transform-origin:top right;
}
}
#revealbox3 {
position: fixed;
top: 45%; /* to prevent gap in middle of screen */
right: 0;
width: 100%;
z-index: 102;
}
#revealbox3 {
animation-name: reveal3;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal3 {
from { }
to {
transform: scale(0,0);
transform-origin:bottom right;
}
}
#revealbox4 {
display: none;
/*
position: fixed;
bottom: 0;
right:0;
width: 100%;
z-index: 104;
*/
}
#revealbox4 {
animation-name: reveal4;
animation-delay: 2s;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes reveal4 {
from { }
to {
transform: scale(0,0);
transform-origin:bottom right;
}
}
/* hamburger menu */
#hamburger {
/*position: absolute; /* relative to header ? */
position: static;
display: block;
text-align: left;
padding-left: 20px;
z-index: 100;
cursor: pointer;
}
#hamburger .icon {
font-size: 24px; /* big enough ? */
line-height: 32px;
}
#hamburger .text {
font-size: 14px;
vertical-align: middle;
line-height: 32px;
}
/* ~~ The top menu navigation list styles mobile screen ~~ */
/* layout vertical but off screen left until hamburger pressed, when slide on */
#topmenu {
position: absolute;
top: 100px;
left: -240px; /* off screen initially */
width: 240px;
height: auto;
line-height: 32px;
background-color: #F8F8F8;
border: 1px solid #666666;
z-index: 100; /* to be above slider */
}
#topmenu ul {
list-style: none;
text-align: left;
width: 238px;
}
#topmenu ul li {
display: block;
padding-top: 0;
}
#topmenu ul li.selected {
color: #C03333;
background-color: #C8EDFF;
}
/* move submenu right, so can still access topmenu items underneath*/
#topmenu ul.submenu {
left: 80px;
width: 300px;
}
/* font sizes */
/* p on laptop is 87.5% (14px), too small on phone ?*/
p {
font-size: 112.5%; /* 18px */
}
/* classlist on home page */
ul.classlist {
font-size: 100%; /* 16px */
}
/* adjudicators and committee */
#col2plus table {
font-size: 100%; /* 16px */
}
/* info page */
table.committeetable td {
padding: 5px 0 5px;
vertical-align:bottom;
}
/* entry page */
#col234entryform {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
.wideformbutton {
display: none;
}
#wideformspan {
display: none;
}
/* Results page */
#col234results {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
#resultsdiv {
overflow-x: scroll;
}
table.resultstable th {
padding-left: 5px;
padding-right: 5px;
}
table.resultstable td {
padding-left: 5px;
padding-right: 5px;
}
/* dance page */
#dancepage-classesdiv {
column-count: 2;
}
/* partnership page */
.pageinfocol2 {
width: 95%; /* make it 1 col wide */
}
/* supporters page */
img.attachment-corporate-member {
display: block;
width: 100%;
max-width: 348px;
height: auto;
margin: 0 auto 0;
}
/* Rules page */
#col234rules {
float: none;
width: 90%;
margin-top: 0;
margin-left: 5%;
margin-right: 5%;
}
#col2plusrules, #col3plusrules {
float: none;
padding: 10px 0;
width: 90%;
margin-top: 0px; /* no photos */
margin-left: 5%;
margin-right: 5%;
}
.accordion-section-title {
width:100%;
}
/* Photo page */
#col234photo {
float: none;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
}
/* footer */
ul.footernav li {
border-right: none;
border-top: 2px solid #999999;
margin-top: 10px;
}
}
/* this is only (?) used for printResults */
@media print {
header, footer {
display: none;
}
#topmenu, #hamburger, #sidebar, #infophotodiv {
display: none;
}
#strapline, #col5 {
display: none;
}
#cookie-notice {
display:none;
}
section.selectresults {
display: none;
}
h3.bluebkgd {
font-size: 20px;
color: black;
background-image: none;
background-color: transparent;
}
h3.bluebkgd::before {
content: "DEVIZES EISTEDDFOD \A";
white-space: pre;
font-weight: bold;
font-size: 24px;
}
section {
border: none;
}
/* and also need to hide these for print DANCE results */
#pageheading, #pageintro {
display: none;
}
.pageinfocol1, p.smallfont {
display: none;
}
.accordion-section a {
display: none; /* all the accordion headings */
}
/* and widen the results as much as poss */
#col234results {
margin-top: 0;
width: 95%;
}
}