/* documentation for site is coming... */

/* okay, let's begin with the overall page */

body {
	margin: 0;
	font-family: 'Lucida Grande', Verdana, Arial;
	font-size: 13px;
	height: 100%;
	background-color: #000000;
	background-image: url('/public/inc/images/earth.jpg');
	background-position: left bottom;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* now comes the whole top of page */

#logo {
	width: 800px;
	margin: 5px auto 5px auto;
}

.masthead {
	width: 800px;
	margin: 40px auto -5px auto;
	height: 94px;
	background-image: url('/public/inc/images/bluebanner.png');
	background-repeat: no-repeat;
}

/* first is for home page, next is for rest of site: both sit in masthead */
.imeet {
	width: 339px;
	height: 197px;
	background-image: url('/public/inc/images/imeet.png');
	background-repeat: no-repeat;
	position: absolute;
	right: auto;
	left: auto;
	margin: 0 0 0 20px;
}
.imeet-m {
	width: 220px;
	height: 128px;
	background-image: url('/public/inc/images/imeet-m.png');
	background-repeat: no-repeat;
	position: absolute;
	right: auto;
	left: auto;
	margin: 16px 0 0 20px;
}

/* login currently sits in masthead */

.login {
	margin: 30px 23px 0px 0px;
	font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #ffffff;
	width: 60px;
	float: right;
	padding: 6px 8px 6px 8px;
	text-align: center;
	background-color: #272c90;
	border: 2px solid #eeeeee;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

.login a,
.login a:link,
.login a:visited {color: #ffffff; text-decoration: none;}
.login a:hover { color: #0033ff; }

/* okay, end of masthead, now to rest of page */

/* panel = everything under the masthead */

#panel {width: 800px;margin: 5px auto 5px auto;}

/* The whole of site grey bar navigation element */

.navbar {
	text-align: center;
	margin: 0px 0px 0px 330px;
	width: 400px;
}

/* okay, now for menu items and lava effect, with extra notes to make it understood */

#lava {
	/* must be set to relative, so absolute position for child elements works */
	position: relative;
	background: url('/public/inc/images/navlava.png') no-repeat center bottom;
	text-align: center;
	width: 400px;
	height: 33px;
}

#lava ul {
	/* remove the list style and spaces*/
	margin:0;
	padding:0;
	list-style:none;
	display:inline;

	/* position absolute so that z-index can be defined */
	position:absolute;

	/* center the menu, depending on the width of the menu*/
	left:10px;
	top:0;

	/* should be higher than #box */
	z-index:100;
}

#lava ul li {
	/* need spaces between list items */
	margin: 10px 10px 0 10px;

	/* display list items in single row */
	float: left;
}

#lava ul li a {

/* to give size and other attributes to menu items */
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

#lava #box {

	/* position absolute so that z-index can be defined and able to move this item using javascript */
	position:absolute;
	left:0;
	top:5px;

	/* should be lower than the list menu */
	z-index:50;

	/* image of the right rounded corner */
	background:url('/public/inc/images/lava-tail.png') no-repeat right center;
	height:24px;

	/* add padding 5px so that the tail appears */
	padding-right:5px;

	/* self-adjust negative margin to make the box display in the center of the item */
	margin-left:-5px;
}

#lava #box .head {
	/* image of the left rounded corner */
	background:url('/public/inc/images/lava-head.png') no-repeat 0 0;
	height:24px;

	/* self-adjust left padding to make the box display in the center of the item */
	padding-left:5px;
}

/* end of menu bar */


/* now some content stuff */

.content-h
{
	width: 800px;
	overflow: hidden;
	background-color: transparent;
	background-image: url('/public/inc/images/transparent800b.png');
}
.content {
	width: 800px;
	overflow: hidden;
	background-color: transparent;
	background-image: url('/public/inc/images/transparent800.png');
	position: relative;
}

/* not sure why I have both here (above) but might have intended home page to be different, or maybe javascripts use them */

/* now onto the defined boxes for material content */

.text {
	color: #333333;
	font-size: 13px;
	width: 780px;
	line-height: 150%;
	padding: 15px 10px 15px 10px;
	background-color: transparent;
}

/* just in case we have links. Might need to review this later! */

