@charset "UTF-8";

html
{
	height:				100%;
	background-color: 	#262327;
}

body 
{
	min-width:			1024px;
	margin:				0;
	color:				white;
	font-family:		Verdana, Geneva, sans-serif;
	background:			#323232
}

/**
 * header
 */

#header
{
	background:			url('../Images/headerBackground.png');
	margin:				0;	
	height:			 	53px;
	min-width:			1024px;
	width:				100%;
	position:			absolute;
	left:               0;
}



/**
 * center
 */

#middle
{
	margin:				0 auto;
	padding-top:		31px;
	width:				1024px;
	position:			relative;
}

#middle:after
{
	content: 			".";
	height:				0;
	visibility: 		hidden;
	display: 			block;
	clear:				both;
}

#center
{
	float:				left;
	height: 			100%;
	margin:             0 auto;
	margin-left: 		20px;
}

#centered-center
{
	margin:				0 auto;
	overflow:			hidden;
}

#content-container
{
	border-radius:          5px;
    -moz-border-radius:     5px;
    -webkit-border-radius:  5px;
	
	background: #444; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #444,  #222); /* for firefox 3.6+ */
}

#content
{
	border-top: 		solid 1px transparent;
    border-bottom:      solid 1px transparent;
	height:				100%;
	margin-bottom: 		15px;
}


#left-menu
{
	float: 				left;
	height: 			100%;
	width: 				300px;
	margin-top: 		-12px;
}

#left-menu > p
{
	padding-left:		10px;
}

#logoBlock
{
	position:			relative;
	background:			url('../Images/logoBlock.png') no-repeat;
	width: 				294px;
	height:				169px;
	margin:				0 auto;
}

#logoBlock #logo
{
	display:			inline-block;
	background:			transparent !important; 
	height:				63px;
	width:				100%;
	text-decoration:	none;
}

#left-menu > #logo img
{
    border:         none;
}

#logoBlock #newApp
{
	height: 			90px;
	width: 				245px;
	padding: 			15px 25px 5px 25px;
}

#logoBlock  #newApp p
{
	margin:				0;
	font-weight:		bold;
	font-size:			16px;
}

#logoBlock > div > #secondParagraph
{
	color:				#FF9900;
}

#logoComment
{
	margin:				8px 0 27px 0;
	font-size: 			10px;
	font-weight: 		bold;
}

#videoBlock
{
	position:			relative;
	background:			black;
	width: 				294px;
	height:				169px;
	margin:				0 auto;
}

#videoBlock img, #videoBlock a
{
	border:				none;
}

#videoComment
{
	margin:				0px 0 18px 0;
	text-align:			center;
}

#videoComment a
{
	color:				#FFF;
	font-size: 			12px;
}

#newsBlock
{
	background:			url('../Images/NewsBlock.png') no-repeat;
	width:				276px;
	height:				100px;
	margin:				0 auto 21px auto;
	font-size: 			14px;
}

#newsBlock h3
{
	margin:				0 0 2px 30px;
	font-size: 			14px;
	line-height: 		24px;
}

#newsBlock h3 a
{
	color:				#FFF;
	text-decoration:	none;
}

#newsBlock ul
{
	margin:				0;
}

#newsBlock ul, #newsBlock ul li a, #newsBlock ul li a:visited
{
	color:				#333;
	text-decoration:	none;
}

#newsBlock ul li a, #newsBlock ul li a:visited
{
	height:				34px;
	overflow:			hidden;
}

#newsBlock ul li a:hover
{
	color:				#333;
	text-decoration:	underline;
}

#mobileApplications
{
	background:			url('../Images/mobileApplicationsBlock.png') no-repeat;
	width:				290px;
	height: 			154px;
	position:			relative;
	margin:				0 auto;
}

#mobileApplications > img
{
	position:			absolute;
	top:				15px;
	left:				30px;
}

#mobileApplications span
{
	display:			inline-block;
	color:				#333;
	width:				170px;
	font-weight:		bold;
	font-size:			14px;
	text-align:			center;
	position: 			absolute;
	top: 				23px;
	right: 				20px;0
}

#mobileApplications > p
{
	position:			absolute;
	left:				19px;
	bottom:				26px;
	margin: 			0;
	width: 				290px;
}

