﻿/*CSS RESET START*/
html, body, div, span, applet, object, iframe,
h1, h2, 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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/*vertical-align: baseline;
	background: transparent;*/
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
/*body 
{
	height: 100%;
}*/
a
{
	text-decoration: none;
	color:Black;
	cursor: hand;
}
.hr
{
	position:relative;
	width:100%;
	clear:both;
	height:1px;
}
a:hover
{
	text-decoration: underline;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*CSS RESET END*/

body
{
	font-family:Arial;
	font-size:11px;
	text-align:center;
	padding: 0 2px;	
}

.FormTextField
{
	border: 1px solid #D2D1CD;	
	margin: 0;
	/*padding-left:5px;this is according to renault style guides*/
}
.search_result
{
	white-space:nowrap;
	overflow:hidden;
	cursor:default;
	padding-left:2px;
	text-align:left;
	position:relative;
}

.VerticalSpacerTen
{
	clear:both;
	height:10px;
	line-height:10px;
}
.VerticalSpacerFive
{
	clear:both;
	height:5px;
	line-height:5px;
}
.VerticalSpacerTwo
{
	clear:both;
	height:2px;
	line-height:2px;
}

.clear 
{ 
    clear:both; 
    display:block; 
    overflow:hidden; 
    visibility:hidden; 
    width:0px; 
    height:0px;
}
.left
{
    float:left;
}

#Body
{
	width: 965px;
	text-align:left;
	margin: 0 auto;
}

#PageTop  
{
	float: left;
	position: relative;
	z-index: 10;
}

#PageMiddle 
{ 
	float: left;
	position: relative;
	width: 100%;
	z-index: 5;
}
#PageBottom  
{
	float:left;
	width: 100%;
	margin-top: 30px;
}
#ContentHolder { width: 575px; float: left;}
#ContentHolderNoLeft { width: auto; float: left;}
#RightNavHolder { width: 185px; float: left;}

/*** TOP NAV START ***/



#TopNavHeader
{
	padding-top: 8px;
}

#TopNavHeader ul.menu {
	list-style-type:none;
	margin: 0;
	width: 100%;
}

#TopNavHeader li {
	float: right;
}

#TopNavHeader li , 
#TopNavHeader a
{
	color: #A2A5A4;
}

#TopNavBanner 
{
	padding-top: 7px;
}

#TopNavPageTitle
{
	margin-bottom: 3px; /* Should have a 10px bottom margin.  However, factoring in the padding builtin to the FONT itself, 3px works to complete the 10px between the bottom of the page title and left hand menu/page content */
}

#TopNavMainMenu ul.root
{
	position:relative;
    float: left;
    line-height: 12px;
}

#TopNavMainMenu li {
    font-size: 12px;
    float: left;
    text-transform: uppercase;
}

#TopNavMainMenu li a {
    text-decoration: none;
}

#TopNavMainMenu .link {
    padding: 0px 10px 0px 0px;
}

#TopNavMainMenu .link:hover, #TopNavMainMenu .link.selected { color: #F8B600; }
/*#TopNavMainMenu .brand1 .link:hover, #TopNavMainMenu .brand1 .link.selected { color: #F8B600; }*/
/*#TopNavMainMenu .brand2 .link:hover, #TopNavMainMenu .brand2 .link.selected { color: #F8B600; }*/
#TopNavMainMenu .brand3 .link:hover, #TopNavMainMenu .brand3 .link.selected { color: #003293; }
#TopNavMainMenu .brand4 .link:hover, #TopNavMainMenu .brand4 .link.selected { color: #454C54; }
#TopNavMainMenu .brand5 .link:hover, #TopNavMainMenu .brand5 .link.selected { color: #C40E29; }
#TopNavMainMenu .brand6 .link:hover, #TopNavMainMenu .brand6 .link.selected { color: #005BBB; }

#TopNavMainMenu .divider {
    padding: 0px 10px 0px 0px;
}

#TopNavMainMenu
{
    height: 11px;
	margin: 20px 0 13px 0; /* Should have a 20px bottom margin.  However, factoring in the padding builtin to the FONT itself, 13px works to complete the 20px between the top of the page title and top nav menu */
}

#TopNavMainMenu li.NavTreeSprite:hover, 
#TopNavMainMenu li.NavTreeSprite.selected
{
	background-position-y: -12px;
}

#TopNavMainMenu #TopNavMenuBrand0_L1
{
	/* don't show any menu for latest news */
	display: none !important;
}

#TopNavMainMenu ul.menu
{
	position: relative;
	top: 8px;
	left: 10px;
	border: 1px solid #D0CFCB;
	float: left;
}

#TopNavMainMenu ul.L1
{
	border-top: none;
}

#TopNavMainMenu ul.L2
{
	position: absolute;
	left: 185px;
	top: -1px;
}