a {color: #666666;}
a:hover { color: #0033ff; }

/* some home page specifics */

.headline1 {
	margin: 50px 90px -10px 220px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 19px;
	color: #ffffff;
	line-height: 140%;
}

.headline2 {
	margin: 30px 65px -10px 110px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
	color: #cccccc;
	line-height: 170%;
}

.red-home {
	margin: 50px 0px -20px 50px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff;
	width: 190px;
	padding: 6px 10px 6px 10px;
	text-align: left;
	text-shadow: #000000 1px 1px 2px;
	background-color: #f00;
	border: 2px solid #eeeeee;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	z-index: 2;
}

.grey-p {
	margin: 0px 0px 40px 80px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 210px;
	float: left;
	padding: 25px 10px 8px 10px;
	text-align: left;
	background-color: #cccccc;
	border: 2px solid #eeeeee;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	z-index: 1;
}

.tip { padding: 0px 0px 90px 10px; }

.tip-l { float: left; width: 360px;padding-left:20px;}
.tip-r { float: left; width: 360px;}

.clear { clear: both; }



/* and now layout rules for all the other pages */

/* First, some heading styles, all with curved edges (mostly, just not first one!) */

/* note that I've z-indexed each curvy head and text element so that the heading sits ABOVE the text: z-index: 2; sits above z-index: 1; */

h2 {
	text-align: left;
	font-weight: bold;
	font-size: 13px;
	color: #666666;
	margin: 0 0 10px 0;
}

.grey-h {
	margin: 0px 0px -20px 10px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #ffffff;
	width: 110px;
	padding: 2px 10px 4px 10px;
	text-align: left;
	text-shadow: #000000 1px 1px 2px;
	background-color: #999999;
	border: 2px solid #ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	z-index: 2;
}

.grey-hh {
	margin: 0px 0px -20px 10px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #ffffff;
	width: 190px;
	padding: 2px 10px 4px 10px;
	text-align: left;
	text-shadow: #000000 1px 1px 2px;
	background-color: #999999;
	border: 2px solid #ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	z-index: 2;
}

.grey-hhh {
	margin: 0px 0px -20px 10px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #ffffff;
	width: 400px;
	padding: 2px 10px 4px 10px;
	text-align: left;
	text-shadow: #000000 1px 1px 2px;
	background-color: #999999;
	border: 2px solid #ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	z-index: 2;
}

.grey-a {
	margin: 0px 0px -8px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 695px;
	padding: 25px 10px 18px 10px;
	text-align: left;
	background-color: #cccccc;
	border: 2px solid #eeeeee;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	z-index: 1;
}

.red-h {
	margin: 30px 0px -20px 10px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #ffffff;
	width: 190px;
	padding: 6px 10px 6px 10px;
	text-align: left;
	text-shadow: #000000 1px 1px 2px;
	background-color: #f00;
	border: 2px solid #ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	z-index: 2;
}

.grey {
	margin: 0px 0px 40px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 510px;
	padding: 25px 10px 8px 10px;
	text-align: left;
	background-color: #cccccc;
	border: 2px solid #eeeeee;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	z-index: 1;
}

.ltgrey-510 {
	margin: 4px 0px 40px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 510px;
	padding: 21px 10px 8px 10px;
	text-align: left;
	background-color: #bbbbbb;
	border: 2px solid #dddddd;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	z-index: 1;
}

.ltgrey-full {
	margin: 4px 0px 40px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 695px;
	padding: 21px 10px 8px 10px;
	text-align: left;
	background-color: #cccccc;
	border: 2px solid #dddddd;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	z-index: 1;
}

/* the next two are used in 2-col work: see contact.html */

.floater { float: left; width: 310px;}
.floater2 { float: left; width: 390px;}

.ltgrey-200 {
	margin: 4px 0px 40px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 200px;
	padding: 21px 10px 8px 10px;
	text-align: left;
	background-color: #bbbbbb;
	border: 2px solid #dddddd;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	z-index: 1;
}

.ltgrey-300 {
	margin: 4px 0px 40px 30px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 130%;
	color: #000000;
	width: 300px;
	padding: 21px 10px 8px 10px;
	text-align: left;
	background-color: #bbbbbb;
	border: 2px solid #dddddd;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	z-index: 1;
}

/* in case I've missed something... */

h3
{
	text-align: left;
	font-weight: bold;
	font-size: 120%;
	color: #333333;
	margin: 0 0 6px 0;
}

ul.bullets li {
	font-size: 90%;
	line-height: 140%;
}

td { font-size: 90%;}

/* for the imagebank page */

.imagebank {
	clear: both;
	width: 44px;
	float: left;
}

.quote {padding: 30px 13px 24px 0px;float: right; border:0px;}

/* now general placement of images */

.pic-l {padding: 3px 7px 2px 0px;float: left; border:0px;}

.pic-r {padding: 3px 0px 2px 7px;float: right; border:0px;}

a img {border:none;}

/* now stuff for hotspot work */

.hotspot {color:#ffffff; padding-bottom:1px; cursor:pointer}
#tt {position:absolute; display:block; background:url('/public/inc/images/tooltip/tt_left.gif') top left no-repeat;}
#tttop {display:block; height:5px; margin-left:5px; background:url('/public/inc/images/tooltip/tt_top.gif') top right no-repeat; overflow:hidden;}
#ttcont {font-size: 80%;display: block;padding: 0px 10px 1px 5px;margin-left: 5px;background: #666666;color: #ffffff;}
#ttbot {display:block; height:5px; margin-left:5px; background:url('/public/inc/images/tooltip/tt_bottom.gif') top right no-repeat; overflow:hidden;}

/* now to Easy Slider stuff overall */

/* start with image replacement */

.graphic, #prevBtn, #nextBtn {
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	text-indent: -8000px;
}
/* end of image replacement */

#container {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 696px;
	background: #eeeeee;
	margin-bottom: 2em;
	border: 11px solid #eeeeee;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}

#header {
	height: 80px;
	background: #000;
	color: #fff;
}

#slider{}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}

/* entire slider area will adjust according to the parameters provided here */

#slider li {
	width: 696px;
	height: 300px;
	overflow: hidden;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 140%;
	font-size: 12px;
	color: #444444;
}