#mobileApplications .appButton
{
	background:			none;
	border:				none;
	width: 				121px;
	height: 			41px;
	text-decoration:	none;
}

#mobileApplications .appButton img
{
	border:				none;
}

/********** tabs *********/

.tablist 
{
	position:			relative;
	color:				white;
	margin: 			0;
	padding:			0;
	height:             20px;
}

.tablist .tab, .tablist .tabOrange
{
	background: 			#CCC;
	display:				inline-block;
	text-align:				center;
	border-radius:			3px 3px 0 0;
	-moz-border-radius:		3px 3px 0px 0px;
	-webkit-border-radius:	3px 3px 0 0;
}

.tablist .tab
{
	background:				url('../Images/tabBackground.png') repeat-x;
    padding:               	0 6px 0 6px;
	margin: 				0 -4px 0 0px;
}

.tablist .tabOrange
{
	background: 			transparent url('../Images/tabOrangeBackground.png') repeat-x;
    width:                  120px;
}

.tablist .tabOrangeHidden
{
    display:                none;	
}

.tablist .tabOrange #login 
{
    padding:               	0;
}

.tablist #logout
{
}

.tablist .tab:first-child
{
	margin-left:		0;
}

.tablist .tab a
{
	color: 				#333;
	font-size:			11px;
	font-weight:		bold;
	text-decoration: 	none;
	padding: 			0 3px 0 0;
	position: 			relative;
	bottom: 			1px;
}

.tablist .tab img, .tablist .tabOrange img
{
	height:				18px;
	width:				18px;
	margin: 			2px 0;
	vertical-align:		-6px;
}

.tablist .tabOrange span
{
	font-size:			11px;
	font-weight:		bold;
	cursor: 			pointer;
}

.tablist .tabOrange span.label
{
	position: 			relative;
	bottom: 			1px;
	margin: 			0 1px 0 3px;
}

.tablist .tabOrange a
{
	color:				white;
}

.tablist .tab a:active
{
	color:				#CCC;
}

.tablist .tabOrange #loginArrow
{
	display:			inline-block;
	background:			url('../Images/loginArrow.png') no-repeat 0 -2px;
	width:				14px;
	height:				16px;
	position:			relative;
	bottom: 			1px;
}

.tablist .tabOrange.open #loginArrow
{
	background:			url('../Images/loginArrow.png') no-repeat -20px 4px;
	position:			relative;
	bottom: 			2px;
}

/******* login form *******/
/*
.tablist .tabOrange + #loginForm
{
	height:				0px;
	overflow:			hidden;
}
*/
#loginForm
{
	display:            none;
    position:           relative;
	float:              right;
	/*
	top:                20px;
	right: 				2px;
	height:				90px;
	*/
	width: 				220px;
	background:			black;
	border-width:		0px 1px 1px 1px;
	border-color:		gray;
	border-style:		solid;
	text-align:			left;
	padding:			5px 0 0 0;
	
	z-index:			10;
	transition:			height 0.5s ease-in;
	-webkit-transition:	height 0.5s ease-in;
	-moz-transition:	background 0.5s ease-in;
}

#loginForm a
{
	display:			inline-block;
	width:				90px;
	color:				white;
	font-size:			9px;
	margin: 			1px 5px 0 0;
	float:				right;
}

#loginForm a:visited
{
	color:				white;
}

#loginForm div p
{
	margin:				0;
}

#loginForm div p:after
{
	content: 			".";
	height:				0;
	visibility: 		hidden;
	display: 			block;
	clear:				both;
}

#loginForm #idInputField, #loginForm #passwordInputField
{
	width:				100px;
	height:				17px;
	border:				solid 1px #FF9900;
	
	border-radius:			3px;
	-moz-border-radius:		3px;
	-webkit-border-radius:	3px;
	
	background:			white;
	margin:				2px 0px 2px 7px;
}

#loginForm #loginButton
{
	float:				right;
	background:			url('../Images/findVehicleButton.png') -7px -7px;
	color:				white;
	border:				#FF9900 2px solid;
	margin:				5px 10px;
	font-weight:		bold;
		
	border-radius:			5px;
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
}

