@charset "utf-8";
/* CSS Document */
/* Section all */

section { padding: 0px 0px 0px 0px; }
section::after { 
	content:''; 
	display:block; 
	clear: both;
}

.heading {
   width: 90%;
   text-transform: uppercase;
   color: #286cb5;
   background-color: #ffffff;
   font-size: .95em;
   text-align: center;
   font-weight: 700;
   line-height: 1em!important;
}

.headingSection {
   border-radius: 10px;
   width: 90%;
   text-transform: uppercase;
   color: #005eb8;
   margin-top:20px;
   background-color: #ffffff;
   font-weight: 700;
   font-size: 1.5em;
   text-align:center;
   display: block;
}

.resource {
   width: 240px;
   height: 300px;
   padding:10px;
   border-radius: 15px;
   border: 1px solid #286cb5;
   margin: 5px;
   display:inline-block;
   box-shadow: 5px 5px 5px 2px #d9ddea;
   vertical-align: top;
}
.resourceContainer {
    display: inline-flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
}

.resource .img { width: 50px; }

.title2 {
   font-weight: bold;   
}
	
.content {
// margin:5px;
   padding:5px;
   color:#286cb5;
}
.linkto {
   text-align:center;
   color:#286cb5;
   font-size:.95em;
}

.containerpwpl {
	display:flex;
	flex-wrap:wrap;
	max-width: 1000px;
	justify-content:center;
}
.containerpwpl2 {
	display:flex;
	flex-wrap:wrap;
	max-width: auto;
	justify-content: center;
}

.bookto {
	display: flex;
	flex-wrap: wrap;
//	max-width: 1000px;
	justify-content: center;
}
		
.headingURL {
   text-transform: uppercase;
   color: #fff;
   font-size: .95em;
   text-align: center;
   font-weight: 700;
   line-height: 1em!important;
}
.bottomText {
   color: #fff;
   font-size: .95em;
   text-align: center;
   font-weight: 500;
   line-height: 1em!important;
}
.bottomText a{
   color: #fff;
   font-size: .95em;
   text-align: center;
   font-weight: 500;
   line-height: 1em!important;
}
.bottomText a:hover {
	background:#f5831f!important;
	color:#ffffff!important;
}
.cal {
	flex: 2 0 auto;
	order: 1;
}
.bookMark {
	flex: 1 0 350px;
	flex-direction: row;
	flex-wrap: wrap;
	order: 2;
}
.yalsa {
	flex: 1 0 300px;
	flex-direction: row;
	flex-wrap: wrap;
	text-align: center;
	align-content: center;
	order: 3;
}

.bookLists {
	flex: 1 0 250px;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 5px;
	order: 1;
}
.bookInfo {
	 flex-wrap: wrap;
	 padding: 10px;
	 margin: 10px;
}
.digitalResource {
	margin: 7px;
	padding:7px;
	border:2px!important;
	background-color: #319B42;
	flex: 1 0 250px;
	font-family: Open Sans;
	order: 2;
}
.digitalResource ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.digitalResource li a {
	display: block;
	color: white;
	padding: .3em .5em;
	text-decoration: none;
}

.digitalResource li a:hover {
	background:#f5831f!important;
	color:#ffffff!important;
}

/* What's Happening */

.happeningGroup {
   padding:15px;
   border-radius: 25px;
   border: 1px solid #286cb5;
   margin: auto;
   position: relative;
   display: block;
}

/* Game Group*/