#TopNavMainMenu li.L1,
#TopNavMainMenu li.L2
{
	position: relative;
	float: left;
	clear: both;
}


#TopNavMainMenu .BulletHolder
{
	margin: 10px 5px 10px 20px;
	width: 5px;
	float: left; 
	
}

#TopNavMainMenu .ExpandMark
{
	margin-left: 10px;
	margin-top: 4px;
	float: right; 
}

#TopNavMainMenu .MenuCaption
{
	overflow:hidden;
	margin: 7px 20px 9px 0px;
	width: 135px;
	font-size: 11px;
	line-height: 13px;
}

#TopNavMainMenu a.L1,
#TopNavMainMenu a.L2
{
	position: relative;
	display: block;
	clear: both;
	float:left;

	background-color: white;	
	color: #000000;
	text-decoration: none;
	font-weight: bold;

	width: 185px;
	vertical-align: top;
}

#TopNavMainMenu a.L1:hover,
#TopNavMainMenu a.L2:hover,
#TopNavMainMenu a.child-hover
{
	background-color: #EAE9E8;
}

/*** BOTTOM NAV START ***/

#BottomNav
{
	float: left;
	width: 100%;
	border-top: 1px solid black;
	padding-top: 10px;
	padding-bottom: 5px;
}

#BottomNavMenu ul.menu {
	list-style-type:none;
	margin: 0;
	width: 75%;
}

#BottomNavMenu li {
	float: left;
}

#BottomNavMenu li , 
#BottomNavMenu a,
#BottomNavMenu div {
	color: #A2A5A4;
}

/*** RIGHT NAV START ***/

#RightNav
{
}

.RightNavBlock
{
	width: 185px;
	clear: both;
	margin-bottom: 1px;
}
.RightNavBlock .iconWrapper
{
	float:left;
	width:15px;
}
.RightNavBlock .rightNavLink
{
	width:145px;
	float:left;
	display:block;
	clear:right;
	padding-left:5px;
}
.Wide
{
	width: 374px;
}

.Wide .RightNavBlockContent
{
	padding: 13px 20px 12px 20px;
	
}

.RightNavBlockContent
{
	padding: 10px;
}

.RightNavLinkIcon
{
	float: left; 
	width: 24px;
}

/*this block is always yellow (Renault themed)*/
.RightNavBlock.Yellow
{
	margin-bottom: 1px;
	background-color: #F8B600;
	color: #000;
}

.RightNavBlock.Yellow a
{
	color: White;
}

.RightNavBlock.DarkGrey
{
	margin-bottom: 1px;
	background-color: gray;
	color: #ffffff;
}

.RightNavDivider
{
	margin-top: 10px;
	border-top: 1px solid white;	
	height: 10px;
}

