body { 
	background-color: #353b55;
	font-family:  Trebuchet, "Trebuchet MS", Arial, sans-serif; 
	margin:0; padding:0;
	}
		
#all {
position: relative;
margin: 0 auto;
background-color: #fff;
padding: 0 0 1em 0;
width: auto;
min-width: 700px;

}

/*Header*/

#educators_header {
			margin:0;
			padding:0;
			background: transparent url('../images/logobanner.jpg') top left no-repeat;
			width: 100%;
			height:108px;
			}
				
#educators_header h1, h2 {display:none;}	

#participants_header {
			margin:0;
			padding:0;
			background: transparent url('../images/logobanner.jpg') top left no-repeat;
			width: 100%;
			height:108px;
			}

#participants_header a {
			text-decoration: none;
			display: block;
			width: 225px;
			height: 88px;
			}

#print_header {
			display: none;
}

#participants_header h1, h2 {display:none;}	

#topbutton {
	position: relative;
	float:left;
	padding: 8px 0;
	margin:0 auto 0 500px;
	font-size: 12px;
	}

#topbutton a {
	color: #1B1F49;
	font-weight: bold;
	padding: 0 0 0 25px;
	text-decoration: none;
	background: transparent url('../images/redarrow.png') center left no-repeat;
	}


/* navigation sidebar */
	
#sidebar {
	padding:0;
	border:0;
	background: transparent url('../images/sidebar_green.jpg') top left no-repeat;
	width: 180px; 
	height: 340px;
	float:left;
	margin: 0;
}

#sidebar{
	position: relative;
}

#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#sidebar ul li {
	font-size:13px;
	color:#004010; 
	font-weight:bold; 
	margin:8px 0 2px 0; 
	padding:0 0 0 4px; 	
	width: 160px;
	}
	

#sidebar a {
	color: #fff;
	font-weight: normal;
	padding: 0 0 0 8px;
	text-decoration:none;
	}

#sidebar ul ul li {
padding: 2px 0 3px 0;
border-bottom: 1px solid #fff;
margin:0; 
}

#sidebar ul ul li#foreignlanguage {
	border: none;
	margin-top: 25px;
}

#sidebar ul ul li#home {
	border: none;
	margin-top: 10px;
}

/* skip to content link */

a.skip {
	position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

/* body text */

#bodytext {margin:30px 10px 0 195px;
	padding:0 0 15px 0;}

.text {font-size: 95%;}

.text h1 {
font-size:150%; 
color:#b51005;
margin: 8px 0;
letter-spacing:1px;

}

.text h2 {
display: block;
font-size: 130%; 
color: #406700;
margin: 16px 0 8px 0;
}

.text p {
color: #373B51;
margin: 8px 0 10px 0;
line-height: 130%;
}

.small  {
	font-size:13px;
}

.text ul, .text ol {
color: #373B51;
margin:0 0 8px 0;
padding-left:30px;
}

.text li {
margin:0 0 2px 0;
}

.imageright {
float:right;
margin: 5px 5px 5px 7px;
padding:0;
border-spacing:0;
}

/* this begins the mac hack\ */
.imageright {
	position: relative;
}
/*this ends the mac hack */

.brown {
	color: #5F3F12;
}

/*footer*/

#footer {
		border-top: solid #353b55;
		clear: both;
		font-size: 75%;
		font-style: italic;
		padding:4px;
		min-height:30px;
			}
			
#footer h2 {
	display: block;
	font-size: small;
}

/* CAPTIONED PICTURES */

.captionright {
	float: right;
	font-style: italic;
	font-size: smaller;
	text-align: center;
	display: inline;
	width: 210px;
}

/* this begins the mac hack\ */
.captionright {
	position: relative;
}
/*this ends the mac hack */

/* EMBEDDED VIDEOS */
.video_alt_text {
	display: none;
}

/* LINKS ON INDEX PAGES */

ul.links_list li {
	padding-bottom: 10px;
}

/* BACK TOP TOP LINKS */

#top_return {
	margin-left: 195px;
}

/* TABLES */

table.data {
	color: #373b51;
	border-bottom: 1px solid #000;
	border-left: 1px solid #999;
	border-collapse: collapse;
	display: block;
	margin: 30px;
}

table.data tr.tableheading {
	background-color: #c4dd8d;
	font-weight: bold;
	text-align: center;
}

