html {overflow: hidden;}
  

body {
	font-family:"Tahoma","Arial"; 
	color:#333;
	font-size:13px;
	line-height:1.1em;
	margin:0;
	padding:0;
	background-color:#666;
	background:url(images/background5.jpg) no-repeat #777;
	background-position: center top;
}

div.box {/*see  http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/ */ 
   -moz-box-sizing: border-box;  
   -webkit-box-sizing: border-box;  
    box-sizing: border-box;  
} 


/*ADD SETTING TO TURN OFF BACKGROUND-COLOR FOR PRINTING */
textarea {font-family:"Gill Sans MT","Century Gothic","Dustismo","Arial"; font-size:11px /*, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif*/}
del {color:red}
a {text-decoration:none;color:blue}
p, li, legend {margin:.2em .3em .4em .3em;line-height:1.3em; font-size:13px;font-weight:normal} /*"Tahoma","Dustismo","Arial"*/

p:last-child {padding-bottom:.4em}
p.center {text-align:center}
.green {background-color:green}
.ltgreen {background-color:lightgreen}
.olive {background-color:brown}
.ltolive {background-color:olive}

#boxNews div.boxContent p {padding-bottom:6px;border-bottom:2px dotted silver}

span.boxLink {color:blue;cursor:pointer}
#container {position:fixed;background-position:center center;background-image:url(images/spacer.gif)}
#container:hover {cursor:move}

#barAcross {position:absolute;height:40px;left:0;right:0;background-color:blue;opacity:0; filter:alpha(opacity=0);}
#barDown {position:absolute;width:40px;top:0;bottom:0;background-color:blue;opacity:0; filter:alpha(opacity=0);}

#borderLeft,#borderRight,#borderTop,#borderBottom {
	position:fixed;
	background-color:blue;
	border:1px solid lightblue;
	opacity:.3;
	filter:alpha(opacity=30);
	cursor:pointer;
	z-index:90;
}
#borderCopy { position:fixed;background-color:lightblue;padding:3px;z-index:90;right:0;bottom:0;-moz-border-radius-topleft: 12px;-webkit-border-radius-topleft: 12px;}
	

#borderLeft {left:0;width:25px;height:60px;top:44%;-moz-border-radius-bottomright: 12px;-webkit-border-radius-bottomright: 12px;-moz-border-radius-topright: 12px;-webkit-border-radius-topright: 12px;}
#borderRight {right:0;width:25px;height:60px;top:44%;-moz-border-radius-topleft: 12px;-webkit-border-radius-topleft: 12px;-moz-border-radius-bottomleft: 12px;-webkit-border-radius-bottomleft: 12px;}
#borderTop {top:0;height:25px;width:60px;left:47%;-moz-border-radius-bottomleft: 12px;-webkit-border-radius-bottomleft: 12px;-moz-border-radius-bottomright: 12px;-webkit-border-radius-bottomright: 12px;}
#borderBottom {bottom:0;height:25px;width:60px;left:47%;-moz-border-radius-topleft: 12px;-webkit-border-radius-topleft: 12px;-moz-border-radius-topright: 12px;-webkit-border-radius-topright: 12px;}
/*
#borderLeft:hover, #borderRight:hover, #borderTop:hover, #borderBottom:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
}
*/
#borderLeft:hover {width:25px;background:url(images/iconPageLeft.png) no-repeat center; opacity:.9; filter:alpha(opacity=90);}
#borderRight:hover {width:25px;background:url(images/iconPageRight.png) no-repeat center; opacity:.9; filter:alpha(opacity=90);}
#borderBottom:hover {height:25px;background:url(images/iconPageDown.png) no-repeat center; opacity:.9; filter:alpha(opacity=90);}
#borderTop:hover {height:25px;background:url(images/iconPageUp.png) no-repeat center; opacity:.9; filter:alpha(opacity=90);}


#mapLink,#viewLink,#helpLink,#crumbLink,#settingsLink {
	background-color:lightgreen;
	text-align:center;
	height:15px;
	padding:3px;
	-moz-border-radius: 12px;
	-webkit-border-radius:12px;
	/*display:inline-block; IE doesn't accept this*/
	display:inline;
	margin-left:10px;
}
#mapLink, #viewLink, #helpLink, #settingsLink {cursor:pointer;padding-left:10px;padding-right:10px;}

.rounded {-moz-border-radius: 16px; -webkit-border-radius:16px;}

#boxHelp {bottom:25px;left:20px;z-index:500;position:fixed;display:none;background-color:silver}
#boxSettings {bottom:25px;left:20px;z-index:500;position:fixed;display:none;background-color:silver}
.fixed .boxTitle{cursor:default}/* these titles can't be used as move handles */

