@import url("https://fonts.googleapis.com/css?family=Copperplate+Gothic");

body {margin: 0px; padding: 0px; background: #959085 ;}







/*THIS IS FOR MOBILES */
#blue { background-image: url(images/short_barn.jpg);
background-postion: center center;
background-repeat: no-repeat;
background-attachement: fixed ;
background-size: cover;
background-color: blue;
text-align: center;

padding:10px 0px 200px;
}
ol {list-style: none; counter-reset: li}
li::before {content: counter(li); color: #fff; font-weight: bold;
  display: inline-block; width: 1em;
  margin-left: -1em}
li {counter-increment: li}

#yellow {display: none; background-color:}
#red {display: none;}
/*TEXT STUFF*/
.bluetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; line-height:170% ;}
.bluetext h1 {font-family: "Copperplate Gothic" ;	font-size: 24px;	color: #FFFFFF;	line-height:170% ;}
.bluetext a {color: #fff; font-weight:bold; text-decoration:none; line-height: 200%}
.bluetext a:hover {color: #f6a0aa; font-weight:bold}

.bluetop {width:85%;background-image: url('images/grey.png'); border-radius: 25px;  margin: 00px auto 20px auto; }

.bluemain {width:90%; background-image: url('images/grey.png');border-radius: 25px; margin:auto; text-align: left; padding:  1px 1px;}

.bluebottom {width: 85%; background-image: url('images/grey.png');border-radius: 25px; text-align: left; padding:10px; margin: 0px auto 50px auto }


/*	TUTORIAL STUFF */
.tuttop {width:80%;background-image: url('images/white.png'); border-radius: 25px;  margin: 10px auto 20px auto; padding: 10px }
.tuttext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #565656; line-height: 150%;}
.tuttext h1 {font-family: "Copperplate Gothic" ;	font-size: 35px;	color: #434246 ;}
.tuttext h2 {font-family: "Copperplate Gothic" ; font-weight: normal;	font-size: 25px;	color: #434246;	display:inline ;}
.tuttext a {color: #6580c3;}
.tuttext a:hover {color: #354c85;}
.tuttop img {width:100%; height: 100%; margin:auto; }

.yellowtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFFF; line-height:170% ;}
.yellowtext h1 {font-family: "Copperplate Gothic" ;	font-size: 28px;	color: #FFFFFF;	line-height:170% ;}
.yellowtext a {color: #fff; font-weight:bold; text-decoration:none;}
.yellowtext a:hover {color: #f6a0aa; font-weight:bold}

.yellowtop {width:80%;background-image: url('images/grey.png'); border-radius: 25px;  margin: 00px auto 20px auto; }

.yellowmain {width:80%; background-image: url('images/grey.png');border-radius: 25px; margin:auto; text-align: left; padding: 2px 5px }

.yellowbottom {width: 80%; background-image: url('images/grey.png');border-radius: 25px; text-align: left; padding:10px 30px; margin: 0px auto 50px auto;  }


.redtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFFF; line-height:170% ;}
.redtext h1 {font-family: "Copperplate Gothic" ;	font-size: 35px;	color: #FFFFFF;	line-height:170% ;}
.redtext a {color: #fff; font-weight:bold; text-decoration:none;}
.redtext a:hover {color: #f6a0aa; font-weight:bold}

.redtop {width:40%;background-image: url('images/grey.png'); border-radius: 25px;  margin: 00px auto 20px auto; }

.redmain {width:40%; background-image: url('images/grey.png');border-radius: 25px; margin:auto; text-align: left; padding: 10px 10px }

.redbottom {width: 40%; background-image: url('images/grey.png');border-radius: 25px;padding:10px; margin: 0px auto 100px auto; text-align: left; }

ul li {
    list-style-image: url("images/littleboot.png");
}

/* THIS IS FOR TABLETS*/
@media only screen and (min-width: 768px)
{
#blue {display:none;}
#red {display: none;}
#yellow {display: block;background-image: url(images/wide-gate.jpg);
background-postion: center center;
background-repeat: no-repeat;
background-attachement: fixed ;
background-size: cover;
background-color: #665d67;
text-align: center;

padding:10px 0px 200px;
}




/*THIS IS FOR DESKTOPS*/
@media only screen and (min-width: 1400px)
{
#blue {display:none;}
#yellow {display: none;}
#red {display: block;background-image: url(images/wideclouds.jpg);
background-postion: center center;
background-repeat: no-repeat;
background-attachement: fixed ;
background-size: cover;
background-color: #665d67;
text-align: center;

padding:10px 0px 200px;

}
}