/* Style sheet for Breakout2020 */

body {
  width: 100%;
  background-color: rgb(217,240,255);
}

#login {
  position: relative;
  left: 0px;
  top: 0px;
}

* {
    box-sizing: border-box; /* This means when a box size is defined, it is the box plus margin plus border */
}

#blankbox {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  border: none;
}

.tfquiz {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.filltext {
  display: inline;
}

/* BANNER AND MENUBAR INITIAL SETTINGS */

#banner {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: RGB(180,230,255);
}

#menubar {

  position: relative;
  left: 0;
  top: 50;/*was 180px*/
  width: 100%;
  height: 50px;
  background-color: RGB(230,230,255);
}

#URC {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 80px;
  
}

#MCL {
  position: absolute;
  left: 90px;
  top: 0px;
  height: 80px; 
}

#FB {
  position: absolute;
  left: 180px;
  top: 0px;
  height: 80px; 
}

#SiteTitle {
	position: absolute;
	left: 35%;
	top: 0px;
	width: 40%;
}

#churchimage {
  position: absolute;
  right: 0%;
  top: 0;
  height: 100px;
}

/* BANNER AND MENUBAR End

Important!  Note that the above items' size and position are changed by the MODE settings further below!!! */

#clubname {

}

.craftpictures {
  width: 90%;
  margin-left: 5%;
}

#quiz1 {
  width: 300px;
 
}

.fbshow {
  display: inline;
  font-weight: bold;
  color: green;
}

.fberror {
  display: inline;
  text-decoration: line-through;
  font-weight: bold;
  color: red;
}

.fbanswer {
  display: inline;
  font-weight: bold;
  color: blue;
}

#homebutton {
  position: absolute;
  left: 40%;
  top:  80px;
  width: 110px;
  height: 30px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  background-color: RGB(255,240,225);
  border: solid;
  border-color: RGB(80,50,0);
  border-width: 1px;
  border-radius: 5px;
  
}

#homebuttontexta {
  text-align: center;
  font-weight: bold;
  font-size: 14pt;
}

#breakoutbutton {
  position: static;
  display: inline-block;
  width: 150px;
  height: 30px;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  background-color: RGB(255,240,225);
  border: solid;
  border-color: RGB(80,50,0);
  border-width: 1px;
  border-radius: 5px;
  
}

#breakoutbuttontexta {
  text-align: center;
  font-weight: bold;
  font-size: 14pt;
}

.normimage {
  margin-top: 5%;
  margin-bottom: 0%;
  margin-left: 5%;
  margin-right: 5%;

}

#jenny{
	width: 50%;
	float: right;
}

span.pagelink1 {
  font-size: 30px;
 
}

.smallimage {

  margin-left: 35%;
}

.DDS {
	text-align: center;
}

.center {
	
	display: block;
	width: 35%;
	margin-left: auto;
	margin-right: auto;
	}
	
.centerSA {
	
	margin-left: auto;
	margin-right: auto;
	}

#slideshowcontainer1 {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 250px;
}

#breakoutslideshowcontainer1 {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;


}

#HCSlideShow {
text-align: center;
margin: auto;

}

#HCBack {
position: static;
width: 100%
}

#HCSlide0 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

#HCSlide1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

#OASlide0 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

#OASlide1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}


#HCSlideframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

/* Resolution Reactive Columns Definitions */

/*    MODE ONE - less than 600px Portrait   */

@media only screen and (max-width: 599px) and (orientation: portrait) {
.col-sp-1 {width: 8.33%;}
.col-sp-2 {width: 16.66%;}
.col-sp-3 {width: 25%;}
.col-sp-4 {width: 33.33%;}
.col-sp-5 {width: 41.66%;}
.col-sp-6 {width: 50%;}
.col-sp-7 {width: 58.33%;}
.col-sp-8 {width: 66.66%;}
.col-sp-9 {width: 75%;}
.col-sp-10 {width: 83.33%;}
.col-sp-11 {width: 91.66%;}
.col-sp-12 {width: 99%;}

#banner {
	height: 60px;
}