/*LIGHT GREY GRADIENTS*/
#LeftNavMenu li.L1,
.RightNavBlock.Grey,
.FilterBy
{
	background-color: #D2D1CD;
	background: -webkit-gradient(linear, left top, left bottom, from(#DBDAD7), to(#D2D1CD));
	background: -moz-linear-gradient(top, #DBDAD7, #D2D1CD);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#DBDAD7, endColorstr=#D2D1CD)";
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBDAD7', endColorstr='#D2D1CD');*/
}

/*DARK GREY GRADIENTS*/
.DarkGreyGradient,
.DynamicButton
{
	background-color: #8F9291;
	background: -webkit-gradient(linear, left top, left bottom, from(#B0B2B2), to(#8F9291));
	background: -moz-linear-gradient(top, #B0B2B2, #8F9291);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B0B2B2, endColorstr=#8F9291)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B0B2B2', endColorstr='#8F9291');
}

.DynamicButton30
{
	background-color: #8F9291;
	background: -webkit-gradient(linear, left top, left bottom, from(#B0B2B2), to(#8F9291));
	background: -moz-linear-gradient(top, #B0B2B2, #8F9291);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B0B2B2, endColorstr=#8F9291)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B0B2B2', endColorstr='#8F9291');
}

/*SOLID GREYS*/

.Date,
.MediaDate,
.MediaContent
{
	color: #666666;	
}


/**Generic Styles**/
.Title
{
	font-size: 20px;
	text-transform:uppercase;
	margin-right:2px;
}
.NeueHelvetica77-bdcn_cyrillic 
{
    position: relative;
    font-family: 'RenaultCondensedBoldCyrillic', Arial, Helvetica, sans-serif;
}
.NeueHelvetica77-bdcn 
{
    position: relative;
    font-family: 'RenaultCondensedBold', Arial, Helvetica, sans-serif;    
}

@font-face {
    font-family: 'RenaultCondensed';
    src: url('/Fonts/Basic Latin/RN00145Condensed-W01.eot');
    src: url('/Fonts/Basic Latin/RN00145Condensed-W01.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Basic Latin/RN00145Condensed-W01.woff') format('woff'),
         url('/Fonts/Basic Latin/RN00145Condensed-W01.ttf') format('truetype'),
         url('/Fonts/Basic Latin/RN00145Condensed-W01.svg#renaultcondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RenaultCondensedBold';
    src: url('/Fonts/Basic Latin/RN00145CondensedBold-W01.eot');
    src: url('/Fonts/Basic Latin/RN00145CondensedBold-W01.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Basic Latin/RN00145CondensedBold-W01.woff') format('woff'),
         url('/Fonts/Basic Latin/RN00145CondensedBold-W01.ttf') format('truetype'),
         url('/Fonts/Basic Latin/RN00145CondensedBold-W01.svg#renaultcondensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RenaultCondensedLight';
    src: url('/Fonts/Basic Latin/RN00145CondensedLight-W01.eot');
    src: url('/Fonts/Basic Latin/RN00145CondensedLight-W01.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Basic Latin/RN00145CondensedLight-W01.woff') format('woff'),
         url('/Fonts/Basic Latin/RN00145CondensedLight-W01.ttf') format('truetype'),
         url('/Fonts/Basic Latin/RN00145CondensedLight-W01.svg#renaultcondensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RenaultCondensedCyrillic';
    src: url('/Fonts/Cyrillic/RN00145Condensed-W10.eot');
    src: url('/Fonts/Cyrillic/RN00145Condensed-W10.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Cyrillic/RN00145Condensed-W10.woff') format('woff'),
         url('/Fonts/Cyrillic/RN00145Condensed-W10.ttf') format('truetype'),
         url('/Fonts/Cyrillic/RN00145Condensed-W10.svg#renaultcondensedcyrillic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RenaultCondensedBoldCyrillic';
    src: url('/Fonts/Cyrillic/RN00145CondensedBold-W10.eot');
    src: url('/Fonts/Cyrillic/RN00145CondensedBold-W10.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Cyrillic/RN00145CondensedBold-W10.woff') format('woff'),
         url('/Fonts/Cyrillic/RN00145CondensedBold-W10.ttf') format('truetype'),
         url('/Fonts/Cyrillic/RN00145CondensedBold-W10.svg#renaultcondensedboldcyrillic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RenaultCondensedLightCyrillic';
    src: url('/Fonts/Cyrillic/RN00145CondensedLight-W10.eot');
    src: url('/Fonts/Cyrillic/RN00145CondensedLight-W10.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Cyrillic/RN00145CondensedLight-W10.woff') format('woff'),
         url('/Fonts/Cyrillic/RN00145CondensedLight-W10.ttf') format('truetype'),
         url('/Fonts/Cyrillic/RN00145CondensedLight-W10.svg#renaultcondensedlightcyrillic') format('svg');
    font-weight: normal;
    font-style: normal;
}

.SectionDivider
{
	clear: both;
	width: 100%;
	height: 10px;
	line-height: 10px;
	border-bottom: 1px solid #8D8D8D;
	margin-bottom: 15px;
}

.LinkBullet
{
	width: 5px;
	height: 7px;
	margin-top: 3px; 
	margin-right: 5px; 
	float: left;	
	background-image:url(/images/public/icons/UI.png?v=1);
	background-repeat:no-repeat;
	clear:none;
	line-height: 1px;
	font-size: 1px;
}
.LinkBullet.White
{
	background-position:-5px 0px;
}

/*** DYNAMIC BUTTON ***/
.DynamicButton
{
	display:inline-block;
	zoom:1;
	*display:inline;
	text-decoration: none;
	cursor: hand;
}

.DynamicButton .ArrowBlock
{
	float: left;
	padding: 5px 6px;
}

.DynamicButton .InnerText
{
	color: White;
	display:inline-block;
	zoom:1;
	*display:inline;
	padding: 1px 8px;
}
/*** DYNAMIC Yellow BUTTON ***/
.DynamicButtonYellow
{
	display:inline-block;
	zoom:1;
	*display:inline;
	text-decoration: none;
	cursor: hand;
}

.DynamicButtonYellow .ArrowBlock
{
	float: left;
	padding:0px 10px 0px 10px;
}

.DynamicButtonYellow .InnerText
{
	color: White;
	display:inline-block;
	zoom:1;
	*display:inline;
	padding: 0px 10px;
}

.DynamicButtonYellow .CenteringMarginArrow
{
	margin-top:11px;
}

.DynamicButtonYellow .CenteringMargin
{
	margin-top:8px;
}

/*** DYNAMIC 30px BUTTON ***/
.DynamicButton30
{
	display:inline-block;
	zoom:1;
	*display:inline;
	text-decoration: none;
	cursor: hand;
}

.DynamicButton30 .ArrowBlock
{
	float: left;
	padding:0px 10px 0px 10px;
}

.DynamicButton30 .InnerText
{
	color: White;
	display:inline-block;
	zoom:1;
	*display:inline;
	padding: 0px 10px;
}

.DynamicButton30 .CenteringMarginArrow
{
	margin-top:11px;
}

.DynamicButton30 .CenteringMargin
{
	margin-top:8px;
}

.leftBorder
{
    border-left: 1px solid #8E9090;
}
.rightBorder
{
	border-right: 1px solid #8E9090;
}

.bottomBorder
{
	border-bottom: 1px solid #8E9090;
}

.brandTab
{
	float: left;	
	height: 68px;
    margin: auto;    
}

.topStoryImageBlock
{
	float: right;
	height: 270px;
	width: 360px;
}

.BrandMediaCentreLink
{
	float: left;
	clear: both;
	margin-top: 5px;
	width:165px;
}
.whitelink
{
	color:White;
}


.Bold
{
    font-weight: bold;
}

.BecomeAMember_Row
{
	background-color:#E0E0DD;
}

.BecomeAMember_Row td
{
	border-left-style:solid;
	border-left-color:white;
	border-left-width:1px;
}



.BecomeAMemberCenter
{
	margin:0px auto;
}
.BecomeAMemberIndent
{
	text-align:left;
	margin-left:150px;
}
.YellowTitle
{
	color:#f8b600;
}
.YellowGradient
{
	background-color: #f7b408;
	background: -webkit-gradient(linear, left top, left bottom, from(#f9cb08), to(#f7b408));
	background: -moz-linear-gradient(top, #f9cb08, #f7b408);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9cb08, endColorstr=#f7b408)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9cb08', endColorstr='#f7b408');
}
.YellowGradient:hover
{
	background-color: #f89e00 ;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbbb01), to(#f89e00));
	background: -moz-linear-gradient(top, #fbbb01, #f89e00 );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fbbb01, endColorstr=#f89e00)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbbb01', endColorstr='#f89e00');

}

.success
{
	color:#009900;
}

.upper 
{
    text-transform:uppercase;
}

.StayConnectedHelp 
{
 	background-image: url(/images/public/icons/QuestionMark.png);
	background-repeat: no-repeat;   
    width: 15px; 
    height: 16px;
    float: left;
    margin-left: 10px;
    cursor: default;
}

/** Tweet template styling **/
#tweets 
{
    clear: both;
    margin-top: 5px;    
}

.tweet 
{
    clear: both;
    float: left;
    margin-bottom: 10px;
    font-size: 11px;  
}

.tw-avatar 
{
    vertical-align: top;
    padding-right: 10px;
}

.tw-content 
{
    width: 100%;
    vertical-align: top;
}

.tw-header .name 
{
    font-size: 12px;
    font-weight: bold;    
    margin-right: 5px;
}

.tw-header .screen-name 
{
    color: #8e9090;
}

.tw-header .created-at 
{
    color: #8e9090;
    float: right;
}

.tw-text a 
{
    color: #579ed3;
}

.tw-footer 
{
    margin-top: 5px;
}

.tw-footer a 
{
    float: left;
    display: block;
    margin-right: 10px;
    color: #8e9090;
}

.twitter-sprite 
{
    background: url('/images/public/icons/twitter.png');
    height: 16px;
    width: 16px;
    float: left;
    margin-right: 5px;
    top: -3px;
    position: relative;
}

.twitter-sprite.reply 
{
    background-position: 0 16px;        
}

.twitter-sprite.retweet
{
    background-position: 48px 16px;
}

.twitter-sprite.favorite
{
    background-position: 96px 16px;
}

#twitter-header .follow-button 
{
    float: right;
}

#twitter-header .follow-button.hidden 
{
    position: absolute;
    left: -10000px;    
}

/** Right nav twitter **/
#RightNavTwitter #twitter-header 
{
    width: 340px;    
}

#RightNavTwitter #twitter-carousel
{
    width: 340px;
    height: 85px;
    margin-top: 5px;
    overflow-y: hidden;
    position: relative;
}

#RightNavTwitter .tweet 
{
    height: 80px;
}

/** Brand landing page twitter **/
#BrandTwitter #twitter-carousel
{
    height: 75px;
    overflow-y: hidden;
    position: relative;
}

#BrandTwitter .tweet 
{
    height: 70px;
}

.embedcode
{
    float: left;
    position: relative;    
}

.embedcode ul {
    position: absolute;
    background: white; 
    border: 1px solid #000;
    top: 20px;
    width: 310px;
    display: none;
    text-align: left;
    padding: 5px;
    z-index: 10;
}

.embedcode ul textarea {
    width: 305px;
}