.resourceGameGroup {
    background-color:#319B42;
    margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 5px 30px 10px 30px;
    max-width:800px; 
    border-radius:25px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.resourceGameGroup aside { 
    width: 130px;
    float: inherit;
    display: inline-block;
    vertical-align: top;
}
	
.resourceGameGroup .resourceGame {
    margin:15px;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    background: no-repeat center top;
    background-size: 100px 100px;
}

.center {
    margin: auto;
    width:100%;
    padding: 10px;
}
/* Research and Homework Help */

.resourceGroup {
   padding:10px;
   border-radius: 25px;
   border: 1px solid #286cb5;
   margin: auto;
   position: relative;
   display:block;
}
.resourceGroup::after { 
	content:''; 
	display:block; 
	clear: both;
}
.resourceGroup .resourceGroupSub {
//   display:inline-flex;
//     align-content: center;
}
.resourceGroup aside { 
    width: 200px;
    min-height:400px;
    float:inherit;
    display: inline-block;
    vertical-align: top;
}
@media all and (max-width: 1020px) {
	.digitalResource {
	margin: 7px;
	padding:7px;
	border:2px!important;
	background-color: #319B42;
	width: 72%;
	font-family: Open Sans;	
        float: none;	
}

@media only screen and (min-width : 480px) and (max-width : 595px) { /*--- Mobile landscape ---*/
    .resourceGameGroup aside { 
	width: 50%;
	float:left;
	display:inline-flex;
	}
    .resourceGroup aside { 
	width: 50%;
	height:380px;
	float:left;
	}
}
.resourceGroup .resource {
   padding:10px;
   border:0px;
//   display:inline-block;
//     clear:both
}

.title2 {
   font-weight: bold;   
}   
.content {
   margin:10px;
   color:#286cb5;
}

/* Read, Watch, Listen */

section.readwatchListen {
   padding:15px;
   border-radius: 25px;
   margin: auto;
   position: relative;
   display: block;
}
.infoBlock {
   width: 148px;
   padding:5px;
   border:2px solid gray;
   background-color:white
}
readListen {
}

.title2 {
   font-weight: bold;
}
   
.titlegame {
   font-size: 75%; 
   color:#286cb5; 
   text-align: center; 
   font-weight: bold; 
   text-transform: uppercase;
}

.center {
   margin: auto;
   width:100%;
   padding: 10px;
}
/* section { position:absolute; top:50%; left:50%; margin-right:-50%; transform: translate(-50%, -50%)} */
a:link {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.eventsinfo {
font-size:10px;
padding:0px;
margin:0px;
width:80%;
border-bottom:#dfe5e6 1px solid;
}

.eventsinfo #eventtitle {
font-size:16px;
margin-right:10px;
margin-left:10px;
top:0mm;
width:60%;
padding-top:5px;
float:right;
color:#840715;
padding-left:0px;
padding-bottom:5px;
text-align:left;
font-weight:bold;
position: relative;
clear:both;
}
.eventsinfo #eventdate {
//display:none;
text-align:left;
width:90px;
color:#fff;
margin-left:5px;
font-size:14px;
padding:10px;
//padding-left:10px;
//padding-bottom:10px;
line-height:100%;
float:left;
background-color:#840715;
}

.eventsinfo #eventtime {
//clear:left;
text-align:left;

width:80px;
color:#fff;
margin-left:5px;
font-size:14px;
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
line-height:100%;
float:left;
background-color:#840715;
}
.eventsinfo #eventdescription {
display:none;
//clear:right;
//clear:both;
margin-left:10px;
//margin-top:5px;
margin-bottom:2px;
color:#666;
padding-bottom:10px;
font-size:12px;
text-align:left;
position:relative;
bottom:5px;
float:left;
}

.eventsinfo #image {
//display:none;
//clear:right;
//clear:both;
margin-right:10px;
//margin-top:5px;
margin-bottom:2px;
color:#666;
padding-bottom:10px;
position:relative;
bottom:5px;
float:right;
}

.eventsinfo #optionalimagedisplaypath {
margin-left:10px;
margin-top:20px;
margin-bottom:2px;
}

.eventsinfo #eventlocation {
display:none;
}

.eventsinfo #eventlibrary {
clear:both;
margin-left:10px;
padding-top:15px;
padding-bottom:10px;
color:#666;
//width:40%;
border-bottom:#dfe5e6 1px solid;
font-size:12px;
text-align:left;
position:relative;
bottom:15px;
float:left;
}

.eventsinfo #eventtitle a:link {
color:#840715;
}

.eventsinfo #eventtitle a:hover {
text-decoration:underline;
}

.sidebar_main {
font-size:20px;
color:#F00;
}

.heading2 {
font-size:18px;
color:#999;
font-weight:bold;
padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px solid #CCC;
}

