/* 
    ! Design & Code
    by Roland Hidvegi - rolandhidvegi.com
*/
   


    /* ========================= */
    /* ! Font face declaration   */
    /* ========================= */


    @font-face {
        font-family: 'Agg-Medium';
        src: url('../font/itcavantgardepro-md-webfont.eot');
        src: url('../font/itcavantgardepro-md-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/itcavantgardepro-md-webfont.woff') format('woff'),
        url('../font/itcavantgardepro-md-webfont.ttf') format('truetype'),
        url('../font/itcavantgardepro-md-webfont.svg#ITCAvantGardeGothicProMedium') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Agg-Light';
        src: url('../font/itcavantgardepro-xlt-webfont.eot');
        src: url('../font/itcavantgardepro-xlt-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/itcavantgardepro-xlt-webfont.woff') format('woff'),
        url('../font/itcavantgardepro-xlt-webfont.ttf') format('truetype'),
        url('../font/itcavantgardepro-xlt-webfont.svg#ITCAvantGardeGothicProXLt') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Agg-Book';
        src: url('../font/itcavantgardestd-bk-webfont.eot');
        src: url('../font/itcavantgardestd-bk-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/itcavantgardestd-bk-webfont.woff') format('woff'),
        url('../font/itcavantgardestd-bk-webfont.ttf') format('truetype'),
        url('../font/itcavantgardestd-bk-webfont.svg#ITCAvantGardeGothicStdBook') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    /* ========= */
    /* ! Reset   */
    /* ========= */

    html, body, div, span, applet, object, 
    iframe, h1, h3, h4, h5, h6, p, blockquote, 
    pre, a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, fieldset, form, label,
    table, caption, tbody, tfoot, thead, tr, th, td 
    {
	   margin: 0;
	   padding: 0;
	   border: 0;
	   outline: 0;
	   list-style: none;
	   font-weight: inherit;
	   font-style: inherit;
	   font-family: inherit;
	   vertical-align: baseline;
	   text-decoration: none;
    }

	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		background-color: #222;
		position: relative;
		font-family: 'Agg-Medium', Helvetica, Arial, sans-serif;
		font-size: 12px;
        font-weight: 400;
		line-height: 18px;
		
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
        -o-font-smoothing: antialiased;
        font-smoothing: antialiased;

		overflow: hidden;
	}
	
	a {
		color: #fff;
		text-decoration: none;
	}
	
	h3 {
		font-family: 'Agg-Book', Helvetica, sans-serif;
		font-size: 16pt;
		letter-spacing: 2.5pt;
		margin-bottom: 10px;
	}
	
	/* ===================== */
    /* ! Z-index positions   */
    /* ===================== */

	#details       { z-index: 20; }
	#footer        { z-index: 30; }
	#context       { z-index: 40; }
	#layer         { z-index: 50; }
	#hint          { z-index: 60; }
	#logo          { z-index: 70; }
    	
	/* ========== */
    /* ! Loader   */
    /* ========== */

	#loader {
		width: 0px;
		height: 0px;
		line-height: 0;
		visibility: hidden;
		background: url(../img/uisprite.png) no-repeat -9999px -9999px, 
		            url(../img/keys.png) no-repeat -9999px -9999px,
				    url(../img/info.jpg) no-repeat -9999px -9999px;
	}
	
	/* =========== */
    /* ! Content   */
    /* =========== */

	#content {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		position: static;
		display: block;
		overflow: hidden;
	}

		#content .imgHolder {
			margin: 0;
			padding: 0;
			float: left;
			display: block;
	}
	
	.loading {
        background: url(../img/loader.gif) center center no-repeat;
	}
	
		#content img {
			margin: 0;
			padding: 0;
			display: block;
		}

    /* =========== */
    /* ! Details   */
    /* =========== */

    #details {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }


	#logo {
		position: fixed;
		top: 40px;
		left: 40px;
		font-family: 'Agg-Book';
		font-size: 18pt;
		text-transform: uppercase;
		letter-spacing: 4px;
		line-height: 110%;
	}

		#logo strong {
			text-transform: none;
			font-size: 14pt;
		}

	.dots {
		position: fixed;
		top: 40px;
		right: 0px;
		width: 400px;
		height: 50px;
		background: url(../img/uisprite.png) 0px -110px repeat-x;
	}


	#nav-left {
		position: fixed;
		top: 40%;
		left: 20px;
		width: 54px;
		height: 53px;
		cursor: pointer;
		background: transparent url(../img/uisprite.png) -100px 0px no-repeat;
		display: none;
	}
	
		#nav-left:hover
		{
			background: url(../img/uisprite.png) -100px -53px no-repeat;
		}

	
	#nav-right
	{
		position: fixed;
		top: 40%;
		right: 20px;
		width: 54px;
		height: 53px;
		cursor: pointer;
		background: transparent url(../img/uisprite.png) -154px 0px no-repeat;
		display: none;
	}


		#nav-right:hover {
			background: url(../img/uisprite.png) -154px -53px no-repeat;
		}
		
	#label {
		position: fixed;
		top: 80px;
		right: 40px;
	}	
	
	#selected-item {
	    position: fixed;
		top: 155px;
		left: 35px;
		font-family: 'Agg-Light', Helvetica, Arial, sans-serif;
		font-size: 60pt;
		letter-spacing: 6pt;
		text-transform: uppercase;
		cursor: pointer;
		
		-moz-transition: all 0.3s ease-out;
		-webkit-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
    
        #selected-item:hover {
	       color: #ff6500;
        }
    
    #num {
		font-family: 'Agg-Light', Helvetica, Arial, sans-serif;	
		position: fixed;
		right: 30px;
		bottom: 120px;
		font-size: 64pt;
		color: #ff6500;
		display: none;
	}

    
    /* =========== */
    /* ! Context   */
    /* =========== */

    #context {
        position: absolute;
        top: 0px;
        left: 0px;
        line-height: 24px;
        font-family: 'Agg-Medium', Helvetica, Arial, Sans-serif;

        border-radius: 3px; 
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
    
        background-color: #000;
        background-color: rgba(0,0,0,0.8);
        
        padding: 15px 20px 15px 20px;
        opacity: 0;
        display: none;
        border: 0;
    }
    
    #context p {
        margin-top: 5px;
    }
    
    #context a {
        padding-bottom: 3px;
        border-bottom: solid 1px #fff;
			
        -moz-transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
        
        #context a:hover {
            color: #ff6500;
            border-bottom-color: #ff6500;
        }

    /* ==================== */
    /* ! Layer navigation   */
    /* ==================== */
  
	#layer {
		position: fixed;
		top:0px;
		left: 0px;
		width: 100%;
		height: 100%; 
		background-color: #ff6500; 
		background-color: rgba(255,101,0,0.9);
		display: none;
		opacity: 0;
		
		-moz-transition: all 0.4s ease-out;
		-webkit-transition: all 0.4s ease-out;
		-ms-transition: all 0.4s ease-out;
		-o-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
	}

	#menu {
		position: absolute;
		top: 113px;
		left: 25px;
		font-family: 'Agg-Light', Helvetica, Arial, sans-serif;
		font-size: 60pt;
		letter-spacing: 6pt;
		text-transform: uppercase;
	}

		#menu ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}	

		

		#menu a {
			line-height: 128%;
			cursor: pointer;
			padding: 0px 5px 0px 10px;
			
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

			#menu a:hover {
                background-color: #b63c01;
				background-color: rgba(182,60,1,0.5); 
			}

			#menu a:focus {
                background-color: #b63c01;
				background-color: rgba(182,60,1,0.5); 
			}

		.normal {
			color: #fff;
		}

		.selected {
			color: #8d2e00;
		}

    /* ================== */
    /* ! Footer content   */
    /* ================== */

	#footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 18px;
		padding: 30px 20px 20px 25px;
		background: url(../img/uisprite.png) 0px -110px repeat-x;
	}

		#footer div {
			position: relative;
			float: left;
		}

		#footer .social {
			margin-left: 60px;
		}
		
			#footer .social div {
				margin-right: 10px;
			}
		
		#footer .facebook, #footer .twitter {
			opacity: 0.4;
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		
			#footer .facebook:hover, #footer .twitter:hover {
				opacity: 1;
			}
		
		#footer .facebook iframe {
			border:none; 
			overflow:hidden; 
			width:200px; 
			margin:0px; 
			height:20px; 
			display:block;
		}

		#footer div a {
			padding-bottom: 3px;
			border-bottom: solid 1px #fff;
			margin-left: 60px;
			
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

			#footer a:hover {
				color: #ff6500;
				border-bottom-color: #ff6500;
			}
		
		#footer .r {
			padding-bottom: 3px;
			border-bottom: solid 1px #fff;
			margin-left: 60px;
			
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

			#footer a:hover {
				color: #ff6500;
				border-bottom-color: #ff6500;
			}

		
    /* ====================== */
    /* ! Info external HTML   */
    /* ====================== */
    
	#info {
	   position: relative;
		width: 100%;
		height: 100%;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: 1pt;
		background: url(../img/info.jpg) center center no-repeat;
	}
	
		#info .text {
			position: absolute;
			top: 230px;
			left: 120px;
			width: 500px;
		}

		#info a {
			color: #ff6500;
			padding-bottom: 3px;
			border-bottom: solid 1px #ff6500;
			
			-moz-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

			#info a:hover {
				color: #fff;
				border-bottom: solid 1px #fff;
			}

    /* ================================ */
    /* ! Hint for keyboard navigation   */
    /* ================================ */

	#hint {
		position: absolute;
		bottom: 150px;
		left: 45%;
		width: 234px;
		padding: 89px 20px 20px 20px;
		text-align: center;
		background: url(../img/keys.png) 20px 20px no-repeat;
		background-color: #000;
        background-color: rgba(0,0,0,0.8);
		opacity: 0;
		
		border-radius: 3px; 
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        
		-moz-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
	}


	#fwa {
		position: fixed;
		top: 0px;
		right: 0px;
		width: 100px;
		height: 100px;
		background: url(../img/fwa.png) 0 0 no-repeat;
		z-index: 9999;
	}