/* @override http://localhost:8888/rancinan.com/style/style.css */

@font-face {
	font-family: HelveticaLight;
	src: url(./HelveticaNeue_Lt.ttf);
}
/**** IE FIX ****/
#photos img, #videos img, #contact img, #close-map {
	border: none;
}
/****************/
#homeimg { 
  background: url(./photos/RANCI5208-V2c-DEF-WEB.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
html {
	height: 100%;
}
body {
	font-family: HelveticaLight, Verdana, Helvetica, sans-serif;
	font-size: 20px;
	color: silver;
	margin: 0;
	display: block;
	background-color: black;
	height: 100%;
}

#logo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -404px;
	z-index: 99;
}

#contact {
	margin-top: 6%;
	z-index: 99;
}

#contact-content {
	text-align: center;
}

#contact-content hr {
	height: 30px;
	margin: 0;
	width: 30px;
	background-color: #bf0000;
	border: none;
}

#contact-link a {
	color: #BF0000;
	text-decoration: none;
}

#contact-link a:hover {
	text-decoration: underline;
}

#nav-photo {
	position: relative;
	top: 24px;
	text-align: center;
	font-family: HelveticaLight, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	z-index: 99;
	border: 1px solid black;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: black;
	margin-left: 16px;
	margin-right: 16px;
	opacity: 1;
}

nav {
	position: relative;
	top: -24px;
	text-align: center;
	z-index: 99;
	border: 1px solid black;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: black;
	margin-left: 16px;
	margin-right: 16px;
	opacity: 1;
}

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

nav ul li {
	display: inline;
	padding: 10px 0 10px 10px;
}

nav ul li a {
	text-decoration: none;
	color: white;
}

nav ul li a:hover {
	text-decoration: underline;
	cursor: pointer;
}

footer {
	position: fixed;
	bottom: 8px;
	left: 50%;
	margin-left: -218px;
	font-size: 11px;
	z-index: 55;
}

footer a {
	color: #454545;
}

footer span {
	display: block;
	color: #454545;
}

#photos {
	position: absolute;
	top: 40%;
	margin-top: -140px;
	width: 100%;
}
#videos {
	position: absolute;
	top: 40%;
	margin-top: -140px;
	width: 100%;
}

#horiz_container_outer, #scrollbar {
	z-index: 60;
}

#preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

.gif {
	position:fixed;
	bottom:-13px;
}

/**************************************************
*
*	MAPS STYLES
*
**************************************************/
#map-canvas { 
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9997;
}

#open-map {
	cursor: pointer;
}

#close-map {
	position: absolute;
	top: 2%;
	right: 2%;
	z-index: 9999;
	cursor: pointer;
}

.legende {
	position: absolute;
	top: 2%;
	left: 10%;
	z-index: 9998;
	margin: 0;
}
.legende-title {
	font-family: Impact, HelveticaLight, Verdana, sans-serif;
	font-size: 60px;
	font-weight: 600;
	color: black;
	margin: 0;
}
.legende-content {
	font-family: Verdana, sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: black;
	margin: 0;
	padding-left: 10px;
}
.legende-content span {
	padding-left: 5px;
}

.contentMarker h1, h2, h3, h4 {
	margin: 0;
}
.contentMarker h1 {
	color: black;
	font-size: 1.8em;
}
.contentMarker h2 {
	color: black;
}
.contentMarker h3 {
	color: #bf0000;
}
.contentMarker p {
	color: #777777;
}
.contentMarker a { 

}
#dinard {
	font-size: 14px;
}

/**************************************************
*
*	CONTAINER STYLES
*
**************************************************/

#horiz_container_outer
{
	width:100%;
	overflow-x:hidden;
	overflow-y:hidden;
	position:relative;
	height:400px;
	margin:0 0;
}

#horiz_container
{
	margin:0px;
	padding:0px;
	height:375px;
	width: 5000px;
}

#horiz_container ul
{
	margin:0px; padding:0px;
	float:left;
}

#horiz_container_inner
{
	padding: 0;
}

#horiz_container li
{
	list-style:none;
	display: inline-table;
	margin:0px;
}

#horiz_container li img
{
	padding:0px;
	margin:0px;
}




/**************************************************
*
*	SCROLLING STYLES
*
**************************************************/

#scrollbar 
{ 
    position:relative; 
    width: 95%; height:12px;
    display: block;
    font-size:1px;
    top:0px;
    margin: 5px auto 0px;
}

#track 
{ 
    position:absolute; left:0px; top:0;
    width: 100%; height:12px; 
    background: #222;
    -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

#dragBar 
{
    position:absolute; left:0px; top:0px !important;
    width:20px; height:10px; 
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid white;
	xbackground-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.39, rgb(229,229,229)),
	    color-stop(0.7, rgb(245,245,245))
	);
	xbackground-image: -moz-linear-gradient(
	    center bottom,
	    rgb(229,229,229) 39%,
	    rgb(245,245,245) 70%
	);
}  
  
#left_scroll
{ 
	position:absolute; 
	border-color: transparent gray transparent transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0px;
	cursor:pointer;
	top:1px;
	left:-15px;
}  

#right_scroll 
{ 
	position:absolute; 
	right:-15px; 
	top:1px;
	border-color: transparent transparent transparent gray;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0px;
	cursor:pointer;
}

/* Prevent selection problem */
#scrollbar, #track, #dragBar, #left_scroll, #right_scroll {
    -moz-user-select: none;
    -khtml-user-select: none;
}