#menubar {
	top: 0px;
	height: 30px;
}

#URC {
	left: 0;
	height: 50px;
}

#MCL {
	left: 12%;
	height: 50px;
}

#FB {
	left: 24%;
	height: 50px;
}

#SiteTitle {
	left: 40%;
	width: 40%;
}

#churchimage {
	height: 50px;
}

#breakoutbutton {
  top: 30px;
}

#breakoutbuttontexta {
  font-size: 11pt;
}

#slideshowcontainer1 {
  height: 230px;
}

.shrinklink {
  font-size: 8pt;
}

}
/*    MODE TWO - less than 600px Landscape   */


@media only screen and (max-width: 599px) and (orientation: landscape) {
.col-sl-1 {width: 8.33%;}
.col-sl-2 {width: 16.66%;}
.col-sl-3 {width: 25%;}
.col-sl-4 {width: 33.33%;}
.col-sl-5 {width: 41.66%;}
.col-sl-6 {width: 50%;}
.col-sl-7 {width: 58.33%;}
.col-sl-8 {width: 66.66%;}
.col-sl-9 {width: 75%;}
.col-sl-10 {width: 83.33%;}
.col-sl-11 {width: 91.66%;}
.col-sl-12 {width: 100%;}

#banner {
	height: 60px;
}

#menubar {
	top: 0px;
	height: 30px;
}

#URC {
	left: 0;
	height: 50px;
}

#MCL {
	left: 12%;
	height: 50px;
}

#FB {
	left: 24%;
	height: 50px;
}

#SiteTitle {
	left: 40%;
	width: 40%;
}

#churchimage {
	height: 50px;
}


#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 40%;
}

#breakoutbutton {
  top: 30px;
}

#breakoutbuttontexta {
  font-size: 11pt;
}

#slideshowcontainer1 {
  height: 230px;
}

}

/*    MODE THREE - Between 600px and 800px Portrait   */


@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
.col-mp-1 {width: 8.33%;}
.col-mp-2 {width: 16.66%;}
.col-mp-3 {width: 25%;}
.col-mp-4 {width: 33.33%;}
.col-mp-5 {width: 41.66%;}
.col-mp-6 {width: 50%;}
.col-mp-7 {width: 58.33%;}
.col-mp-8 {width: 66.66%;}
.col-mp-9 {width: 75%;}
.col-mp-10 {width: 83.33%;}
.col-mp-11 {width: 91.66%;}
.col-mp-12 {width: 100%;}

#banner {
	height: 70px;
}

#menubar {
	top: 0px;
	height: 35px;
}

#URC {
	left: 0;
	height: 60px;
}

#MCL {
	left: 10%;
	height: 60px;
}

#FB {
	left: 20%;
	height: 60px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 60px;
}

#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 35%;
}

#breakoutbutton {
  top: 35px;
}

#breakoutbuttontexta {
  font-size: 12pt;
}

#slideshowcontainer1 {
  height: 200px;
}

}

/*    MODE FOUR - between 600px and 800px Landscape   */


@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation: landscape) {
.col-ml-1 {width: 8.33%;}
.col-ml-2 {width: 16.66%;}
.col-ml-3 {width: 25%;}
.col-ml-4 {width: 33.33%;}
.col-ml-5 {width: 41.66%;}
.col-ml-6 {width: 50%;}
.col-ml-7 {width: 58.33%;}
.col-ml-8 {width: 66.66%;}
.col-ml-9 {width: 75%;}
.col-ml-10 {width: 83.33%;}
.col-ml-11 {width: 91.66%;}
.col-ml-12 {width: 100%;}

#banner {
	height: 70px;
}

#menubar {
	top: 0px;
	height: 35px;
}

#URC {
	left: 0;
	height: 60px;
}

#MCL {
	left: 10%;
	height: 60px;
}

