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

/* THIS STYLESHEET IS TAKEN FROM ANOTHER WEBSITE AND USED HERE FOR ONLY THE NEW index.html PAGE. */
p, h1, h2, h3, h4, h5, h6 {
	font-family:'cocoregular';
	color:#FFF;
	font-weight:100;
}
p-thin, h1-thin, h2-thin, h3-thin, h4-thin, h5-thin, h6-thin {
	font-family:'cocothin';
	color:#FFF;
	font-weight:100;
}

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
/*   opacity: 0.7;*/
   background-color:#FFF;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
/*  left: 140px;*/
  z-index: 100;
}

img {flex: none;} /* IE doesn't center the images, but compresses (distorts) them when the width of the browser window is reduced, so this at least fixes them from shrink, but instead they align to left instead of center - only problem in IE */



/*//////////////////////////////////////////ALL SCREEN SIZES:///////////////////////////////////////*/

/* I actually stopped using this logo_banner_container for now - use header container instead */
#container {
	height:100%;
	width: 100%;
	overflow:hidden; /* This is needed otherwise the container could expand to fit the content */
	margin: 0px;
}
.column_main {
	height:100%;
	width: 75%;
	overflow:hidden; 
	margin: 0px;
	padding: 0;
	float: left;
		background-color: #93A5C4;
}

.sidebar_right {
	float: left;
	width: 25%;
	background-color: #0C4;
}


#banner_logo {
	float: left;
}
#banner_buttons {
	float:right;
}

.header_container {
	display: inline-block;
	overflow:hidden;
    position: relative;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	min-width:1000px; /* This keeps the header image/animation from shrinking too much */
	height: auto;
}

.chapter_container, .column_chapter_container { /* This is the group box containing the three image boxes */
	display: flex;
	position: relative;
	overflow:hidden;
	height: auto;
	width: 100%;
	max-width: 1400px; /* Here I want to limit the width of the site */
}


.box_container_tall_100, .box_container_tall_75, .box_container_tall_60, .box_container_tall_51, .box_container_tall_50, .box_container_tall_40, .box_container_tall_33, .box_container_tall_30, .box_container_tall_25, .box_container_tall_20, .box_container_short_100, .box_container_short_75, .box_container_short_60, .box_container_short_51, .box_container_short_50, .box_container_short_40, .box_container_short_33, .box_container_short_30, .box_container_short_25, .box_container_short_20, .box_container_x {
	display: inline-block; 
	justify-content: center;
	overflow:hidden;
	position:relative;
	width:100%;
	margin:8px; /* NEW SETTING */
	float:left;
}
.box_container_tall_100, .box_container_tall_75, .box_container_tall_60, .box_container_tall_51, .box_container_tall_50, .box_container_tall_40, .box_container_tall_33, .box_container_tall_30, .box_container_tall_25, .box_container_tall_20 {
	height:500px; /* Height fixed so that they don't disappear if empty */
}
.box_container_short_100, .box_container_short_75, .box_container_short_60, .box_container_short_51, .box_container_short_50, .box_container_short_40, .box_container_short_33, .box_container_short_30, .box_container_short_25, .box_container_short_20 {
	height:300px;
}


/* IF below are identical for both media screen sizes, I could declare them once above the media specific declarations so that they are universal. */

.thumbbox_top_96, .thumbbox_top_96_white, .thumbbox_top_196, .thumbbox_top_196_white {
	width:100%;
	margin:0px;
	margin-bottom:4px;
	background-color:#4f4f4e;
	position:absolute;
}
.thumbbox_bottom_200, .thumbbox_bottom_200_white, .thumbbox_bottom_300, .thumbbox_bottom_300_white, .thumbbox_bottom_400, .thumbbox_bottom_400_white {
	width:100%;
	top:190px;
	background-color:#4f4f4e;
	overflow: hidden;
	position:absolute;
	display: flex;
	justify-content: center;
}
.thumbbox_top_96, .thumbbox_top_96_white {height:96px;}
.thumbbox_top_196, .thumbbox_top_196_white {height:196px;}
.thumbbox_bottom_200, .thumbbox_bottom_200_white {height:200px; top:100px;}
.thumbbox_bottom_300, .thumbbox_bottom_300_white {height:300px; top:200px;}
.thumbbox_bottom_400, .thumbbox_bottom_400_white {height:400px;	top:100px;}

.thumbbox_top_96_white, .thumbbox_top_196_white, .thumbbox_bottom_200_white, .thumbbox_bottom_300_white, .thumbbox_bottom_400_white{
	background-color:#FFF;
	opacity: 1;
}

.text_column_a {
	text-align:left;
	overflow:visible;
	position:absolute;
	left: 10px;
	right: 10px;
	top:10px;
	height: auto;
	width: auto;
}
.textbox_a {
	text-align:left;
	width: 100%;
	height: auto;
	background-color:#FFF;
	opacity:0.7;
	margin:0px;

}



/* BELOW IS THE FIRST SETTING FOR VERY SMALL SCREENS */