@media only screen and (max-width : 320px) { /*--- Mobile portrait ---*/


    .resourceGameGroup aside { 
	width: 50%;
	float:left;
	display:inline-flex;
	}
    .resourceGroup aside { 
	width: 100%;
	height:280px;
	float:left;
	}
    .eventsinfo {
	font-size:10px;
	padding:0px;
	margin:0px;
	width:80%;
	border-bottom:#dfe5e6 1px solid;
	}

    .eventsinfo #eventtitle {
    font-size:2em;
    margin-right:10px;
    margin-left:10px;
    top:0mm;
    width:100%;
    padding-top:5px;
    float:right;
    color:#840715;
    padding-left:20px;
    padding-bottom:5px;
    text-align:left;
    font-weight:bold;
    position: relative;
    clear:both;
    }
  .eventsinfo #eventdate {
    //display:none;
    text-align:left;
    width:90px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding:20px;
    //padding-left:10px;
    //padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

  .eventsinfo #eventtime {
    //clear:left;
    text-align:left;
    width:80px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }
.eventsinfo #eventlibrary {
clear:both;
margin-left:10px;
padding-top:15px;
padding-bottom:10px;
color:#666;
border-bottom:#dfe5e6 1px solid;
font-size:10px;
text-align:left;
position:relative;
bottom:15px;
float:left;
}
}

@media only screen and (min-width : 320px) and (max-width : 480px) { /*--- Mobile portrait ---*/


    .resourceGameGroup aside { 
	width: 50%;
	float:left;
	display:inline-flex;
	}
    .resourceGroup aside { 
	width: 100%;
	height:280px;
	float:left;
	}
    .eventsinfo {
	font-size:10px;
	padding:0px;
	margin:0px;
	width:80%;
	border-bottom:#dfe5e6 1px solid;
	}

  .eventsinfo #eventtitle {
    font-size:1em;
    margin-right:10px;
    margin-left:10px;
    top:0mm;
    width:100%;
    padding-top:5px;
    float:right;
    color:#840715;
    padding-left:0px;
    padding-bottom:5px;
    text-align:left;
    font-weight:bold;
    position: relative;
    clear:both;
    }
  .eventsinfo #eventdate {
    //display:none;
    text-align:left;
    width:90px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding:10px;
    //padding-left:10px;
    //padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

  .eventsinfo #eventtime {
    //clear:left;
    text-align:left;
    width:80px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }
.eventsinfo #eventlibrary {
clear:both;
margin-left:10px;
padding-top:15px;
padding-bottom:10px;
color:#666;
border-bottom:#dfe5e6 1px solid;
font-size:10px;
text-align:left;
position:relative;
bottom:15px;
float:left;
    }
}

@media only screen and (min-width : 480px) and (max-width : 595px) { /*--- Mobile landscape ---*/
    .resourceGameGroup aside { 
	width: 50%;
	float:left;
	displan:inline-flex;
	}
    .resourceGroup aside { 
	width: 100%;
	height:280px;
	float:left;
	}
    .eventsinfo {
	font-size:10px;
	padding:0px;
	margin:0px;
	width:80%;
	border-bottom:#dfe5e6 1px solid;
	}

  .eventsinfo #eventtitle {
    font-size:1em;
    margin-right:10px;
    margin-left:10px;
    top:0mm;
    width:100%;
    padding-top:5px;
    float:right;
    color:#840715;
    padding-left:0px;
    padding-bottom:5px;
    text-align:left;
    font-weight:bold;
    position: relative;
    clear:both;
    }
  .eventsinfo #eventdate {
    //display:none;
    text-align:left;
    width:90px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding:10px;
    //padding-left:10px;
    //padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

  .eventsinfo #eventtime {
    //clear:left;
    text-align:left;
    width:80px;
    color:#fff;
    margin-left:5px;
    font-size:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

    .eventsinfo #eventlibrary {
    clear:both;
    margin-left:10px;
    padding-top:15px;
    padding-bottom:10px;
    color:#666;
    border-bottom:#dfe5e6 1px solid;
    font-size:10px;
    text-align:left;
    position:relative;
    bottom:15px;
    float:left;
    }
}

