/* Homework 9B css */

* {box-sizing: border-box;}

header, nav, main, footer {display: block;}

.rrrr {color:red; padding-left:220px;  padding-top:100px;}
.love {color:crimson; font-weight:bold;}

body { font-family: Arial, Verdana, "Sans Serif";
       color: black;
       background-color: white; 
       /*background-image: url("images/lightred.jpg")*/
	   }
       
	   /* background-color:#83aa44; */ 
header  {background-color: white;
         height:150px;
         background-image:url("images/lc logo.jpg");
         background-repeat:no-repeat;
        }
        
main    {	padding-bottom: 2em;
        padding-left: 0em;
        padding-right: 0em;
		display: block;
		margin-left: 200px;
		padding-top: 0px;
		background-color: white;  }




/* desendant selectors - main h2, main h3,main p,*/
 main h,  main div, main ul, main dl {padding-left: 3em;padding-right: 2em;}

    
h1      {padding-top:45px;
        padding-left:220px;
        font-size:3em;
		text-align: center;
		}
		
h1 span {color:crimson;}

h2 span {color:#b72223;}
		
h4      {background-color: #D2B48C;
         font-size:1.2em;
         padding-left: 0.5em;
         padding-bottom: 0.25em;
		 text-transform: uppercase;
         }
        
nav { text-align: center;
      font-weight: bold;
      font-size: 1.5em;
      padding-top: 10px;
	  float: left;
	  width: 200px;
	  
    }
    
nav a {text-decoration:none;}

/*Pseudo classes */ 
nav a:link {color: Red;}
nav a:visited {color: Darkred;}
nav a:hover {color: pink;}

/*
nav a:link {color: DarkRed;}
nav a:visited {color: IndianRed;}
nav a:hover {color: LightCoral;}

nav a:link {color: lightblue;}
nav a:visited {color: CornflowerBlue;}
nav a:hover {color: MidnightBlue;}
*/


nav ul {list-style-type: none; padding-left: 0;}

/* background-color:#afc489; */
footer {background-color:white;
        font-size:small;
        font-style:italic;
        text-align:center;
        padding-bottom: 10px;
        /*border-top: 2px solid #221811;*/
        }
img {padding-left:10px;
padding-right:10px;}
                  

#lc_home {background-image:url("images/carrick.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_meatloaf {background-image:url("images/meatloaf.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;	
}
#lc_dinner {background-image:url("images/spaghetti-and-meatballs_sized.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_burgers {background-image:url("images/burgers.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_lemonade {background-image:url("images/lemonade.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#oldlc_thankyou {background-image:url("images/thankyou.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_andy {background-image:url("images/lemonade.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_chixpat {background-image:url("images/ChixPat.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}


#lc_hotdog {background-image:url("images/hotdog.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}

#lc_trunk_or_treat {background-image:url("images/trunk_or_treat.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;			
}


#events {background-image:url("images/upcoming-events.jpeg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#mealtrain {background-image:url("images/mealtrain.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;
}

#lc_hambbq {background-image:url("images/hambbq.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#vetdinner {background-image:url("images/vetdinner.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;
}

#donate {background-image:url("images/donate.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#lc_thankyou {background-image:url("images/thankyou.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#lc_blood_drive {background-image:url("images/blooddrive.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#lc_chilimac {background-image:url("images/produce.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#lc_produce {background-image:url("images/produce.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}
#lc_thanksgiving {background-image:url("images/thanksgiving.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#lc_coffee_and_donuts {background-image:url("images/coffee_and_donuts.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 250px;		
}

#wrapper {width:80%;
          margin-right:auto; 
          margin-left:auto; 
          /*background-color: #0c4d8a; */
          min-width: 900px;
          max-width: 1280px;        }

          
.details {
			padding-left:20%;
			padding-right:20%;
			overflow: auto;}
          
.floatleft {float: left; padding-right: 20px; padding-bottom: 20px;}

table {width: 90%;
	margin: auto;
	border-spacing: 0;
	/* background-color : IndianRed; */

	}

td,th{padding:10px}

/*tr:nth-of-type(odd) {background-color: LightCoral;}*/

.column1 { font-weight: bold; 
			width: 40%;
}



form {padding: 2em;}
label {float: left; display: block; text-align: right; width: 8em; padding-right: 1em;}
input, textarea { display: block; margin-bottom: 1em; }
#mySubmit {margin-left: 9.5em}

#mobile{display: none;}
#desktop{display: inline;}


@media only screen and (max-width: 1024px)
{
body {margin: 0; background-image: none;}
#wrapper {width: auto; min-width: 0; margin: 0;}
header{border-bottom: 5px solid #fef6c2}
h1{margin-top: 0; margin-bottom: 1em;padding-top: 1em;padding-bottom: 1em; font-size: 2.5em;}
nav{float:none; width: auto; padding-top: 0; margin: 10px; font-size: 1.3em;}
nav li{display: inline-block;}
nav ul{padding: 0; margin: 0;}
#heroroad {padding: 0; margin: 0;}
#heromugs {padding: 0; margin: 0;}
#heroguitar {padding: 0; margin: 0;}
#herojobs {padding: 0; margin: 0;}
main{padding: 0; margin: 0; font-size: 90%;}
}

@media only screen and (max-width: 768px)

{
header{background-image: url(images/javajammini.jpg);}
h1{ font-size: 2em; text-align: center;padding-left:0;}
nav{margin: 0;}
nav a{display: block; padding: 0.2em; width: auto; border-bottom: 1px solid #fef6c2; }
nav li{display: block;}
main{padding-top: 1px;}
h2{padding: 0.5em 0 0 0.5em; margin-right: 0;}
.details{ padding-left: 0; padding-right: 0; }
#heroroad , #heromugs , #herojobs , #heroguitar {background-image: none; height: auto;}
.floatleft{padding-left: 0.5em; padding-right: 0.5em;}
#mobile{display: inline;}
#desktop{display: none;}
}

/*
https://en.wikipedia.org/wiki/Web_colors
*/