@media screen and (min-width: 200px) {

h1, h1-thin {
	font-size:80px;
	line-height: 80px;
	margin-top:0;
	margin-left:10px;
}
h2, h2-thin {
	font-size: 60px;
	line-height: 60px;
	margin-top: 0;
	margin-bottom:0;
	margin-left:10px;
}
h3, h3-thin {
	font-size:40px;
	line-height: 40px;
	margin-top:0;
	margin-left:10px;
	margin-bottom:6px;
}

h4, h4-thin { 
	font-size:32px;
	line-height: 42px;
	margin-top: 0;
	margin-bottom:0;
	margin-left:10px;
}

/* I have stopped using this logo_banner_container, and instead use header container */
.logo_banner_container {
	display: flex;
	min-width:450px; /* This keeps the header image/animation from shrinking too much */
}
.column_main {width:100%}
.sidebar_right {display:inline-block; width:100%} /* I can also make this disappear in this media size, by using display:none; */
.header_container {}

.chapter_container, .column_chapter_container {
	display: block;
	min-width: 300px;
	width: 96%; /* Use 96% to allow margins left and right (I can't get margin settings to work)*/
 /*Otherwise the small boxes get too cramped and text overflows */
}

.box_container_tall_100, .box_container_tall_75, .box_container_tall_60, .box_container_tall_51, .box_container_tall_50, .box_container_tall_40, .box_container_tall_33, .box_container_tall_30, .box_container_tall_25, .box_container_tall_20, .box_container_short_100, .box_container_short_75, .box_container_short_60, .box_container_short_51, .box_container_short_50, .box_container_short_40, .box_container_short_33, .box_container_short_30, .box_container_short_25, .box_container_short_20, .box_container_x {
	display:flex; /* NORMALLY MUST BE FLEX, TO CENTER IN SMALL WINDOW (but...*/
	justify-content: center;
	overflow:hidden;
	position:relative;
	width:100%;
	margin:0px; /* cant get these margins to work - dont show on right side */
	margin-top:5px;
	margin-bottom:5px;
	float:left;
}

.text_column_a { color:#FFF;} /* Why? */
.textbox_a {}
}

/* BELOW IS THE SETTING FOR NORMAL SCREENS (APPLE USES three sizes: below 750px for mobiles, then steps up 1075px, and  above that is for largest screen sizes) */
@media screen and (min-width: 780px) {
/* If changing setting in media above, must do same for rest of media - otherwise media above it gets copied down.... */
h1, h1-thin {
	font-size:120px;
	line-height: 100px;
	margin-top:0;
	margin-left:10px;
}
h2, h2-thin {
	font-size: 80px;
	line-height: 80px;
	margin-top: 0;
	margin-bottom:0;
	margin-left:10px;
}
h3, h3-thin {
	font-size:60px;
	line-height: 60px;
	margin-top:0;
	margin-left:10px;
	margin-bottom:6px;
}

h4, h4-thin { 
	font-size:42px;
	line-height: 42px;
	margin-top: 0;
	margin-bottom:0;
	margin-left:10px;
}
.logo_banner_container {
	display: inline-block;
	min-width:700px; /* This keeps the header image/animation from shrinking too much */
	max-width: 1390px;
}
.column_main {width:70%;}
.sidebar_right {width:30%; display:inline-block;}
.header_container {}

.chapter_container, .column_chapter_container { /* This is the group box containing the three image boxes */
	display: flex;
	width: 100%;
	min-width: 1000px;
	max-width: 1400px; /* Here I want to limit the width of the site */
}
.column_chapter_container {
	min-width: 700px;
}

.box_container_tall_100, .box_container_tall_75, .box_container_tall_60, .box_container_tall_51, .box_container_tall_50, .box_container_tall_40, .box_container_tall_33, .box_container_tall_30, .box_container_tall_25, .box_container_tall_20, .box_container_short_100, .box_container_short_75, .box_container_short_60, .box_container_short_51, .box_container_short_50, .box_container_short_40, .box_container_short_33, .box_container_short_30, .box_container_short_25, .box_container_short_20, .box_container_x {
	display: flex; 
	justify-content: center;
	overflow:hidden;
	position:relative;
	width:100%;
	margin:8px; /* NEW SETTING */
	float:left;
}
.box_container_x {height:auto} /* this 'box_container_100' is only for the header so must not be fixed height} */

.box_container_tall_100, .box_container_short_100 {	width:100%;} 
.box_container_tall_75, .box_container_short_75 { 	width:75%;}
.box_container_tall_60, .box_container_short_60 {	width:60%;} 
.box_container_tall_51, .box_container_short_51 {	width:51.5%;} /* This is a fix to keep borders aligned - use when with other smaller boxes*/
.box_container_tall_50, .box_container_short_50 {	width:50%;} /* Use when two of these boxes are together */
.box_container_tall_40, .box_container_short_40 {	width:40%;}
.box_container_tall_33, .box_container_short_33 {	width:33.33%;}	
.box_container_tall_30, .box_container_short_30 {	width:30%; min-width:250px;} 
.box_container_tall_25, .box_container_tall_25 {	width:25%; min-width:170px;} 
.box_container_tall_20, .box_container_tall_20 {	width:20%; min-width:200px;}
}

/*
@media screen and (min-width: 1000px) {
.chapter_container {width: 90%;}
}
*/