@media only screen and (min-width : 595px) and (max-width : 690px) { /*--- Small tablet portrait ---*/


	.eventsinfo {
	font-size:10px;
	padding:0px;
	margin:0px;
	width:80%;
	border-bottom:#dfe5e6 1px solid;
	}

	.eventsinfo #eventtitle {
	font-size:1em;
	margin-right:5px;
	margin-left:5px;
	top:0mm;
	width:100%;
	padding-top:5px;
	float:right;
	color:#840715;
	padding-left:0px;
	padding-bottom:5px;
	text-align:left;
	font-weight:bold;
	position: relative;
	clear:both;
	}
	.eventsinfo #eventdate {
	//display:none;
	text-align:left;
	width:90px;
	color:#fff;
	margin-left:5px;
	font-size:12px;
	padding:10px;
	//padding-left:10px;
    //padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

    .eventsinfo #eventtime {
    //clear:left;
    text-align:left;
    width:80px;
    color:#fff;
    margin-left:5px;
    font-size:12px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

    .eventsinfo #eventlibrary {
    clear:both;
    margin-left:10px;
    padding-top:15px;
    padding-bottom:10px;
    color:#666;
    border-bottom:#dfe5e6 1px solid;
    font-size:10px;
    text-align:left;
    position:relative;
    bottom:15px;
    float:left;
    }
}

@media only screen and (min-width : 690px) and (max-width : 800px) { /*--- Tablet portrait ---*/


    .eventsinfo {
    font-size:10px;
    padding:0px;
    margin:0px;
    width:80%;
    border-bottom:#dfe5e6 1px solid;
    }

    .eventsinfo #eventtitle {
    font-size:12px;
    margin-right:5px;
    margin-left:5px;
    top:0mm;
    width:100%;
    padding-top:5px;
    float:right;
    color:#840715;
    padding-left:0px;
    padding-bottom:5px;
    text-align:left;
    font-weight:bold;
    position: relative;
    clear:both;
    }
    .eventsinfo #eventdate {
    // display:none;
    text-align:left;
    width:90px;
    color:#fff;
    margin-left:5px;
    font-size:12px;
    padding:10px;
    // padding-left:10px;
    // padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

    .eventsinfo #eventtime {
    /*clear:left; */
    text-align:left;
    width:80px;
    color:#fff;
    margin-left:5px;
    font-size:12px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    line-height:100%;
    float:left;
    background-color:#840715;
    }

    .eventsinfo #eventlibrary {
    clear:both;
    margin-left:10px;
    padding-top:15px;
    padding-bottom:10px;
    color:#666;
    border-bottom:#dfe5e6 1px solid;
    font-size:10px;
    text-align:left;
    position:relative;
    bottom:15px;
    float:left;
    }
}

/* this is for the reflow table */


/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.event-list thead th,
.event-list tbody th .ui-table-cell-label,
.event-list tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .8em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* White bg, large blue text for aware and description */
.event-list tbody th {
//    font-size: 1.1em;
    background-color: #fff;
    color: #2d6cb5;
    text-align: left;
    padding-left: .8em;
}
/* Add strokes */
.event-list thead th {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.event-list tbody th,
.event-list tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 690px) {


    /*  Negate the margin between sections */
    .event-list tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  White bg, large blue text for rank and title */
    .event-list tbody th,
    .event-list tbody th.title {
        display: block;
        font-size: 1.2em;
        line-height: 110%;
        padding: .5em .5em;
        background-color: #fff;
        color: #2d6cb5;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for award and description */
    .event-list tbody th .ui-table-cell-label,
    .event-list tbody td.title .ui-table-cell-label {
        display: none;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 690px ) {


    /* Show the table header rows */
    .event-list td,
    .event-list th,
    .event-list tbody th,
    .event-list tbody td,
    .event-list thead td,
    .event-list thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .event-list td .ui-table-cell-label,
    .event-list th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 690px ) {


    .event-list td,
    .event-list th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}


/* WHERE I ADDED CODE */
.sync-container {
  width: 85%;
  height: 400px;
  margin: 0 auto;
}

.sync {
 float: left;
 width: 350px;
 height: 350px;
}

.sync-d {
 margin: 30px 20mm 10% 25em;
}

.btn {
  border: 1px solid #319B42;
  border-radius: 25px;
  padding: 10px;
  background-color: #319B42;
  text-align: center;
  color: #FFFFFF;
}

.creative_arts {
  margin: auto;
  display: block;
  width: 75%;
	}