/* WO notes: visibility= visible/hidden does not work reliably as expected. use display= block/none instead. */
/* vh, vw = viewport height/width */
@font-face {
	font-family: 'CenturySchoolbook';
	src: url('../fonts/CenturySchL-Roma.eot');
	src: url('../fonts/CenturySchL-Roma.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/CenturySchL-Roma.woff2') format('woff2'),
	     url('../fonts/CenturySchL-Roma.woff') format('woff'),
	     url('../fonts/CenturySchL-Roma.ttf') format('truetype'),
	     url('../fonts/CenturySchL-Roma.svg#century_schoolbook_lroma') format('svg');
	font-weight: normal;
	font-style: normal;
}

a, a:link, a:hover, a:visited, a:active {
	color:orange;
}

/* divs use a dot in front, ids use a hastag */

/* diagram of page:
  header: ht = 20% of viewport ht[vh] (visible screen ht, but cellphones often have vh > screen ht and then rescale down but ignoring that for now)
  WOmainDev = 140% of vh
  	 -- [left ~15%] nav circles (if present): 
  	 -- [next from left] 
  	 	if main/large nav circle is present then right  of that is surrTextDiv
  	 	else rightSideDive
  	 			rightSidetable (top~20vh)
  	 			rightSide span (middle, variable height)
  	 			iframe (bottom, extends below bottom of visible screen)
  footer = 20% of vh
  	
  these all fit within the body. These values are set here.
  This css sets up most everything based on the viewport-height, but if the user shrinks the browser window such that width<ht, then weill want 
  to scale everying to the width -- so the resize.js and circles.js compute and use minlen = min of width/ht and reset everything to that.
  This only affects the parent divs of the inner items since the inner divs are then a percentage of their parent.
 */
 
.body {
  width: 100%; 
  height: 180vh; /* extends below the visible screen. */
}

#topHeaderDiv { /* parent is body */
	position:absolute; 
	left:0; top:0; 
	height:16vh; 
	width:100%; 
	padding-left:1%;
	padding-right:1%;
	background-size:cover; 
	background-image: url("../images/UFHeaderBlueBgWithWaves.png");
}

.WOmainDiv { /* my region = body between header and footer (which are outside this div). Parent = body. */
  position: absolute;
  display: block; /*allows for setting width, height*/
  background-color:#072C55; /* UF dark blue */
  width: 100%; 
  height: 140vh; /* extends ~50% below the visible screen, for iframe to stick down if it is present */
  top:18vh;
/*  text-shadow: 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000; */
  color: darkgreen; /* no text should respond to this */
  font-family: CenturySchoolbook, Verdana, Arial, Helvetica;
  font-size: 20px;
  padding-left: 1%;
  padding-right: 1%;
  z-index:1; /* behind most everything */
}

.WOmainBGimgDiv {
  position: relative;
  display: block; /*allows for setting width, height */
  background-image: url('../images/WOtaggedHeart.png'); /* this is not working. probably not seeing that image. perhaps path. */
  opacity: 0.05; /* applies to whole div*/
  background-size: cover; /* scale image to fit bg div */
  background-position: 50% 50%; /* centered in div */
  width: 100%; 
  height:100%; /* relative to parent WOmainDiv */
  top:0;
  z-index:1;	
}

.mainPicOuterDiv { /* parent isWOmainDiv, which may extend below the visible page. Do not want to set ht based on WOmainDiv.
		the UFheader takes up  20% of visible screen ht, leaving 80% for this. */
  position: absolute; /* absolute w/r/2 WOmainDiv, not full image. */
  display: block; /*allows for setting width, height*/
  color: #333;
  height:60vh; /* TopHeaderDiv takes up 20% of view ht. This big pic plus the circle pics get the reamining 80%. so set the
  		big pic ht to 60% with 10% above (and below). position this centered height-wise with room for the smaller circleDivs 
  			lying on the outer ring. I need to ensure that the size (height) of this div plus a circleDiv above  */
  top:10vh; /* below TopHeaderDiv. */
  left:10vh;
  z-index:0; /* behind everything */
}

.mainPicInnerDiv {
  position: relative; /* is within mainPicOuterDiv so absolute pertains to that parent bounds */
  display: block; /*allows for setting width, height*/
  background-image: url('../MIACALab/labLogo.png');
  width:75%; height:75%;  /* make this 75% of window width to give the text that 12.5% border */
  left:12.5%; top:12.5%; /* and then start 12.5% from top and left for that border */
  background-position: 50% 50%; /* centered in div */
  background-size: cover; /* scale image to fit bg div */
  border-radius: 50%; /* rounds edges/corners from square to circle */
  z-index:3;
}