/* this stuff for Qand A stuff inline with rest of page, not in box */

#container2 {
	margin: -20px 0 0 0;
	position: relative;
	text-align: left;
	width: 800px;
}

#slider2{}
#slider2 ul, #slider2 li{
	margin:-10;
	padding:0;
	list-style:none;
	}

#slider2 li {
	width: 800px;
	height: 150px;
	overflow: hidden;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	line-height: 140%;
	font-size: 12px;
	color: #444444;
}

/* back to sliders generally */

#prevBtn, #nextBtn {
	display: block;
	width: 30px;
	height: 77px;
	position: absolute;
	left: -41px;
	top: 71px;
}

#nextBtn { left: 707px; }

#prevBtn a, #nextBtn a {
	display: block;
	width: 30px;
	height: 77px;
	background: url('/public/inc/images/btn_prev.png') no-repeat 0 0;
}

#nextBtn a { background: url('/public/inc/images/btn_next.png') no-repeat 0 0; }

/* numeric controls */

ol#controls {
	margin: 1em 0;
	padding: 0 0 0 29px;
	height: 18px;
	font-size: 12px;
	font-weight: bold;
}

ol#controls li {
	margin: 0 10px 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 18px;
	line-height: 18px;
}

ol#controls li a {
	float: left;
	height: 18px;
	line-height: 18px;
	border: 2px solid #ffffff;
	color: #555;
	padding: 0 10px;
	text-decoration: none;
	background-color: #cccccc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

ol#controls li.current a {
	color: #ffffff;
	background-color: #999999;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* end of Easy Slider */

/* now to the footer stuff */

.disclaimer {
	margin: 0px 170px 10px 170px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: x-small;
	line-height: 120%;
	color: #ffffff;
	padding: 6px 14px 6px 14px;
	text-align: center;
	text-shadow: #000000 1px 1px 2px;
	background-image: url('/public/inc/images/transparent800c.png');
	border: 1px solid #666666;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}
.disclaimer a,
.disclaimer a:link,
.disclaimer a:visited {color: #ffffff; text-decoration: none;}
.disclaimer a:hover { color: #66CC00; }

/* and finally, the back button placement */

.goback { clear: both; padding-left: 30px; }