table.data tr.tableheading a {
	color: #373B51;
}

table.data tr.border {
	border-top: solid 
}

table.data tr.odd {
	background-color: #fff;
}

table.data tr.even {
	background-color: #d4e1f3;
	border-top: solid 
}

table.data td {
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	padding: 10px;
	vertical-align: text-top;
}

table.data td.columnwidth60 {
	width: 60%;
}

table.data td.columnwidth50 {
	width: 50%;
}

table.data td.columnwidth40 {
	width: 40%;
}

table.data td.columnwidth30 {
	width: 30%;
}

table.data td.columnwidth20 {
	width: 20%;
}

table.data td.columnwidth10 {
	width: 10%;
}



/***************************           Cards            *******************************/

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */
  grid-auto-rows: minmax(200px, auto);
  max-width:900px;
  grid-gap: 1rem;
}

.card {
  /*height: 200px;*/
  /*background: red;*/
  border: 2px solid #e7e7e7;
  border-radius: 4px;
  padding: .5rem;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  display: flex;
  /* -webkit-box-orient: vertical; */
  /* -webkit-box-direction: normal; */
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  color: #5d5e5e;
} /* li item */

.visual {
  fill: #c7c4c4;
  background-color: #ccc;
  height: 97px;
	max-width: 100%;

  padding: .5rem;

}

.accessibility-icon {
	padding-top:6px;
	margin-left: auto;
	margin-right: auto;
	height:87px;
	background-blend-mode: multiply;
	display: block;

}


.img2 {
  display: block;
    border: 0;
    width: 100%;

}

.card-content {
    font-size: .75rem;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.card-content h3{
    font-size: 2em;
     line-height: 50%;
   
}


.panel.card-panel .panel-header {
    background-color: #ffffff;
    font-size: .75rem;
    font-weight: 400;
    height: 25px !important;
}

.panel.card-panel .panel-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.category {
  font-size: .75rem;
  text-transform: uppercase;
}

footer {
  border-top: 2px solid #e7e7e7;
  margin: .5rem 0 0;
  min-height: 30px;
  font-size: .5rem;
}

.category {
    position: absolute;
    top: 110px;
    left: 0;
    color: #fff;
    background: #e74c3c;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}


img {
  display: block;
    border: 0;
    width: 100%;
    height: auto;
}


.category__01 {

   max-width: 100%;

width: auto; 
margin: auto;
}

.category__02 {
  
  max-width: 100%;

width: auto; 
margin: auto;
}

.category__03 {
  
  max-width: 100%;

width: auto; 
margin: auto;
}

.category__04 {
  
  max-width: 100%;

width: auto; 
margin: auto;
}

.category__05 {
  
  max-width: 100%;
height: auto;
width: auto; 
margin: auto;
}

.post-meta {
  margin-top: .5rem;
}

.comments {
  margin-left: .5rem;
}


/* ----flash object8 -----*/

.flash-embed {background-color: #ffffff;
align-content: center;
}



/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 900px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}    
    



/*----- media ----*/


.container{
    width: 100%;
    margin: auto;
    background: skyblue;
    margin-top: 20px;

}

.container h2{
   margin-top:1px;
   color:  #30324a;
     }

.container ul{
    padding: 0px;
    margin: 0px;
}


.container ul li{
    float:left;
    list-style: none;
    width:70%;
    height:100px;
    background: #f3f3f3;
    margin :5px 10px 20px 05px; 
    border:1px solid black;
    padding: 10px;

}


@media(min-width:1100px){
    .container ul li{
        width:25%;
 		height:130px;
         
    }    
    
}

@media(min-width:1500px){
    .container ul li{
 		height:115px;
         
    }    
    
}        

@media(min-width:2120px){
    .container ul li{
 		height:75px;
         
    }    
    
}    
    
    
/*----------------------accesibility---------------------------*/

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.btn {
  /* default for <button>, but useful for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* size comes from text & padding (no width/height) */
  padding: 0.7em 1em;

  /* make sure colors have enough contrast! */
  color: #ffffff;
  background-color: #353b55;
}


.btn:hover,
.btn:focus {
     text-decoration: underline;
  color: #353b55;
  border-color: currentColor;
  background-color: white;
}
/*------shows desktop version and hides mobile version----------*/

.desktop-version {
	display: inline;
}
.mobile-version {
	display: none;
}