/*
	Serum.fi main CSS
	Created by Hallanvaara
*/

html {height: 100%;}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #bebebe; text-align: left; background: #3a3a3a; height: 100%;}


p {margin: 0 0 10px 0; line-height: 18px;}
h1 {font-size: 22px; font-weight: normal; margin: 0 0 20px 0;}
h2 {font-size: 18px; font-weight: normal; margin: 0 0 15px 0;}
h3 {font-size: 14px; font-weight: normal; margin: 0 0 10px 0;}
img {margin: 0 0 15px 0;}

a {color: #ffffff; text-decoration: none;}
a:hover {text-decoration: underline; color: #ffa200;}

.ingress {}

.bulletlink {padding: 0 0 0 19px; background: url(../images/linkbullet.gif) no-repeat 0 -20px; text-decoration: none; outline: none;}
.bulletlink:hover {background-position: 0 -114px; text-decoration: none;}
.bulletlinkrev {padding: 0 0 0 19px; background: url(../images/linkbulletrev.gif) no-repeat 0 -20px; text-decoration: none; outline: none;}
.bulletlinkrev:hover {background-position: 0 -114px; text-decoration: none;}
.bulletlink.active {background-position: 0 -208px;}
.bulletlink.active:hover {background-position: 0 -302px;}


.prevbtn {display: block; width: 14px; height: 14px; overflow: hidden; background: url(../images/prevbtn.gif) 0 -20px;}
.prevbtn:hover {background-position: 0 -114px;}
.nextbtn {display: block; width: 14px; height: 14px; overflow: hidden; background: url(../images/nextbtn.gif) 0 -20px;}
.nextbtn:hover {background-position: 0 -114px;}


.miumau {padding: 0 10px 0 0; background: url(../images/miumau.gif) no-repeat center -19px;}
a:hover .miumau {background-position: center -52px;}

/* Page elements */ 

#bgpic {position: fixed; width: 100%; height: 100%; z-index: 1;}
#flashnotify {position: absolute; left: 30px; bottom: 30px; z-index: 100; color: red; font-size: 1.5em; color: #999999;}
#gallerycontainer {position: fixed; width: 100%; height: 100%; z-index: 2;}

#scrollcontainer {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;}

#container {position: absolute; left: 30px; top: 30px; width: 610px;}
#pageheader {position: absolute; left: 0; top: 0; width: 100%; height: 57px; background: #262626;}

.col1 {float: left; display: inline; width:270px; margin: 0 30px 0 0;}
.col2 {float: left; display: inline; width:270px; margin: 0;}
.col1-2 {float: left; display: inline; width: 570px; margin: 0;}

/* Logo */
#logo {display: block; position: absolute; left: 15px; top: 15px; width: 82px; height: 27px; background: url(../images/serum_logo.gif) no-repeat 0 -20px; outline: none;}
#logo:hover {background-position: 0 -67px;}

/* Main menu */
#mainmenu {list-style-type: none; margin: 0; padding: 0; position: absolute; right: 15px; top: 20px; width: 478px; height: 17px;}
#mainmenu li {float: right; display: inline; margin: 0 0 0 10px;}

#mainmenubtn1, #mainmenubtn2, #mainmenubtn3 {outline: none;}
#mainmenubtn1 {display: block; width: 67px; height: 17px; background: url(../images/mainmenubtn_aboutus.gif) no-repeat 0 -20px;}
#mainmenubtn2 {display: block; width: 60px; height: 17px; background: url(../images/mainmenubtn_projects.gif) no-repeat 0 -20px;}
#mainmenubtn3 {display: block; width: 58px; height: 17px; background: url(../images/mainmenubtn_contact.gif) no-repeat 0 -20px;}
#mainmenubtn1:hover, #mainmenubtn2:hover, #mainmenubtn3:hover, #mainmenubtn1.active, #mainmenubtn2.active, #mainmenubtn3.active {background-position: 0 -57px;}


/* Page contents */
.pagecontent {position: absolute; left: 0; top: 57px; background: #262626; padding: 10px 20px 5px 20px; width: 570px; display: none;}
.pagecontent.wide {width: 595px; padding-left: 9px; padding-right: 6px;}
*:first-child+html .pagecontent.wide {padding-bottom: 21px;}
* html .pagecontent.wide {padding-bottom: 21px;}

/* Map container */
#mapcanvas {margin: 0 0 15px 0; width: 570px; height: 285px;}

/* Project gallery */
.album {position: relative; float: left; display: inline; margin: 0 9px 18px 10px; width: 177px; height: 52px; outline: none; cursor: pointer;}
.album:hover {background: #515151; text-decoration: none;}
.album img {position: absolute; left: 1px; top: 1px; float: none; border: 0; margin: 0;}
.album h3 {position: absolute; left: 62px; top: 5px; font-size: 12px; padding-right: 5px;}
.album .description {display: none;}

#selectedalbumnavi {position: relative; overflow: hidden; margin-bottom: 14px;}
#selectedalbumnavi .bulletlink, #selectedalbumnavi .bulletlinkrev {float: left; display: inline; margin: 0 10px 0 0;}
#selectedalbumtitle {font-size: 14px; float: left; display: inline; margin: -1px 10px 0 0;}

#selecteddesc {position: absolute; left: 0; top: 35px; background: #262626; padding: 0 20px 20px 20px; width: 570px; z-index: 1000; display: none;}
#selecteddesc.active {display: block;}

#prevnext {position: absolute; left: 450px; top: 0; color: #ffffff; width: 120px; height: 20px; z-index: 1000; text-align: right;}
	* html #prevnext {left: 274px;}
#selectedalbumnavi .prevbtn {position: absolute; right: 24px; top: 0; outline: none;}
#selectedalbumnavi .nextbtn {position: absolute; right: 0; top: 0; outline: none;}
.prevbtn.disabled, .nextbtn.disabled {background-position: 0 -208px;}


/* Hidden gallery to force generation of the album list xml */
#hiddengallery {position: absolute; right: 0; bottom: 0; height: 1px; width: 1px; overflow: hidden;}

/* MAKE SITE NON-JS COMPATIBLE */
#pagecontent0 {display: block;}
#mainmenubtn2 {display: none;}
#mapcanvas {display: none;}