#FB {
	left: 20%;
	height: 60px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 60px;
}


#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 35%;

}

#breakoutbutton {
  top: 35px;
}

#breakoutbuttontexta {
  font-size: 12pt;
}

#slideshowcontainer1 {
  height: 200px;
}

}

/*    MODE FIVE - between 800px and 1100px Portrait   */


@media only screen and (min-width: 800px) and (max-width: 1099px) and (orientation: portrait) {
.col-lp-1 {width: 8.33%;}
.col-lp-2 {width: 16.66%;}
.col-lp-3 {width: 25%;}
.col-lp-4 {width: 33.33%;}
.col-lp-5 {width: 41.66%;}
.col-lp-6 {width: 50%;}
.col-lp-7 {width: 58.33%;}
.col-lp-8 {width: 66.66%;}
.col-lp-9 {width: 75%;}
.col-lp-10 {width: 83.33%;}
.col-lp-11 {width: 91.66%;}
.col-lp-12 {width: 100%;}

#banner {
	height: 90px;
}

#menubar {
	top: 0px;
	height: 45px;
}

#URC {
	left: 0;
	height: 80px;
}

#MCL {
	left: 10%;
	height: 80px;
}

#FB {
	left: 20%;
	height: 80px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 80px;
}


#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 32%;
}

#breakoutbutton {
  top: 45px;
}

#slideshowcontainer1 {
  height: 170px;
}

}

/*    MODE SIX - between 800px and 1100px Landscape   */


@media only screen and (min-width: 800px) and (max-width: 1099px) and (orientation: landscape) {
.col-ll-1 {width: 8.33%;}
.col-ll-2 {width: 16.66%;}
.col-ll-3 {width: 25%;}
.col-ll-4 {width: 33.33%;}
.col-ll-5 {width: 41.66%;}
.col-ll-6 {width: 50%;}
.col-ll-7 {width: 58.33%;}
.col-ll-8 {width: 66.66%;}
.col-ll-9 {width: 75%;}
.col-ll-10 {width: 83.33%;}
.col-ll-11 {width: 91.66%;}
.col-ll-12 {width: 100%;}

#banner {
	height: 90px;
}

#menubar {
	top: 0px;
	height: 45px;
}

#URC {
	left: 0;
	height: 80px;
}

#MCL {
	left: 10%;
	height: 80px;
}

#FB {
	left: 20%;
	height: 80px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 80px;
}


#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 32%;
}

#breakoutbutton {
  top: 45px;
}

#slideshowcontainer1 {
  height: 170px;
}

}

/*    MODE SEVEN - between 1100px and 1400px Portrait   */


@media only screen and (min-width: 1100px) and (max-width: 1399px) and (orientation: portrait) {
.col-hp-1 {width: 8.33%;}
.col-hp-2 {width: 16.66%;}
.col-hp-3 {width: 25%;}
.col-hp-4 {width: 33.33%;}
.col-hp-5 {width: 41.66%;}
.col-hp-6 {width: 50%;}
.col-hp-7 {width: 58.33%;}
.col-hp-8 {width: 66.66%;}
.col-hp-9 {width: 75%;}
.col-hp-10 {width: 83.33%;}
.col-hp-11 {width: 91.66%;}
.col-hp-12 {width: 100%;}

#banner {
	height: 100px;
}

#menubar {
	top: 0px;
	height: 50px;
}

#URC {
	left: 0;
	height: 90px;
}

#MCL {
	left: 10%;
	height: 90px;
}

#FB {
	left: 20%;
	height: 90px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 90px;
}

#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 30%;
}

#breakoutbutton {
  top: 60px;
}

#slideshowcontainer1 {
  height: 200px;
}

}

/*    MODE EIGHT - between 1100px and 1400px Landscape   */


