@import url('reset.css');

        @font-face {
            font-style: normal;
            font-weight: normal;
            font-family: "STD0755";
            src: url('fonts/STAN0755.TTF') format('truetype');
        }
        html { -webkit-font-smoothing: antialiased; }

        #preloading {
            position: fixed;
            bottom:20px; height:220px; width: 99%;
            z-index: 29;
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-size: 210px;
            font-weight: bold;
            text-align: right;
            display: block;
            color: black;
            background: #fff;
        }

        #preloading .percent {
            font-size: 110px;
            /*font-weight: normal; */
        }

        /* --OVERLAY-------------------------------------------------------------------------------------- */
        div#overlay     {
            display: none;
            z-index: 21;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .5;
            text-align: center;
        }

        div#overlayContentHolder        {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 92%;
            height: 100%;
            min-width: 792px;
            background-image: url('../assets/image/titleEmpty.png');
            z-index: 22;
        }

        div#overlayLightUpHolder        {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 92%;
            height: 100%;
            min-width: 792px;
            background-image: url('../assets/image/titleEmpty.png');
            z-index: 23;
        }

        div#overlayVariationBWHolder    {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 92%;
            height: 100%;
            min-width: 792px;
            background-image: url('../assets/image/titleEmpty.png');
            z-index: 24;
        }

        div.overlayContentClass
        {
            display: block;
            position: relative;
            margin: 0px auto;
            top: calc((100vh - 580px - 14px + 60px)/2);
            width: 529px;
            height: 530px;
            background: #fff;
            color: #000;
            /* border: 3px solid yellow; */
        }

        div#slides                  { display: block; width: 529px; height: 484px; overflow: hidden; }
        div.instSlides              { display: block; width: 529px; height: 400px; overflow: hidden; }

        /*opacity: .95; */
        div.close
                                    { display: block; position: absolute; top: 5px; right: 4px; z-index: 100; }
           div.close a              { cursor: pointer; cursor: hand; opacity: .8; }
           div.close a:hover        { opacity: 1; }

        div#slideDesc               { display: block; position: absolute; top: 490px; left: 7px; }
           #slideDesc p.detailHeader{ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; line-height: 16px; font-weight:bold; text-align:left; }
           #slideDesc p.detailDesc  { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; font-weight: 300; text-align:left; }
           p.detailDesc a           { color: #000000; }
           p.detailDesc a:hover     { color: #999999; }
           p.detailDesc a:focus     { color: #0033ff; }
           p.detailDesc a.selected	{ color: #0033ff; }
           p.detailDesc a.inactive	{ color: #000000; text-decoration: none; cursor: pointer; }

        div.instSlideDesc           { display: block; position: absolute; top: 405px; left: 12px; }
           .instSlideDesc p.detailHeader
                                    { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; line-height: 24px; font-weight:bold; text-align:left; }
           .instSlideDesc p.detailDesc
                                    { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; line-height: 14px; font-weight: 300; text-align:left; }

        div#slideControl, div.slideControl
                                    { display: block; position: absolute; top: 496px; right: 4px; }
            ul.controlList     li   { display: inline; float: left; margin-left: 50px; }
            ul.controlList     li a { opacity: 1; }
            ul.controlList     li a:hover
                                    { opacity: .5; }
            div.slidesjs-log        { position: absolute; top: 1px; left: 74px; }
            div.inst-slidesjs-log   { position: absolute; top: 1px; left: 84px; }
            div.slidesjs-log, div.inst-slidesjs-log
                                    { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px; font-weight: 300; text-align:left; }

        /* ----------------------------------------------------------------------------------------------- */


	    /* ------------ */
	    #CONTAINER					{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
		
		/* --HEADER--------------------------------------------------------------------------------------- */
		#HEADER						{ position: absolute; top: 0px; left: 0px; width: 92%; height: 88px; min-width: 792px; z-index: 5; visibility: hidden; }   /*visibility: hidden*/

		#HEADER top					{ position: absolute; top: 0px; left: 0px; width: 100%; height: 20px; }
		#HEADER logo				{ position: absolute; top: 30px; left: 22px; }
		#HEADER img#hBar			{ position: absolute; top: 87px; left: 0px; }
		#HEADER ul#menu				{ position: absolute; top: 22px; right: 1px; }
		
		top     img#vBar			{ position: absolute; top: 0px; right: 0px; }
		logo    a				    { display: block; width: 30px; height: 30px; background-image: url('../assets/image/logo30x30W.png'); border: none; }
		logo    a:hover				{ background-image: url('../assets/image/logo30x30R.png'); } /*swap image*/
		
		ul#menu li					{ display: block; font-family:Arial, Helvetica, sans-serif; text-align:right; }
		ul#menu li.menu a			{ color: #000000; text-decoration: none; font-size: 14px; font-weight:bold; padding-top: 2px; padding-bottom: 2px; padding-left: 4px; padding-right: 4px; }
		ul#menu li.menu a:hover,
        ul#menu li.menu a:focus     { color: #ffffff; background-color:#000000; }
		ul#menu li.menu a.selected	{ color: #ffffff; background-color:#000000; cursor: default; }
		ul#menu li.subMenu a		{ color: #000000; text-decoration: none; font-size: 12px; padding-top: 2px; padding-left: 5px; padding-right: 4px; padding-bottom: 2px; }
		ul#menu li.subMenu a:hover,
        ul#menu li.subMenu a:focus  { color: #000000; background-color:#ffff00; }
		ul#menu li.subMenu a.selected
                                    { color: #000000; background-color:#ffff00; cursor: default; }


		/* --CONTENT-------------------------------------------------------------------------------------- */
		#CONTENT					{ position: absolute; top: calc((100vh - 580px - 20px)/2); left: 0px; width: 92%; min-width: 792px; z-index: 10; visibility: hidden; }                /*visibility: hidden*/
		#CONTENT_HOLDER				{ position: relative; width: 530px; margin:0 auto; background-color: #ffffff; }

		#CONTENT_HOLDER	div#main_holder
                                    { position: relative; top: 0px; left: 0px; width: 530px; overflow: hidden; height: 575px; }
		#CONTENT_HOLDER	div#twitter
                                    { position: relative; top: 0px; left: 0px; display: inline; } /*top: 12px*/

        div#main_holder	div.section	{ height: 565px; min-height: 565px; padding-bottom: 20px }
        div.section     div.header  { position: relative; top: 0px; left: 0px; background-color: #ffffff; }
        div.header      img.title   { top: 0px; width: 200px; height: 26px; }

        ul#viewList                 { position: absolute; top: 2px; right: 4px; width: 60px; height: 24px; }   /*right: 0px; 30px*/
        ul#viewList     li          { display: inline; float:left; margin-left: 6px;}
        ul#viewList     li  a       { opacity: .2; }
        ul#viewList     li  a:hover { opacity: 1; }
        ul#viewList     li  a.selected
                                    { opacity: 1; cursor: default; }

        div.section     div.main    { position: relative; top: 5px; left: 0px; }

        /* --main1:Multimedia-- */
        div#main1   div#main1Content{ position: relative; top: 0px; left: 0px; width: 528px; height: 482px; overflow: show; background-color: #ffffff;}
        div#main1   div#main1Control{ position: relative; top: 6px; left: 0px; width: 100%; height:42px; }
        div#main1   div#main1Desc   { position: absolute; top: 490px; left: 300px; width: 228px; height:22px; line-height: 13px; color: #000000; }

        div.mcontent                { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #ffffff;}
        div#mcontent1               { background-color: black; left: 0%; }
        div#mcontent2               { background-color: white; left: 100%; opacity:0; border: 1px solid black; }
        div#mcontent3               { background-color: white; left: 200%; opacity:0; }
        div#mcontent4               { background-color: white; left: 300%; opacity:0; }

        div#lightUp                 { position: absolute; top: 42px; left: 67px; width: 395px; height: 395px; background-color: #ffffff; }
        div#variationBW             { position: absolute; top: 110px; left: 104px; width: 320px; height: 232px; background-color: #000000; }
        div#worldMap                { position: absolute; top: 16px; left: 50px; width: 429px; height: 462px; background-color: #ffffff; }
        div#scarletLetter           { position: absolute; top: 0px; left: 23px; width: 482px; height: 482px; background-color: #000000; }

        div.iViewLink               { position: absolute; top: 452px; left: 330px; width: 182px; text-align:right; }
        a#iViewAnchor1              { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; color:#ffffff; }
        a#iViewAnchor2              { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; color:#000000; }

        ul#main1Menu                { position: relative; top: 0px; left: 0px; }
        ul#main1Menu    li          { display: inline; float:left; margin-right: 8px; }
        ul#main1Menu    li  a       { opacity: .5; }
        ul#main1Menu    li  a:hover { opacity: 1; }
        ul#main1Menu    li  a.selected
                                    { opacity: 1; cursor: default; }

        #main1Desc p.mmTitle        { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; font-weight:bold; text-align:left; }
        #main1Desc p.mmDesc         { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; font-weight: 300; text-align:left; }


        /* --main3:Webmedia-- */
        div#main3	div#contactMovie{ position: absolute; top:35px; left:46px; height: 440px; width: 440px; background-color: #000000; }
		div#main3	div#contactInfo { position: absolute; bottom:20px; left:52px; font-size: 10px; font-weight: bold; color: #cccccc;  }

		#info		p			    { color: #dddddd; font-weight: bold; line-height: 180%; }
		#info		a			    { color: #cccccc; text-decoration: none;  }
		#info		a:selected	    { color: #cccccc; text-decoration: none; }
		#info		a:hover		    { color: #ffffff; }

		div#twitter div#twitterBody { position: relative; top: 0px; width: 530px; height: 35px;
								      background-image:url('../assets/image/dots6x6.png'); background-repeat:repeat; }
		
		/*#twitterIcon a				{ position: relative; left: 512px; top: 2px; width: 16px; height: 16px; background-image: url('../assets/image/bird_16_black.png'); border: none; }
		#twitterIcon a:hover		{ background-image: url('../assets/image/bird_16_gray.png'); }*/ /*swap image*/


		/* --FOOTER--------------------------------------------------------------------------------------- */
		#FOOTER						{ position: fixed; bottom:0px; height:14px; width: 100%;  background-color: #000000; z-index:30; }
		#FOOTER copyright			{ position: absolute; top: 2px; left: 18px; visibility: hidden; }   /*hidden to visible*/
		#FOOTER 		p			{ font-family:Arial, Helvetica, sans-serif; font-size: 8px; text-align:left; color: #ffffff; }