/* page */

header, section, nav, footer, article { display: block; }

body {
margin: 0; padding: 0; background: #0e1d34;
}
#bg {
min-width: 900px;
background: #0e1d34 url('iotb-home-gradient.jpg') no-repeat scroll bottom right; font-family: Helvetica, Arial, sans-serif;
background-image: -moz-radial-gradient(100% 95%, circle, #d06521 10%, #0e1d34 60%);
background-image: -webkit-gradient(radial, 100% 95%, 0, 100% 95%, 1000, from(#d06521), to(#0e1d34));
}

.container { min-width: 860px; width: 90%; margin: 0 auto; padding: 0 20px; position: relative; }

/* type */

body { font-size: 14px; line-height: 1.5em; }
h2 { font-size: 1.5em; line-height: 1em; margin: .8em 0; font-weight: normal; }
h3 { font-size: 1em; line-height: 1.5em; font-weight: bold; }
p, ul { margin: .75em 0; padding: 0; }
li { margin: 0; padding: 0; }
a, a:link, a h3, a:link h3 { color: #229; text-decoration: underline; }
a:visited, a:visited h3 { color: #50230a; }
a:hover, a:focus { text-decoration: none; }
a:active {  }


/* header */

#main { margin: 0 auto 3em auto; -moz-box-shadow: -4px 0px 4px rgba(200,200,255,.2);
-webkit-box-shadow: 0px 0px 4px rgba(200,200,255,.2);
box-shadow: 0px 0px 4px rgba(200,200,255,.2);
background-color: rgb(0,4,30); color: #fff; padding: 1.5em 0; }
.home #main { min-height: 5.5em; }
.info #main { padding: 1.75em 0 1.25em 0; }

h1 { font-size: 3em; line-height: 1em; color: #fff; text-shadow: 0px 0px 3px rgba(0,0,0,.4); padding: 0; font-family: "adelle-1","adelle-2",sans-serif; }
.home h1 { float: left; margin: 0 6% 0 0; width: 46%; }
.info h1 { color: #ddd; margin: 0; padding: 0; }

.home h1 .think { display: block; font-size: .6em; line-height: 1.666em; }
.info h1 .think { /* color: #ff9050; */ }
h1 a, h1 a:link, h1 a:visited { color: #fff; text-decoration: none; }

#main p { font-size: 1.25em; line-height: 1.5em; margin: 0 0 0 54%; text-shadow: 0px 0px 1px rgba(255,255,255,.2); }
#main img { float: right; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#main a:hover img, #main a:focus img { background-color: rgba(255,255,255,.5);
-moz-box-shadow: 0px 0px 7px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 7px rgba(255,255,255,.5);
box-shadow: 0px 0px 7px rgba(255,255,255,.5); }

/* sections */

section { background-color: #fff; position: relative; z-index: 2;
background-image: -moz-linear-gradient(0 200px,#e6e6e6,#ffffff);
background-image: -webkit-gradient(linear, left top, right top, from(#e6e6e6), to(#ffffff));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr="#e6e6e6",EndColorStr="#ffffff");
-moz-box-shadow: 0px 0px 7px rgba(0,0,0,1);
-webkit-box-shadow: 0 0 7px rgba(0,0,0,1);
box-shadow: 0px 0px 7px rgba(0,0,0,1);
}
.home section { width: 46%; }

section, #home li:first-child {
-moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;
border-radius: 10px 10px 0 0;
}

#elevator { display: none; width: 1.85em; height: 3em; padding: 2px; z-index: 3; position: absolute; top: 6em; margin-top: .25em; margin-left: 2px; left: 46%; background-color: #00041c; }

.stick { background-color: #271306; height: 90%; z-index: 1; position: absolute; bottom: 0; right: 35%; width: 4%; }

/* info section */

#info { clear: both; float: right; margin-right: 0; padding: 0; }
#info h2 { margin: .8em 20px .5em; }
#info nav p { margin: 1.125em 20px; }
#info p { margin: .75em 20px; text-align: justify; }
#info h3 { font-size: 1em; line-height: 1em; margin: .5em 0; padding: .25em 20px; background-color: #ccc; color: #333; font-weight: bold; text-shadow: 0 0 1px rgba(255,255,255,.3); }

/* updates section */

#updates { float: left; margin: 0; }
#updates h2 { margin-left: 20px; float: left; }
#updates nav { float: left; margin-top: 1.2em; font-size: .8; font-weight: normal; font-style: italic; position: relative; margin-left: 10px; }
#updates article { clear: left; margin: 0; border-right: 4px solid #ffffff;
-moz-transition: border-color .25s linear; /* FF 4 */
-webkit-transition: border-color .15s linear;
-o-transition: border-color .25s linear; /* border-color not animatable as of O 10.5 */
 }
#updates article:hover { border-color: #f0a561; background-color: #ffffee; background-color: rgba(230,230,170,.4); }
#updates article a { display: block; padding-bottom: 1.25em; color: #000; text-decoration: none; }
#updates article time { float: right; display: block; margin: .25em 1em 0 0; width: 3.5em; padding: 2px; text-align: center; background-color: #c6c6ff; line-height: 1.5em; font-weight: bold; }
#updates article:hover time { background-color: #b6b6ef; }
#updates article time span { display: block; font-size: .75em; font-weight: normal; }
#updates article h3 { margin: 0 6em .75em 0; padding: 1em 0 0em 20px; border-top: 1px solid #999; text-decoration: underline; }
#updates article:hover h3 { text-decoration: none; }
#updates article p { margin: 0 6em 0 20px; padding: 0; text-align: justify; }

/* home nav (on about pages) */

#home { float: left; width: 20%; background: rgb(0,4,30); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 4px rgba(200,200,255,.2);
-webkit-box-shadow: 0px 0px 4px rgba(200,200,255,.2);
box-shadow: 0px 0px 4px rgba(200,200,255,.2); }
#home a, #home a:link { display: block; padding: .75em 20px; text-decoration: none; color: #ddd; }
#home a:hover, #home a:focus { text-decoration: underline; }
#home ul, #home li { margin: 0; padding: 0; line-height: 1em; list-style: none; font-weight: normal; }
#home li.current { background-color: rgb(0,3,22); }
/* first-child gets border radius above */
#home li:last-child {
-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;
border-radius: 0 0 10px 10px; }
#home li:first-child a { padding-top: 1em; }
#home li:last-child a { padding-bottom: 1em; }


/* about sections */

#about { float: right; width: 65%; padding: .25em 0; }
#about h2 { border-bottom: 1px solid #999; margin: .75em 20px; padding-bottom: .25em; } /* .375em too high, compensate with menu position */
#about h3 { margin: .75em 20px; font-size: 1em; font-weight: bold; }
#about p, #about ul { margin: 1.5em 20px; line-height: 1.5em; }
#about li { margin: 0 0 0 30px; padding: 0; }
#about form { background-color: #ccc; margin: 1em 0; padding: 1em 0px; }
#about form #emailconfirm { background: #9f9; padding: .75em 20px; margin: .75em 0 1.5em 0; }
#about form .note { float: right; font-style: italic; }
#about form label { display: block; float: left; width: 150px; }
#about form .wide { width: 360px; }
#about form .narrow { width: 180px; }
#about form textarea { overflow: auto; }
#about .sendemailbutton { margin-left: 170px; height: 3em; padding: 0 10px; font-weight: bold; }

/* footer */

footer { clear: both; padding: .1em;
-moz-box-shadow: -3px -3px 3px rgba(0,0,0,.4);
-webkit-box-shadow: 0px -3px 3px rgba(0,0,0,.4);
box-shadow: 0px -3px 3px rgba(0,0,0,.4);
background-color: rgb(0,4,30); }
footer p { font-size: .75em; line-height: 1.5em; margin: .75em 20px; color: #ccc; text-align: center; }
footer a, footer a:link, footer a:visited { color: #ccc; }



/* narrow display */

@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
	#bg { min-width: 480px; }
	.container { min-width: 400px; width: 85%; padding: 0; }
	#main { text-align: center; margin-bottom: 2em; }
	.home h1 { width: auto; float: none; margin: 0; }
	.info h1 { font-size: 2em; }
	#main p { font-size: 1.05em; margin: 1em auto 0 auto; padding-top: 1em; width: 23em; border-top: 1px solid #013; text-shadow: 0 0 1px rgba(255,255,255,.2); }
	.home section { float: none; width: 100%; }
	#info { }
	#elevator { left: 100%; margin-left: 0px; }
	#updates { margin-top: 1em; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	.stick { display: none; }
	#home { float: none; margin: 0; width: 80%; margin: 0 14% 2em 6%; }
	#main a[title="Subscribe"] { position: absolute; right: 0; top: 6.75em; margin-top: -16px; z-index: 3; }
	#home ul { height: auto; overflow: hidden; }
	#home li { float: left; width: 33.3%; }
	#home li a { padding: 1em; text-align: center; }
	#home li:last-child {
	-moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;
	border-radius: 0 10px 10px 0; }
	#about { clear: left; float: none; margin: 0; width: 100%; }
	#about form .note { float: none; text-align: right; font-size: .75em; }
	#about form .wide { clear: left; margin-top: .5em; width: 360px; }
	#about form textarea { overflow: auto; }
	#about .sendemailbutton { margin: 0 20px; height: 3em; padding: 0 10px; font-weight: bold; }
	footer p { width: 85%; margin: .75em auto; }
}