/****************************************
*	CSS STYLESHEET INFORMATION      *
*	 Style: Rapture Archives        *
*	  Type: Global                  *
*	  Date: 2010-2020               *
*	Author: Oleg Petrov             *
****************************************/

/*	    DOCUMENT CONTENTS

 QFC01 ---- Global
 QFC02 ---- Framework
 QFC03 ---- Navigation
 QFC04 ---- Marquee | Banners | Deco TVs
 QFC05 ---- ----
 QFC06 ---- ----
 QFC07 ---- ----
 QFC08 ---- ----
 QFC09 ---- ----
 QFC10 ---- ----

*/
/************************************************************************************************************************
*QFC01          GLOBAL                                                                                                  *
************************************************************************************************************************/

a            { outline: none;      }
img    	     { border: none;       }
textarea     { resize: none;       }
input  	     { outline: none;      }
:focus       { outline: none;      }
.L     	     { text-align: left;   }
.R     	     { text-align: right   }
.C     	     { text-align: center; }
.B     	     { font-weight: bold;  }
.indent	     { text-indent: 50px;  }

a:link	     { color: #a89f86; text-decoration: none; }
a:visited    { color: #a89f86; text-decoration: none; }
a:hover	     { color: #FFFFFF; text-decoration: none; }
a:active     { color: #a89f86; text-decoration: none; }

/************************************/
.closed     { color: #666666 !important; }
.vtop 	    { vertical-align: top; }
.vbot 	    { vertical-align: bottom; }
.hide       { display: none; }
.b-collapse { border-collapse: collapse; }
.right-vtop { text-align: right; vertical-align: top; }
.bg	    { background-image:url(frame/bg.jpg);background-repeat:repeat; }

.recovered  { color: #009900; }
.norecover  { color: #990000; }

.tbwidth-90  {width: 90px;}
.tbwidth-512 {width: 512px;}
.tbwidth-744 {width: 744px;}
/************************************/

html {
	height: 100%;
	margin-bottom: 0.01em;
}

body {
	margin: 0;
	padding: 0;
	color: #a89f86;
	font-family: "georgia";
	background: url('frame/site_bg.jpg') no-repeat fixed center top, #000000 url('frame/site_bg2.jpg');
	background-size: 100% 100%, auto;}

.b_line {
	width:850px;
	height:2px;
	background-image: url('frame/b-line.jpg');
}

.h1 {
	font-size: 2em; /*40px*/
	font-weight: bold;
	text-align: center;
}

.h2 {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

.h3 {
	font-size: 1.17em;
	font-weight: bold;
	text-align: center;
}

/************************************************************************************************************************
*QFC02        FRAMEWORK                                                                                                 *
************************************************************************************************************************/

#wrapper { 
    width: 1000px; 
    margin: 0 auto;
    position: absolute;
    background-image: url('frame/bg.jpg');
    left: 50%;
    margin-left: -500px; 
  }

@media only screen and (max-device-width: 800px) {
	
  #wrapper { 
    width: 1000px;
    margin: 0;
    position: absolute; 
    background-image: url('frame/bg.jpg');
    left: 0px;
    margin-left: 0px;
  }
}

div.header {
	width: 1000px; 
	height: 187px; 
	background-image: url('frame/header.jpg'); 
}

div.speaker_left {
	float: left;
	width: 190px; 
	height: 170px; 
	background-image: url('frame/speaker_left.jpg'); 
}

div.navigation	{
	float: left; 
	width: 620px;  
	height: 170px;  
	background-image: url('frame/bg.jpg');
}

div.speaker_right {
	float: left;
	width: 190px; 
	height: 170px; 
	background-image: url('frame/speaker_right.jpg'); 
}

div.mainWrapper { 
	clear: both;
	width: 1000px;
	height: 100%;
	background-image: url(frame/body_bg.jpg);
}

div.main { 
	width: 850px;
	min-height: 1100px;
	margin-left: 70px;	
	border-style: solid;
	border-color: transparent;
	background-image: url('frame/bg.jpg');
}

div.footer {
	width: 1000px;
	height: 246px;
	background-image: url('frame/footer.jpg');
}

#streamer	        {width:190px; height:170px;}
#streamer_bg            {width:190px; height:170px; background: url("frame/speaker_right.jpg"); z-index:2;}
#streamer_loader object {filter: alpha(opacity=0.1); -moz-opacity: 0.1; opacity: 0.1; height: 1px; width: 1px; background-color:transparent;}
#streamer_player        {width:382px; height: 24px; margin-top:-110px; margin-bottom: 0px; position:fixed; visibility: hidden;}

/************************************************************************************************************************
*QFC03        NAVIGATION                                                                                                *
************************************************************************************************************************/

#navlist {	
	padding: 0;    /* Controls FF GC SF */
	margin: 0;     /* Controls IE & O */
	width: 620px;  /* Prevents ul from being 100% */
}

#navlist a, #navlist a:visited {
	display:block;
	width: 129px;
	height:56px;
	text-indent:-9000px; /* offsets text for indexing only */
	background:url('frame/nav.jpg');
}

#navlist li               { float:  left; list-style-type: none; }

#navlist a.museum 	  { width: 144px; background-position: -129px 0; }
#navlist a.giftshop 	  { width: 225px; background-position: -273px 0; }
#navlist a.contact 	  { width: 122px; background-position: -498px 0; }

#navlist a.home:hover 	  { width: 129px; background-position:    0px -56px; }
#navlist a.museum:hover   { width: 144px; background-position: -129px -56px; }
#navlist a.giftshop:hover { width: 225px; background-position: -273px -56px; }
#navlist a.contact:hover  { width: 122px; background-position: -498px -56px; }

/************************************************************************************************************************
*QFC04        Bulletin Marquee | Banners | Deco Televisions                                                             *
************************************************************************************************************************/

#bulletin_scroller      { position:absolute; left: 56px; top: 109px; width:888px; height:50px; z-index:1; overflow: hidden;}

.marquee {
    width: 888px;
    height: 50px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 150s linear 1;
}
.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0%   { transform: translate(  500, 0); }
    100% { transform: translate(-100%, 0); }
}

.rapture_banner_left_1  { position:absolute; left:  0px; top: 352px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_ascendancy.png');    }
.rapture_banner_left_2  { position:absolute; left:  0px; top: 757px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_liberty.png');       }
.rapture_banner_left_3  { position:absolute; left:  0px; top:1162px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_individualism.png'); }

.rapture_banner_right_1 { position:absolute; left:944px; top: 352px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_creativity.png');    }
.rapture_banner_right_2 { position:absolute; left:944px; top: 757px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_independence.png');  }
.rapture_banner_right_3 { position:absolute; left:944px; top:1162px; width:56px; height:305px; z-index:1; background:url('img/banners/banner_commerce.png');      }

.tv_buffer 		{ margin-top: 100px; }

#tv_wall_left         	{ position:absolute; left: 58px; top:260px; width:140px; height:180px; z-index:3; background:url('frame/tv_wall_mounted.png');      }
#tv_wall_left_screen  	{ position:absolute; left: 80px; top:272px; width: 98px; height: 71px; z-index:2;                                                   }
#tv_wall_left_back    	{ position:absolute; left: 78px; top:268px; width: 99px; height: 79px; z-index:1; background:url('frame/tv_wall_mounted_back.png'); }

#tv_wall_right        	{ position:absolute; left:803px; top:260px; width:140px; height:180px; z-index:3; background:url('frame/tv_wall_mounted.png');      }
#tv_wall_right_screen 	{ position:absolute; left:825px; top:272px; width: 98px; height: 71px; z-index:2;                                                   }
#tv_wall_right_back   	{ position:absolute; left:823px; top:268px; width: 99px; height: 79px; z-index:1; background:url('frame/tv_wall_mounted_back.png'); }

/************************************************************************************************************************
*             Exhibit Specific Classes                                                                                  *
************************************************************************************************************************/

.speaker_obj {
	width:190px;
	height:170px;
	background-color:transparent;
}

.diaries_obj {
	width:76px;
	height:125px;
	background:url('img/loading_diary.jpg') no-repeat;
}

.diary_icon {
	width:100px;
	height:125px;
}

.sinclair_msg {
	width:140px;
	height:120px;
}























/************************************************************************************************************************
*             LEGACY CONTENT - LIMITED SUPPORT                                                                          *
************************************************************************************************************************/
.header_1 {
	font-size: 2em; /*40px*/
	font-weight: bold;
	text-align: center;
}
/****************************************
*               CONTACT                 *
****************************************/

.contact_form {
	color: #FFFFFF; 
	border: 1px solid #000000; 
	background-color: #071207;
	Overflow-y:hidden;}

.contact_button {
	color: #a89f86; 
	border: 1px solid #000000; 
	background-color: #071207;}

/****************************************
*              GUESTBOOK                *
****************************************/

table.gb-bg {
	width:850px; 
      	height:709px;
	background-image: url(guestbook/guestb_bg.jpg);
	background-repeat: no-repeat;}

form.gbform {	 
      	margin-top: 70px;
	margin-left:20px;}

.textfield {
	width: 255px;
	font-family: "georgia"; 
	font-size:12px;
	color: #000000;
	margin-left:10px;
       	border: 0px solid #000000;
       	background-color: transparent;}

.memo_textfield {
	width: 255px;
	font-family: "georgia"; 
	font-size:12px;
	color: #000000;     	
	vertical-align: top;
	padding-left: 10px;
	Overflow-y:hidden;
	border: 0px solid #000000;
	background-color: transparent;}

.field_indent {
	font-family: "Courier New", Courier, monospace;
	padding-left: 30px;	
	font-size:14px;	
	font-weight:bold; 
	color: #000000;}

.memo_indent {		
	font-family: "Courier New", Courier, monospace;
	padding-left: 30px;
	vertical-align: top;
	font-size:14px;	
	font-weight:bold; 
	color: #000000;}

.spamfield {
	font-family: "Courier New", Courier, monospace;
	font-weight:bold;
	font-size:14px;
	margin: 10px;	
	color: #000000;
	text-transform: uppercase;	       	
       	border: 0px solid #000000;
	background-color: transparent;}

.spam_label { 
	color: #000000;
	font-family: "Courier New", Courier, monospace;
	font-weight:bold;
	font-size:14px;
	text-transform: uppercase;}

.form_buttons {
	font-weight: bold; 
	color: #000000; 
	margin-left: 25px;
       	border: 0px solid #000000;
	background-color: transparent;}

input:hover[type="submit"]  {color: #ffffff;}
input:hover[type="reset"]   {color: #ffffff;}
input:active[type="submit"] {color: #000000;}
input:active[type="reset"]  {color: #000000;}

.gbsign {width:425px;}

.gbname {
	margin-left: 50px;
	font-size:80%;
	font-weight:bold;
	color: #000000;}

.gbdate {
	margin-left: 50px;	
	font-size:70%;
	color: #000000;}
	
p.gbmessage {
	margin-left: 50px;
	margin-right: 40px;
	font-size:70%;
	color: #000000;}

.gb-top {margin-top: 80px;}

p.page  {color: #000000; margin-left: 50px;}

	a.pages:link    { color: #000000; text-decoration: none; }
	a.pages:visited { color: #000000; text-decoration: none; }
	a.pages:hover   { color: #FFFFFF; text-decoration: none; }
	a.pages:active  { color: #000000; text-decoration: none; }

/*#######################################
#       EXHIBIT SPECIFIC CLASSES        #
#######################################*/

/****************************************
*           RECORDS CATALOG             *
****************************************/

.music {
	width: 850px; 
	text-align: right; 
	font-size: 12px; 
	font-family: "georgia"; 
	font-style: normal;}

/****************************************
*                GALLERY                *
****************************************/

.gallery-spacer a img { 
	margin-top: 20px;
	border-style:solid; 
	border-width: 7px; 
	border-color:transparent;}

/****************************************
*       MARQUEES UNDER THE SEA         *
****************************************/

.main-marquee {	
	width: 895px;
	margin-left: -22px;}

/****************************************
*               TROPHS                  *
****************************************/

.troph {
	width: 850px;  
	font-size: 14px; 
	font-family: "georgia"; 
	font-style: normal;}
.sm {
	width: 75px;
	margin-top: 10px;
	margin-right: 10px;}

/****************************************
*              DOWNLOADS                *
****************************************/

.downl {
	width: 850px;  
	font-size: 10px; 
	font-family: "georgia"; 
	font-style: normal;
	text-align: center;}

/****************************************
*                MUSEUM                 *
****************************************/

.museum {
	width: 850px;}

.header {
	font-size: 24px;
	font-weight: bold;
	text-align: center;}

.sm_header {
	font-size: 12px;
	font-weight: bold;
	text-align: center;}

/****************************************
*        Journey to the Surface         *
****************************************/

.jmarquee {	
	padding: 0px;
	text-align: center;}

.jmuseum { 
	width: 850px;
	border-collapse: collapse;}

/****************************************
*           World of Plasmids           *
****************************************/

.proj_frame {
	width: 648px;
	height: 440px;
	background-image: url(img/plasmids/proj_frame.jpg);
	background-repeat: no-repeat;
        background-position: center;}
	
	/*width: 478px;
	height: 324px;*/

.projector {
	margin-left: 125px;
	margin-top: 53px; 
	width: 594px;
	height: 336px;}
	
	/*width: 441px;
	height: 250px;
	
	Originally
	width: 640px;
	height: 360px;*/
	   
.inline_projector { 
	width: 594px;
	height: 336px;}

.plasmidheader {
	height: 128px;
	text-align: center;}

.plasmidsFrame {
	display: block;
	width: 850px;
	height: 100%;
	min-height: 144%;
	background-color:#000000;}

.invList {
	width: 850px;
	height: 1350px;}

.bs2_PlasmidList {
	width: 850px;
	height: 1725px;}

.bs2_TonicList {
	width: 850px;
	height: 2880px;}

.p_icon {
	width: 64px;
	height: 64px;}

/****************************************
*      VISUAL CREATION OF RAPTURE       *
****************************************/

.displays_header {width: 620px; height: 114px;}

.displays-spacer a img {border-style:solid; border-width: 30px; border-color:transparent;}

.display_bg_1, .display_bg_1 object {width: 808px; height: 476px; margin-left: auto; margin-right: auto; background-image: url(img/displays/display_bg1.jpg);}
.display_bg_2, .display_bg_2 object {width: 808px; height: 476px; margin-left: auto; margin-right: auto; background-image: url(img/displays/display_bg2.jpg);}
.display_bg_3, .display_bg_3 object {width: 808px; height: 476px; margin-left: auto; margin-right: auto; background-image: url(img/displays/display_bg3.jpg);}
.display_bg_4, .display_bg_4 object {width: 808px; height: 476px; margin-left: auto; margin-right: auto; background-image: url(img/displays/display_bg4.jpg);}

/****************************************
*       DECOTV MEDIA NAVIGATION         *
****************************************/

.media-spacer a img { 
	margin-top: 0px;
	border-style:solid; 
	border-width: 50px 50px 0px 50px; 
	border-color:transparent;}

div.decotv_main { 
	width: 850px;
	min-width: 850px;
	height: 754px;
	margin-left: 70px;
	background-image: url(frame/bg.jpg);}

div.footer_decotv { 
	float: left; 
	width: 1000px; 
	height: 246px; 
	background-image: url(frame/decotv_footer.jpg);}

div.decoButtonsNav { 
	position: relative;
	z-index:3;
	width: 620px;  
	height: 58px;  
	top: 502px;
	margin-left: 127px;}

#decoButtons {	
	padding: 0;    /* Controls FF GC SF */
	margin: 0;     /* Controls IE & O */
	width: 620px;} /* Prevents ul from being 100% */

#decoButtons a, #decoButtons a:visited {
	display:block;
	width: 58px;
	height:58px;
	text-indent:-9000px; /* offsets text for indexing only */
	background:url(media/media_buttons.png);}

#decoButtons li{ float: left; list-style-type: none;}

#decoButtons a.Pause 	    {width: 58px; background-position:  -59px 0px; margin-left: 7px;  }
#decoButtons a.Stop         {width: 58px; background-position: -118px 0px; margin-left: 7px;  }
#decoButtons a.Mute 	    {width: 58px; background-position: -177px 0px; margin-left: 250px;}
#decoButtons a.unMute 	    {width: 58px; background-position: -236px 0px; margin-left: 40px; }

#decoButtons a.Play:hover   {width: 58px; background-position:   0px  -58px;}
#decoButtons a.Pause:hover  {width: 58px; background-position: -59px  -58px;}
#decoButtons a.Stop:hover   {width: 58px; background-position: -118px -58px;}
#decoButtons a.Mute:hover   {width: 58px; background-position: -177px -58px;}
#decoButtons a.unMute:hover {width: 58px; background-position: -236px -58px;}

#decotv_frame  {position:absolute; left:192px; top:339px; width:619px; height:415px; z-index:2; background:url(media/tvscreen.png); background-color: transparent;}
#decotv_screen {position:absolute; left:234px; top:339px; width:539px; height:342px; z-index:1; background-color: transparent;}
/*######## END SPECIFIC CLASSES #######*/