html { background: url(../images/bg-x.jpg) top left repeat-x #EAE8D9; }
body { background: url(../images/bg.jpg) top center no-repeat; font: 13px/1.4em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; color: #1b1b1b; }
#header { text-align: center; padding-top: 30px }
#content { background: #fff; padding: 10px 0 }
/* @group Links & Text */
a { color: #870018; font-weight: bold; text-decoration: none }
a:hover { color: #000 }
h1.u, h2.u, h3.u, h4.u { border-bottom: 1px solid #ccc; }
h2.hb { position: relative; right: 20px }
h2.hr { position: relative; right: 20px }
h3.hr { color: #fff; background: url(../images/h3-bg.jpg) top left repeat-x #581515; font-weight: normal; font-size: 14px; padding: 8px; margin: 0; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px }
h3.hr a { color: #fff; display: block }
h3 { margin-bottom: 5px }
h4 span { color: #5FA2C5; }
.light { color: #999 }
.r { text-align: right }
.fr { float: right }
dd { margin: 0 0 2em 20px ; }
/* @end */
/* @group Lists */
ul.nl { list-style: none; margin: 0; padding: 0; }
ul.nl li { margin: 0; padding: 0 }
ul.ml { list-style: none; margin: 0; padding: 0; }
ul.ml li { margin: 0; padding: 10px 0 }
/* @end */
/* @group Nav */
#nav { background: url(../images/nav/nav-bg.png) top left no-repeat; position: relative; width: 998px; height: 145px; margin: 0 auto; text-align: center }
#nav ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 45px; left: 145px}
#nav ul li { width: 170px; height: 41px; margin: 0 5px 0 0; padding: 0; float: left; }
#nav ul li a#n-home { background: url(../images/nav/home.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
#nav ul li a#n-about { background: url(../images/nav/aboutus.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
#nav ul li a#n-research { background: url(../images/nav/ourresearch.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
#nav ul li a#n-where { background: url(../images/nav/where.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
#nav ul li a#n-photos { background: url(../images/nav/photos.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
#nav ul li a#n-work { background: url(../images/nav/work.png) top left no-repeat; display: block; width: 170px; height: 41px; text-indent: -9000px}
/* @end */
/* @group Top Nav */
#top-nav { text-align: right; display: none }
#top-nav ul { margin: 0; padding: 0; list-style: none; float: right }
#top-nav ul li { margin: 0 10px 0 0; padding: 0; float: left; font-size: 11px }
#top-nav ul li a { color: #43546b }
/* @end */
/* @group Boxes */
.mb { margin-bottom: 3em; }
.box, .box1 { margin-bottom: 20px }
.box1 { background: url(../images/box1-bg.jpg) top left repeat-x #E2DABF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 10px; -moz-box-shadow: 0px 0px 4px #c0c0c0; -webkit-box-shadow: 0px 0px 4px #c0c0c0; }
.box2 { background: url(../images/box2-bg.jpg) top left repeat-x #f6f0d8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.box3 { background: url(../images/box3-bg.jpg) top left repeat-x #fff; padding: 10px }
.box4 { background: #fff; padding: 6px; margin-bottom: 6px }
/* @end */
/* @group Index */
#about-expanded { display: none }
#photos img, .i1 { padding: 3px; border: 1px solid #888; -moz-box-shadow: 0px 0px 4px #888; -webkit-box-shadow: 0px 0px 4px #888; margin: 0 6px 6px 0}
#sites li { margin-bottom: 2em }
#sites li img { float: left; margin-right: 10px }
/* @group Donate */
.box-donate { height: 50px; margin-bottom: 2px; position: relative }
.box-donate a img.btn,
.box-donate form.f-row { position: absolute; top: 17px; right: 5px; width: 77px }
.box-donate .d-desc { position: relative; top: 6px }
.box-donate #d-custom { position: relative; top: 16px }
.box-donate #t-custom { width: 30px }
#donate-5 { padding: 5px 5px 5px 60px; background: url(../images/index/donate-5.png) no-repeat 5px center #f6f0d8; }
#donate-20 { padding: 5px 5px 5px 60px; background: url(../images/index/donate-20.png) no-repeat 5px center #f6f0d8; }
#donate-50 { padding: 5px 5px 5px 60px; background: url(../images/index/donate-50.png) no-repeat 5px center #f6f0d8; }
#donate-custom { padding: 5px 5px 5px 60px; background: #f0e8cd none; }
#donate-custom form { width: 155px; float: right }
#donate-custom form img { position: relative; bottom: 6px }
/* @end */
/* @end */
/* @group Footer */
#footer { background: url(../images/footer.png) top left no-repeat; position: relative; width: 998px; height: 97px; margin: 0 auto; text-align: center; bottom: 17px; }
#footer-content { position: absolute; top: 35px; left: 10px; padding: 10px; width: 960px; color: #706953 }
/* @end */
/* @group Photos */
#idx-photos { text-align: right }
#photos { text-align:center; }
#photos img { margin: 6px }
#photos a.active img { outline:1px solid #000; z-index:9999; position:relative; }
.simple_overlay { display:none; z-index:10000; background-color:#333; width:800px;min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; }
/* close button positioned on upper right corner */
.simple_overlay .close { background-image:url(../images/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }
#img { border:1px solid #666; }
.next, .prev { position:absolute; top:40%; border:1px solid #666; cursor:pointer; display:block; padding:10px 20px; color:#fff; font-size:11px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.prev { left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0; }
.next { right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0; }
.next:hover, .prev:hover { text-decoration:underline; background-color:#000; }
.disabled { visibility:hidden; }
.progress { position:absolute; top:45%; left:50%; display:none; }
.next, .prev, .info { background:#333 !important; background:rgba(0, 0, 0, 0.6); }
.info { display: none !important }
/* @end */
/* @group Scrollable */
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable { position:relative; overflow:hidden; width: 360px; height:220px; }
.scrollable .items { width:20000em; position:absolute; clear:both; }
/* single scrollable item */
.scrollable .items div.sc-container { float:left; width:340px; height: 200px; margin: 10px }
.scrollable .items div.sc-container img { float: left }
/* active item */
.scrollable .active { border:2px solid #000; z-index:9999; position:relative; }
/* this makes it possible to add next button beside scrollable */
/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
/* @end */
/* @group Forms */
.text { background: #F6F0D8; padding: 5px; border: 1px solid #D4C397; width: 200px; color: #384558; font: 13px/1.4em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;}
.lbl { text-align: right; padding-right: 6px; }
#webmail-login td { padding-bottom: 6px; }
/* @end */
/* @group Board */
ul#board { list-style: none; padding: 0; margin: 0; }
ul#board li { margin: 0 0 3em 0; padding: 0; }
ul#board li img { float: left; margin-right: 10px;; }
ul#board h4 { margin: 0 0 10px 0; border-bottom: 1px solid #ccc; }
ul#board h4 small { font-size: 13px; float: right }
ul#board h4 small a { font-weight: normal; }
/* @end */
.pubs li { margin-bottom: 2em; }