/******** message *******/

#message
{
	background:			url('../Images/messageBackground.png') repeat-x;
	height:				27px;
	padding: 			3px 15px 4px 5px;
	font-weight:		bold;
	font-size: 			12px;
	margin:				24px 0 20px 0;
	display: 			inline-block;
	min-width:			250px;
	border-radius:			5px;
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
}

#message #messageIcon
{
	display:			inline-block;
	background:			url('../Images/messageIcon.png') no-repeat 0 -37px;
	width:				30px;
	height:				26px;
}

#message.loggedIn #messageIcon
{
	display:			inline-block;
	background:			url('../Images/messageIcon.png') no-repeat 0 -4px;
	width:				30px;
	height:				26px;
}

#message #messageLabel
{
	position:		relative;
	left:			3px;
	top:			7px;
}

/****** try button ******/

#top
{
	position:		relative;
}

#tryButton
{
	vertical-align: middle;
	position: 		absolute;
	right: 			0;
	margin-top: 	10px;
	border:			none;
}

#tryButton.hidden
{
	visibility:		hidden;
}

/****** carousel ******/

.carousel
{
	width:			623px;
	margin:			0 auto;
	position: 		relative;
	padding: 		21px 0 22px 0;
	font-family:	Verdana, Geneva, sans-serif;
	font-size: 		24px;
}

.carousel ul
{
	list-style: 		none;
	margin: 			0px;
	padding: 			0px;
	zoom: 1;
}

.carousel ul li
{
	width:			623px;
	height:			514px;
	overflow: 		hidden;
	display: 		inline;
	float: 			left;
	text-align: 	center;
	zoom: 			1;
}

.carousel ul li img
{
	width:			623px;
	height:			291px;
}

.carousel .carousel-wrap
{
	width: 			623px;
	display: 		inline-block;
	vertical-align: middle;
	background: 	#1A1A1A;
	margin-bottom: 	0px;
	zoom: 			1;
	
	box-shadow:				0 0px 50px #111;
	-moz-box-shadow:		0 0px 50px #111;
	-webkit-box-shadow:		0 0px 50px #111;
	-o-box-shadow:			0 0px 50px #111;
}

.carousel .carousel-control
{
	overflow: 		hidden;
	display: 		inline-block;
	vertical-align: middle;
	width: 			27px;
	height: 		514px;
	cursor: 		pointer;
	line-height: 	779px;
	zoom: 			1;
	border: 		0px;
	
	position: 		absolute;
	top:            21px;
	z-index: 		10;
	
	text-align: 	center;
	font-weight:	bold;
	font-size: 		24px;
	color:			#FF9900;
}

.carousel .carousel-control .background
{
	background:		#000;
	opacity:		0.5;
	display: 		inline-block;
	vertical-align: middle;
	width: 			27px;
	height: 		514px;
	position: 		absolute;
	left:			0;
	top:			0;
}

.carousel .carousel-control .background + span
{
	position: relative;
}

.carousel .carousel-next
{
	right:			0;
}

.carousel .carousel-previous
{
	left:			0;
}

.carousel .commentBlock
{
	background:		url("../Images/Logo-fond-Freedom.png") 40% 50% no-repeat;
}

.carousel .comment
{
	text-align:		center;
	padding:		46px 60px;
	font-weight: 	bold;
}
/***** footer *****/

#footer 
{
	/*
	position:				absolute;
   	bottom:					0;
	*/
	background-color: 		#262327;
	clear: 					both;
	
	height:					25px;
	width:					100%;
	min-width:				1024px;
	margin-top: 			15px;
	border-top:				solid #FF9900 1px;
	box-shadow:				0 -10px 10px #111;
	-moz-box-shadow:		0 -10px 10px #111;
	-webkit-box-shadow:		0 -10px 10px #111;
	-o-box-shadow:			0 -10px 20px #111;

}

#footer ul
{
	list-style:			none;
	text-align:			center;
	margin: 			0;
	padding: 	 		0;
}

#footer li
{
	display:			inline-block;
	font-size:			12px;
	margin: 			5px 5px;
}

#footer li a, #footer li a:visited
{
	text-decoration:      none;
	color:                #FFFFFF;
}