.surroundTextOuterClass { /* parent is WOmainDiv (which sits below topheader=20% of viewport ht, leavnign 80% of view ht for this) */
	position: absolute; /* relative to WOMainDiv. */
    display: block; /*allows for setting width, height*/
    color: white; /* #300; */
	left: 35%; /* % of viewable of screen */
	width: 65%;
	top: 10vh; /* Have 80% of viewport ht to work with. 10% of viewport ht gap at top */
	height: 60vh; /* and 10% gap at bottom */
}

#surroundTextInnerId {
	position: relative;
    display: block; /*allows for setting width, height*/
	width: 100%; /* all of size inside div surroundTextClass */
	height:100%;
    color: white; /* #300; */
	text-align: left;
	-webkit-shape-outside: circle(50% at 0 50% );
    shape-outside: circle(50% at 0 50%);
    float: left;
	top: 0;
	left: 0; 
	z-index:1; /* behind everything */
}

/* picdiv and circtextDiv are for the main 4 topics. The rest are the subtopics. The position varies for each and set in circle.js. */
.picdiv, .subpicdiv {  /* parent is WOmainDiv, but defined after mainPicOuterDiv and surroundTextOuterClass so use pos:abs */
  position: absolute;
  display: block; /*allows for setting width, height*/
  /* UF header is top 20% of viewport. */
  width:70vh; height:70vh;  /* make as square and give the text that 15% border */
/*  left:15vh; top:15vh; /* and then start 12.5% from top and left for that border */
  visibility:hidden;
  background-position: 50% 50%; /* centered in div */
  background-size: cover; /* scale image to fit bg div */
  border-radius: 50%; /* rounds edges/corners from square to circle */
  z-index:4;
}

.circtextdiv, .circsubtextdiv { /* parent for all is WOmainDiv. */
  position: absolute;
  display: block; /*allows for setting width, height*/
  background: white; 
  border-color: #ED6B21; /* this is gator orange #ED6B21; */
  border-style: solid;
  border-width: 2px; 
  border-radius:50%;
 /* width:10%; height:10%; */
  left:0; 
  z-index:2;
}

#text0id, #text1id, #text2id, #text3id, #text4id, #text5id, #text6id,
#subtext0id, #subtext1id, #subtext2id, #subtext3id, #subtext4id, #subtext5id, #subtext6id, #subtext7id, #subtext8id, #subtext9id, #subtext10id, #subtext11id, #subtext12id, #subtext13id, #subtext14id, #subtext15id
{ /* parent for all is WOmainDiv. These are the labels wraped around each circular pic. */
  position: absolute; /* The position varies for each and set in circle.js. */
  display: block; 
  visibility: hidden;
  color: black; /*#600; /* dark green */
  text-shadow: none;
  font-weight: bold;
}


.rightSideDiv { /* sits within WOmainDiv but intended to cover right 80% of screen when in use. Precise location will be set in resize.js */
  position: absolute;
  display: block; /*allows for setting width, height*/
  color: darkblue; /* these atrributes do not take hold, perhaps because the div is not defined at the start. */
  left:20%; /* Are reset in circle.js -> resetRightSideDiv */
  top:0px;
  width:80%; /* when present this div is to the right of 2-3 columns of circle nav icons on the left 20% */
  height:100%; /* relative to parent WOmainDiv */
  font-family: CenturySchoolbook, Verdana, Arial, Helvetica;
  font-size: 16px;
  background-color: white;
  z-index:3; /* in front of most everything */
}

#rightSideTopTable { /* sits within rightSideDiv. Precise location will be set in resize.js */
  position: relative;
  display: block; /*allows for setting width, height*/
  top:0; /* top of rightSideDiv */
  width:99%; 
  height:auto; 
  table-layout:fixed; /* force the columns to be sized as stated in 'person'.html */
  color:#00539b; /* font color light blue */
  background: white; 
  padding:1%;
  z-index:3; /* in front of most everything */
}
  

#rightSideSpan { /* within parent rightSideDiv, when present is below table and above iframe */
  position: relative; /* automatically puts below the table */
  display: block; /*allows for setting width, height */
  width:98%; 
  height:auto; /* the amount of text varies per person */
  padding:1%; 
  z-index:4; /* in front of most everything */
}
  
#rightSideFrame { /* sits within rightSide div and below rightside span if present. */
  position: relative; /* automatically below the span, which is usally~50% from the top of WOmainDiv */
  display: block; /*allows for setting width, height */
  top:0; 
  width:99%; 
  height:100vh; /* 100% height of the visible portion of the browser, so sticks below the screen bottom */
  background-color: #FFD580; /* smokey white I think */
  vertical-align:top;
  z-index:4; /* in front of most everything */
}
  
#footerId { /* parent is body. sits below rightSideDiv */
	position:absolute; 
	display:block; 
	bottom:0px; /* force to bottom of body */
	width:100%; 
	height:20vh; 
	background-color:#0F1D38; 
	z-index:1;
}