@media only screen and (min-width: 1100px) and (max-width: 1399px) and (orientation: landscape) {




.col-hl-1 {width: 8.33%;}
.col-hl-2 {width: 16.66%;}
.col-hl-3 {width: 25%;}
.col-hl-4 {width: 33.33%;}
.col-hl-5 {width: 41.66%;}
.col-hl-6 {width: 50%;}
.col-hl-7 {width: 58.33%;}
.col-hl-8 {width: 66.66%;}
.col-hl-9 {width: 75%;}
.col-hl-10 {width: 83.33%;}
.col-hl-11 {width: 91.66%;}
.col-hl-12 {width: 100%;}

#banner {
	height: 100px;
}

#menubar {
	top: 0px;
	height: 50px;
}

#URC {
	left: 0;
	height: 90px;
}

#MCL {
	left: 10%;
	height: 90px;
}

#FB {
	left: 20%;
	height: 90px;
}

#SiteTitle {
	left: 35%;
	width: 40%;
}

#churchimage {
	height: 90px;
}


#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 30%;
}

#breakoutbutton {
  top: 60px;
}

#slideshowcontainer1 {
  height: 200px;
}

}

/*    MODE NINE - Above 1400px Both Portrait and Landscape  */


@media only screen and (min-width: 1400px) {
.col-x-1 {width: 8.33%;}
.col-x-2 {width: 16.66%;}
.col-x-3 {width: 25%;}
.col-x-4 {width: 33.33%;}
.col-x-5 {width: 41.66%;}
.col-x-6 {width: 50%;}
.col-x-7 {width: 58.33%;}
.col-x-8 {width: 66.66%;}
.col-x-9 {width: 75%;}
.col-x-10 {width: 83.33%;}
.col-x-11 {width: 91.66%;}
.col-x-12 {width: 100%;}

#SiteTitle {
  position: absolute;
  left: 35%;
  top: 0px;
  width: 30%;
}
}

[class*="col-"] {
     float: left;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

#titleblock {
  position: relative;
  left: 0px;
  top: 0;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-right: 5%;
  padding-left: 5%;
  padding-top: 0%;
  padding-bottom: 0%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block1 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block2 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,255,230);
  border: solid;
  border-color: RGB(80,80,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block3 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(235,235,235);
  border: solid;
  border-color: RGB(160,160,160);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block4 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(230,255,230);
  border: solid;
  border-color: RGB(0,80,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block5 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,225);
  border: solid;
  border-color: RGB(80,50,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block6 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(230,230,255);
  border: solid;
  border-color: RGB(0,0,80);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block7 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,220,220);
  border: solid;
  border-color: RGB(100,0,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block8 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;  
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,250,250);
  border: solid;
  border-color: RGB(60,50,80);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block9 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(245,255,200);
  border: solid;
  border-color: RGB(0,80,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block10 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(235,235,235);
  border: solid;
  border-color: RGB(0,0,0);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block11 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,220,230);
  border: solid;
  border-color: RGB(80,0,40);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#block12 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(180,210,255);
  border: solid;
  border-color: RGB(0,0,100);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#blocknull {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  z-index: 1;
}

#blockheader {
  position: relative;
  left: 0px;
  top: 0px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: RGB(180,210,255);
  border: solid;
  border-color: RGB(0,0,100);
  border-width: 2px;
  border-radius: 10px;
  z-index: 1;
}

#blockheadertext {
  text-align: center;
}

.jansvideos {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

#youtube {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;

}

.yttext {
  text-align: center;
}

.storyimage {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

#loveactivity {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
}

#lovecolouring {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
}

#lovemaze {  
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;

}

#lovewordsearch {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
}

#lovecodebreak {
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
}

#lovecodebreakb {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  padding: 5%;
  background-color: RGB(255,240,230);
  border: solid;
  border-color: RGB(0,80,80);
  border-width: 2px;
  border-radius: 10px;
  text-align: center;
}

#congrats {
  font-family: "Comic Sans", cursive;
  font-size: 16pt;
  font-weight: 700;
  color: red;
  

}

#lovecreativeprayer {
  width: 90%;
  margin-left: 5%;
}