#panelTop{left:10px;top:5px;padding:3px;position:fixed;z-index:100;}
	#crumbLink {width:auto;text-align:left;padding-left:10px;padding-right:10px;position:relative}
	.navLink {cursor:pointer;}
	.link:hover,span.navLink:hover {color:orange}

#panelBottom {left:10px;bottom:0;padding:3px;height:20px;width:240px;position:fixed;z-index:100}



#crosshairs {position:absolute; 
	background-color:transparent;
	border:2px dotted orange;
	width:208px;height:188px;
	-moz-border-radius: 25px;
	-webkit-border-radius:25px;
	visibility:hidden;
	z-index:1;/*must be 1 or else takes control over box mouseover */
}

.box:hover {border:1px solid orange}
.box {position:absolute;
	visibility:visible;
	cursor:default;

	border:1px solid transparent; 
	width:210px;
	height:190px;
	padding:0px;
	margin:0px;
	z-index:2;
	-moz-border-radius: 22px;
	-webkit-border-radius:22px;
	background-repeat: no-repeat;
	background-position: 0px 0px ;
	background-color:blue;
	/*--moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px*/
}
.box.boxWide {width:416px}
.box.boxTall {min-height:380px;height:auto}


.box > .boxTitle {
	font-family:"Century Gothic","Arial";
	z-index:80;
	position:absolute;
	cursor:move;
	color: white; /*#22c;*/
	background-color: blue;/*#ccff99;*/
	text-align:center;
	padding:5px 10px 5px 10px;
	left:7px; top:5px;right:7px;bottom:auto;

	font-weight:bold;
	font-size:1.2em;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	opacity: .75;
	filter:alpha(opacity=75);
}


.boxContent {position:absolute;
	display:block;
	overflow:auto;
	z-index:10;
	top:7px;
	bottom:7px;
	left:7px;
	right:7px;
	padding:4px 7px 4px 7px;
	text-align:left;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background-color:#f2f8ed;/* ddeebb #ccff99;*/
}
.boxContentRight:hover {border-bottom:1px solid orange}

.boxContentRight {
	position:absolute;
	display:block;
	border:1px solid transparent; 
	overflow:auto;
	z-index:10;
	left:208px;
	margin:0px;
	top:0px;
	bottom:-1px;
	padding:4px 7px 4px 7px;
	text-align:left;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	background-color:#f2f8ed;
	 /*initial value */
	/*
	opacity: 0;
	filter:alpha(opacity=0);
	*/

}

/*.depth1 .boxContent {display:none}*/
.boxTitle + .boxContent,
.boxTitle + .boxContentLeft {	top:34px;	*top:29px;}

/*.boxTop > .boxTitle {bottom:3px;top:auto} //Causes title to appear below blurb 
.boxTop > .boxTitle + .boxContent {top:7px;bottom:34px}

*/
/*.depth1.boxLeft > .boxTitle {text-align:left}
.depth1.boxRight > .boxTitle {text-align:right}
*/

.boxSplit > .boxTitle {width:174px}
.box.boxSplit > .boxContent {width:180px}

.box.boxTall.boxWide > .boxContent {padding:20px 20px 20px 25px}



.homeBox {border:1px solid transparent;
	background-color:transparent;
	z-index:20;
	font-size:1.1em;
	
}

.homeBox p {text-align:center;}
.homeBox h2 {margin:10px 3px 9px 3px;text-align:center;}
.box.homeBox .boxContent {top:0;bottom:0;left:0;right:0}

/*.homeBox:hover {background-color:#ddff99}*/
.homeTitle {text-align:center;font-weight:bold;font-size:16px;margin:0}



.depth1 {}
.depth1:hover {}/*background-color:#ffcc66*/

.presentation {margin-top:15px;font-weight:bold;margin-bottom:2px}
ul.tight {margin:.2em .2em .2em 0;padding-left:1.3em;}
ul.tight > li {margin-bottom:.2em}
li {margin-bottom:1.1em}

.boxContent.portfolio {
	padding:0px;
	text-align:center;
	top:auto;
	opacity: 0; /*initial value */
	filter:alpha(opacity=0);
}

.portfolio a {clear:both;font-weight:normal;word-wrap:white-space}

#boxMenu,#boxMenu2 {cursor:default;	
	background-color:blue;
	z-index:500;
	position:absolute;
	top:-100px;
	opacity: .7; /*initial value */
	filter:alpha(opacity=70);
}
#buttonTopLeft,#buttonTopRight,#buttonBottomLeft,#buttonBottomRight {cursor:pointer;	
	background-color:blue;
	z-index:1;
	position:absolute;
	top:-100px;
	opacity: .7; /*initial value */
	filter:alpha(opacity=70);
}