@media screen and (min-width: 1138px) {
	/************** BACKGROUNDS HOME LARGE **********************/
	#press {
		background: url('../backgrounds/PressPower.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#chaos {
		background: url('../backgrounds/CHAOS.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#urban {
		background: url('../backgrounds/Hypotheses-URBAN.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#wayback {
		background: url('../backgrounds/Wayback_from_Disneyland.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
}

@media screen and (min-width: 722px) and (max-width: 1137px) {
	#scrollbar, #track {
		height: 20px;
	}
	#dragBar {
	 	height: 18px;
	}
	#left_scroll, #right_scroll {
		border-width: 8px;
	}
	#left_scroll {
		top: 2px;
		left: -20px;
	}
	#right_scroll {
		top: 2px;
		right: -20px;
	}

	.legende-title {
		font-size: 40px;
	}
	.legende-content {
		font-size: 12px;
	}

	#logo {
		margin-left: -275px;
		margin-top: -95px;
	}
	.logo_blanc {
		width: 550px;
		background-image: url('../img/Logo_web_Rancinan_2014_med.png');
	}
	.logo_gris {
		width: 550px;
		background-image: url('../img/Logo_web_Rancinan_2014_gris_med.png');
	}
	nav {
		top: -16px;
		font-size: 17px;
		margin-left: 12px;
		margin-right: 12px;
	}
	nav ul li:first {
		padding-left: 0;
	}

	/************** BACKGROUNDS HOME MEDIUM **********************/
	.gif img {
		width: 550px;
	}
	#press {
		background: url('../backgrounds/PressPower_med.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#chaos {
		background: url('../backgrounds/CHAOS_med.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#urban {
		background: url('../backgrounds/Hypotheses-URBAN_med.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#wayback {
		background: url('../backgrounds/Wayback_from_Disneyland_med.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
}
/*****************************************************************/

#background-image
{
	z-index: -99;
}

@media screen and (max-width: 721px) {
	#logo {
		margin-left: -150px;
		margin-top: -79px;
	}
	.logo_blanc {
		width: 300px;
		background-image: url('../img/Logo_web_Rancinan_2014_small.png');
	}
	.logo_gris {
		width: 300px;
		background-image: url('../img/Logo_web_Rancinan_2014_gris_small.png');
		position: relative;
		right: -3%;
	}
	nav {
		top: -10px;
		font-size: 14px;
		margin-left: 5px;
		margin-right: 5px;
	}
	nav ul li:first-child {
		padding-left: 0;
	}

	.legende-title {
		font-size: 20px;
		font-weight: 800;
	}
	.legende-content {
		font-size: 8px;
	}
	.legende-content img {
		width: 8px;
	}
	.legende-content span {
		padding-left: 2px;
	}

	#scrollbar, #track {
		height: 20px;
	}
	#dragBar {
	 	height: 18px;
	}
	#left_scroll, #right_scroll {
		border-width: 8px;
	}
	#left_scroll {
		top: 2px;
		left: -20px;
	}
	#right_scroll {
		top: 2px;
		right: -20px;
	}
	footer {
		bottom: 5px;
		margin-left: -155px;
		font-size: 7px;
		z-index: 2;
	}
	#photos img, #videos img {
		height: 300px !important;
	}

	/************** BACKGROUNDS HOME SMALL **********************/
	.gif img {
		width: 300px;
	}
	#press {
		background: url('../backgrounds/PressPower_small.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#chaos {
		background: url('../backgrounds/CHAOS_small.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#urban {
		background: url('../backgrounds/Hypotheses-URBAN_small.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	#wayback {
		background: url('../backgrounds/Wayback_from_Disneyland_small.jpg') center no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover;
	}
	/**********************************************************/
}


/****************** LOADER **********************/
.wrapper {
	padding-left: 1em;
	padding-right: 1em;
	margin: auto;
	display: block;
	width: 225px;
}

.cssload-loader {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 13em 3em 3em 4em;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	background:rgb(255,255,255);
}
.cssload-loader,
.cssload-loader:before,
.cssload-loader:after {
		animation: 1s infinite ease-in-out;
		-o-animation: 1s infinite ease-in-out;
		-ms-animation: 1s infinite ease-in-out;
		-webkit-animation: 1s infinite ease-in-out;
		-moz-animation: 1s infinite ease-in-out;
}
.cssload-loader:before,
.cssload-loader:after {
		width: 100%; 
		height: 100%;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
}

.cssload-loader { animation-name: cssload-loader;
		-o-animation-name: cssload-loader;
		-ms-animation-name: cssload-loader;
		-webkit-animation-name: cssload-loader;
		-moz-animation-name: cssload-loader; }


@keyframes cssload-loader {
		from { transform: scale(0); opacity: 1; }
		to	 { transform: scale(1); opacity: 0; }
}

@-o-keyframes cssload-loader {
		from { -o-transform: scale(0); opacity: 1; }
		to	 { -o-transform: scale(1); opacity: 0; }
}

@-ms-keyframes cssload-loader {
		from { -ms-transform: scale(0); opacity: 1; }
		to	 { -ms-transform: scale(1); opacity: 0; }
}

@-webkit-keyframes cssload-loader {
		from { -webkit-transform: scale(0); opacity: 1; }
		to	 { -webkit-transform: scale(1); opacity: 0; }
}

@-moz-keyframes cssload-loader {
		from { -moz-transform: scale(0); opacity: 1; }
		to	 { -moz-transform: scale(1); opacity: 0; }
}
/**********************************************************/