#boxMenu,#dialogClose {border-left:1px dotted lightblue;border-top:1px dotted lightblue;border-right:1px dotted lightblue;-moz-border-radius-topleft: 12px;-webkit-border-radius-topleft: 12px;-moz-border-radius-topright: 12px;-webkit-border-radius-topright: 12px;}
#boxMenu2 {border-left:1px dotted lightblue;border-top:1px dotted lightblue;border-bottom:1px dotted lightblue;-moz-border-radius-topleft: 12px;-webkit-border-radius-topleft: 12px;-moz-border-radius-bottomleft: 12px;-webkit-border-radius-bottomleft: 12px;}
#boxMenu img {float:left;padding:4px 3px 4px 5px;cursor:pointer;}
#boxMenu2 img {float:left;clear:left;padding:4px 3px 4px 5px;cursor:pointer;}
#buttonTopLeft, #buttonTopRight, #buttonBottomLeft, #buttonBottomRight {float:none;border:1px dotted lightblue;-moz-border-radius: 12px;-webkit-border-radius: 12px}

#boxMenu table td:hover {}/*background-color:#ffcc66; */
.bottom {text-align:bottom;bottom:3px;top:;height:auto;background-color:lightgreen}

.rounded {}

/* rounded buttons */
button {
	position:relative;
	border:none;
	margin:0;
	padding:0 10px 0 0; 
	cursor:pointer; 
	cursor:hand; 
	line-height:27px;
	height:27px;
	background:url(images/button.gif) no-repeat right top; 
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

button span { 
	position:relative;
	left:-2px;/*Not sure why have to do this for firefox!*/
	_left:0;
	white-space: nowrap;
	line-height:27px;
	height:27px;
	background:url(images/button.gif) no-repeat left top; 
	display:block;
	padding:0 0 0 10px;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Safari and Google Chrome only - fix margins */
	button span {margin-top: -1px;}
}


button:hover {background-position:right -155px;}
button:hover span {background-position:left -155px;}

.grid10x10 {background-color:silver;}
.grid10x10 td {width:19px;height:19px;
	background-color:white;
	border:0;/*DON'T PUT BORDER >0 IN HERE; its inside td, not between cells*/
	font-family:Arial;
	font-size:10px;
	text-align:center;
	vertical-align:center;
}
.grid10x10 td.selected {background-color:silver;}

.tableTopAlign td {vertical-align:top}

.math,.math p {	line-height:1.7em;}
/*
fieldset {
	border:1px dotted green;
	line-height:1.7em;
	padding:5px;
}

legend {
	border:1px dotted green;
	background-color:#ddeebb;
	padding:3px;
}
*/

.boxVideo {margin-left:8px;margin-top:15px;display:block}
/* a.more2 does same thing as a.more, but it doesn't trigger jQuery actions. */
a.buttonMore, a.buttonMoreOffsite  {position:absolute; bottom:13px; right:23px; top:auto; z-index:200;padding:0 2px 2px 5px; background-color:lightblue; display:block;visibility:hidden;opacity:.8;filter:alpha(opacity=80);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px}
div.box:hover a.buttonMore {visibility:visible}
div.box a.buttonMoreOffsite {visibility:visible}

#dialog {position:absolute;background-color:#f2f8ed;
	opacity: 0;filter:alpha(opacity=0);display:none;
	border:1px solid blue;
	z-index:1000;width:450px;padding:15px 10px 15px 15px;height:500px}
#dialogClose {opacity: 0;filter:alpha(opacity=0);display:none;
	z-index:1001; position:absolute;width:25px;height:20px;cursor:pointer; background:url(images/buttonClose.gif) center no-repeat #f2f8ed}
#dialogClose:hover {}

#dialog > div#dialogContent {position:relative;width:445px;height:100%;overflow-x:auto;overflow-y:scroll;opacity: 1 !important;filter:alpha(opacity=100) !important;background-color:transparent}

#dialog #dialogContent > div.box {position:relative;background-color:transparent; margin-bottom:10px;height:auto;opacity: 1 !important; filter:alpha(opacity=100) !important;margin-right:10px}

#dialog #dialogContent > div.box > .boxTitle {position:relative;cursor:default;width:380px;line-height:1.1em;opacity: 1;
	filter:alpha(opacity=100);}

#dialog #dialogContent > div.box > .boxContent {position:relative; width:385px;margin:0px;padding:10px}
#dialog #dialogContent > div.box > .boxContentRight {top:35px;bottom:10px;right:7px;border:0}

#dialog #dialogContent div.boxTall {min-height:30px;height:auto}
#dialog #dialogContent div.box .boxTitle + .boxContent {margin-top:10px;top:0px}
#dialog #dialogContent a {color:blue}