/* Stylesheet "ViaMichelin" :: v1 (14-02-2007) */
/* Coded by "WeCode.fr"  */
/* You may learn from this CSS and use its techniques in your own projects, but the unique combination of images, colors, sizes, typography, and positioning ("the design") is copyright (c) 2007 "ViaMichelin" and may not be used by anyone but us. */ 

/*
	Style Index
	---------------------
	
	$1 - Site Structure Styles
		$1.1 - General Styles
		$1.2 - Main Layout Styles
		$1.3 - Blocks Layout Styles
		$1.4 - Extra Blocks Styles
		
	$2 - Content Styles
		$2.1 - General Content Styles
		$2.2 - Heading Styles
		$2.3 - Paragraph Styles
		$2.4 - Link Styles
		$2.5 - header
		
	$3 - List Styles
		$3.1 - General Lists
		$3.2 - Main Navigation
		$3.3 - Sidebar Lists
		$3.4 - Extra Lists
		
	$4 - Image Styles
		$4.1 - General Image Styles
		$4.2 - Image Buttons
		$4.3 - Content Images
		
	$5 - Form Styles
		$5.1 - General Form Styles
		$5.2 - Login Form
		$5.3 - Signup Form
		
*/ 







/*** $1 - Site Structure Styles ***/

		/* 1.1 - General Styles */
		
			* {
				margin:0;
				padding:0;
			}
			
			option {
				padding-right: 20px;
			}
						
		/************************/
	
		/* 1.2 - Main Layout Styles */
	
			body {
				background: url(../../img/vmdn/background.jpg) left top #fff;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
			}
			
			#container {
				margin: 0 auto;
				position:relative;
				width: 800px;
				overflow: hidden;
			}
			
			#header {
        background: url(../../img/vmdn/bg_header.png) no-repeat;
				height:144px;
				padding:0 21px 0 24px;
			}
			
			#main {
				display:table;
				width: 800px;
				padding: 0 21px;
				background-color: #FFF;
			}
			
			#content {
				padding:15px 0 0 0px;
				width: 780px;
			}

			#body_blue #content, #body_yellow #content {
				width:590px;
			}
			
			#sidebar {
				display: table;
				padding:15px 10px 0 0;
				width:171px;
			}
			
			#body_blue #sidebar, #body_yellow #sidebar {
				padding:15px 0 0 10px;
				width:181px;
			}
			#body_blue #sidebar {
				background:url(../../img/vmdn/bg_sidebar_blue.png) repeat-x center bottom #e6ecfb;
			}
			#body_yellow #sidebar {
				background:url(../../img/vmdn/bg_sidebar_yellow.png) repeat-x center bottom #fbf5e6;
			}
			
			#footer {
				background: url(../../img/vmdn/bg_footer.png) no-repeat top center;
				clear:both;
				color:#7c695a;
				display:block;
				margin:5px auto 0 auto;
				padding:20px 30px 10px 15px;
				width:756px;
			}
			
			#footer_test {
				width:100%;
				position:relative;
				height:50px;
				background-color:#00FFFF;
			}
			
			.left {
				float:left;
			}
			
			.right {
				float:right;
				padding:0 17px 0 0;
			}
			
			.tutoriel{
				padding:0;
				margin:0;
			}
			
		/************************/
	
		/* 1.3 - Blocks Layout Styles */

			/* 1.3.1 - Blocks Home */
				
				.block_large {
					background:url(../../img/vmdn/bg_block_large.gif) no-repeat center bottom; 
					display:table;
					height:340px;
					width:380px;
					float:left;
				}
				
				.block_large_top {
					background:url(../../img/vmdn/bg_block_large_top.png) no-repeat; 
					height:10px;
					padding:10px;
				}
				
				.block_large_content {
					width:565px;
				}
				
				.block_large_content_left {
					position:relative;
					margin:10px 0 10px 0;
					border:1px solid #ECECEC;
					border-width:0 0 0 1px;
					float:left;
					padding:0 0 0 10px;
					width:180px;
					height:290px;
					color:#003399;
				}
				
				.block_large_content_right {
					position:relative;
					border:1px solid #ECECEC;
					border-width:0 1px 0 0;
					float:right;
					margin-top:10px;
					padding:0 10px 0 0;
					text-align:center;
					width:170px;
					height:260px;
				}
				
				.dynamic_image {
					margin:10px 0 10px 0;
					height:150px;
				}
				
				.block_2_columns {
					background:url(../../img/vmdn/bg_block_large.gif) no-repeat center bottom;
					float:right;
					height:340px;
					width:380px;
				}
				.block_2_columns_top {
					background:url(../../img/vmdn/bg_block_large_top.png) no-repeat;
					height:10px;
					padding:10px;
				}
				.block_2_columns_content {
					
				}
				
				.block_orange {
					background:url(../../img/vmdn/bg_block_orange.gif) no-repeat left bottom;
					margin:15px 0 15px 0;
					padding:0 0 10px 0;
					width:171px;
				}
				
				.block_blue, .block_yellow {
					background:url(../../img/vmdn/bg_block_blue.gif) no-repeat left top #E6ECFB;
					display:table;
					margin:10px 0 0 0;
					padding:10px 0 0 0;
					width:569px;
				}
				
				.block_yellow {
					background:url(../../img/vmdn/bg_block_yellow.gif) no-repeat left top #FBF5E6;
					display:table;
				}
				
				.block_yellow_content {
					border:1px solid #FBF5E6;
					border-width:0 1px 0 1px;
					padding:10px 10px 10px 10px;
					width:547px;
				}
				.block_blue_content {
					border:1px solid #E6ECFB;
					border-width:0 1px 0 1px;
					padding:10px 10px 10px 10px;
					width:547px;
				}
			/************************/

		/************************/
	
		/* 1.4 - Extra Blocks Styles */
				
			.code {
				background-color:#FFFFFF;
				border: 1px solid #E6ECFB;
				border-width:0 1px 0 1px;
				clear:both;
				display:block;
				white-space:pre;
				color:#003399;
				width:547px;
				padding:5px 10px 0 10px;
				white-space: -moz-pre-wrap;
				word-wrap:break-word;
			}
			.cust_code {
				font-family : "Courier New",monospace;
				font-size : 12px;
				background-color:#E6ECFB;
				border: 1px solid #6495ED;
				border-width:1px 1px 1px 1px;
				clear:both;
				display:block;
				white-space:pre;
				color: #003399;
				width:540px;
				padding:5px 10px 5px 10px;
				white-space: -moz-pre-wrap;
				margin : 5px 0px 5px 0px;
				word-wrap:break-word;
			}
			.meta {
				display:inline;
				float:right;
				height:20px;
				line-height:20px;
				margin:0 20px 8px 0;
				width:192px;
			}
			
			.block_yellow .meta {
				background:url(../../img/vmdn/bg_meta_yellow.gif) no-repeat;
				text-align:center;
			}
			
			.block_blue .meta {
				background:#E6ECFB;
				text-align:right;
				font-weight : bold;
			}				
				
			.bg_block_blue_border, .bg_block_yellow_border {
				height:10px;
				width:569px;
			} 
			.bg_block_blue_border {background:url(../../img/vmdn/bg_block_blue_border.gif) no-repeat;}
			.bg_block_yellow_border {background:url(../../img/vmdn/bg_block_yellow_border.gif) no-repeat;}
			
			
			.block_blue_bottom, .block_yellow_bottom {
				background:url(../../img/vmdn/bg_block_blue_bottom.gif) no-repeat left bottom #E6ECFB;
				height:10px;
				width:569px;
			}
			
			.block_liste_exemples_bottom{
				clear:left;
			}
			
			.block_yellow_bottom {
				background:url(../../img/vmdn/bg_block_yellow_bottom.gif) no-repeat left bottom #FBF5E6;
			}
						
		/************************/







/*** $2 - Content Styles ***/

		/* 2.1 - General Content Styles */
		
			a:link, a:visited{
				color: #000;
				text-decoration: none;
			}
			
			a:hover, a:active{
				text-decoration: none;
			}
			
			p {
				line-height: 1.3em;
			}
			
		/************************/
	
		/* 2.2 - Heading Styles */
	
			h1 {
				color:#ff7800;
				font-size:17px;
				font-weight:bold;
				margin:0 0 10px 0;
			}

			#body_blue #content h1, #body_yellow #content h1 {
				color:#003399;
			}

			#content h2 {
				color:#ff7800;
				font-size:14px;
				font-weight:normal;
				margin:0 0 10px 0;
			}

			.tutoriel h3 {
				color:black;
				font-size:12px;
				font-weight:normal;
				margin:0 0 10px 0;
				padding: 0 0 0 10px; /* top right bottom left */
				background-image : url(../../img/vmdn/button_arrow_blue.gif);
				background-repeat : no-repeat;
				background-position : left center;
			}

			#body_blue #content h2, #body_yellow #content h2 {
				color:#000000;
				font-size:13px;
				font-weight:bold;
				margin:10px 0 10px 0;
			}

			.block_2_columns_left h2 {
				float:left;
				width:120px;
			}
			
			.block_2_columns_right h2 {
				float:left;
				width:195px;
			}

			#sidebar h3 {
				font-size:11px;
			}
			
			.block_orange h2 {
				background:url(../../img/vmdn/bg_block_orange.gif) no-repeat left top;
				display:block;
				font-size:17px;
				font-weight:bold;
				margin:0 0 0 0;
				padding:6px 10px 0 10px;
				width:151px;
			}
			
			.block_blue h3, .block_yellow h3 {
				float:left;
				font-size:13px;
				margin:0 0 0 10px;
			}

			.block_yellow_content h4 {
				color:#003399;
				font-size:11px;
			}			

		/************************/
	
		/* 2.3 - Paragraph Styles */
	
			#header p {
				color:#FFFFFF;
				font-size:12px;
				font-weight:bold;
				margin: 6px 0 3px 1px;
			}
			
			#header p span {
				color:#FF7800;
			}
			
			.block_2_columns_left p {
				float:left;
				width:120px;
			}
			
			.block_2_columns_right p {
				float:left;
				width:195px;
			}
			
			.block_orange p {
				background:#fff;
				border:1px solid #FF7800;
				border-width:0 1px 0 1px;
				padding:0 10px 10px 10px;
				width:149px;
			}
			
			.block_yellow_content p {
				color:#003399;
				margin:0 0 10px 0;
			}
			
			#main form p {
				color:#000000;
				font-size:11px;
				font-style:italic;
				margin:10px 0 10px 0;
			}
			
			#main form p span.required {
				color:#003399;
				display:block;
			}		
			#main form span.alert {
				color:#FF7800;
				display:block;
				font-weight : bold;
			}	
			.date, #button_rss {
				color:#ff7800;
			}

		/************************/
	
		/* 2.4 - Link Styles */
	
			#header form a {
				color:#FFFFFF;
				border:1px dotted #fff;
				border-width:0 0 1px 0;
			}
			
			#header #connect_form a {
				color:#FFFFFF;
				border:1px dotted #fff;
				border-width:0 0 1px 0;
			}
			
			#header form fieldset a {
				display:table;
				margin:2px 0 0 2px;
			}
			
			#header form a:hover {
				border:1px solid #fff;
				border-width:0 0 1px 0;
			}
						
			#header #nav li a {
				background:url("../../img/vmdn/tab_right.gif") no-repeat right top;
				color:#fff;
				display:block;
				padding:6px 15px 6px 6px;
			}
			
			#header #nav li a:hover, #header #nav .current a:hover{
				text-decoration: underline;
			}
			
			#sidebar li a:link, #sidebar li a:visited {
				border:1px dotted #000000;
				border-width:0 0 1px 0;
				margin:0 0 0 9px;
			}
			
			#sidebar .current a:link, #sidebar .current a:visited {
				font-weight:bold;
			}
			
			#sidebar li a:hover {
				border:1px solid #000000;
				border-width:0 0 1px 0;
			}				
			
			#footer a:link, #footer a:visited {
				border-bottom: 1px dotted #7c695a;
				color:#7c695a;
				text-decoration:none;
			}
			
			#footer a:hover {
				border-bottom:1px solid #7c695a;
			}
			
			.block_large_content_left a.read_more, .block_2_columns_left a.read_more, .block_2_columns_right a.read_more {
				background:url(../../img/vmdn/button_read_more.gif) no-repeat top right;
				color:#FF7800;
				display:block;
				float:right;
				font-weight:bold;
				line-height:20px;
				margin:5px 5px 0 0;
				padding:0 25px 0 0;
			}
			
			.block_large_content_left a.read_more {
				position: absolute;
				bottom:0;
			}

			.block_blue ul li a, .block_yellow ul li a {
				background:url(../../img/vmdn/button_arrow_blue.gif) no-repeat right 4px;
				border:1px dotted #003399;
				border-width:0 0 1px 0;
				line-height:16px;
				margin:0 10px 0 0;
				padding:0 9px 0 0;
			}
			
			.block_liste_exemples a {
				background:url(../../img/vmdn/button_arrow.gif) no-repeat center right;
				color:#FF7800;
				font-weight:bold;
				line-height:20px;
				margin:0 5px 0 0; /* top right bottom left */
				padding:0 15px 0 0; /* top right bottom left */
			}
			
			.block_blue ul li  a:hover, .block_yellow ul li  a:hover {
				border:1px solid #003399;
				border-width:0 0 1px 0;
			}
			
			.block_yellow_content a {
				border:1px dotted #003399;
				border-width:0 0 1px 0;
				color:#003399;
			}
			
			.block_yellow_content a:hover {
				border:1px solid #003399;
				border-width:0 0 1px 0;
			}

			.block_orange a{
				display:block;
				text-align:center;
			}			

			.tutoriel a{
				border-bottom:1px dotted black;
			}

		/************************/
	
		/* 2.5 - Header Styles */
		
      #header .logo-dn { position: absolute; right: 0; padding: 0; }
      #header #logo-dev { top: 37px; }
      #header #header-tools { position: absolute; right: 0; top: 112px; width: 362px; padding: 0; }
      /* LANGUAGE                                               */
      #language-switch { float: right; position: relative; width: 101px; height: 31px; margin-left: 4px; background: url("../../img/vmdn/sprite_lang.png") left -50px no-repeat; }
      #language-switch .current { display: block; width: 101px; height: 23px; padding: 8px 0 0 0; }
      #language-switch a { display: block; padding: 0 21px 0 12px; width: 68px; height: 17px; background: url("../../img/vmdn/sprite_lang.png") left top no-repeat; text-indent: -5000px; }
      #language-switch .french a { background-position: -101px -8px; }
      #language-switch .french a:hover { background-position: -202px -8px; }
      #language-switch .english a { background-position: -101px -70px; }
      #language-switch .english a:hover { background-position: -202px -70px; }
      #language-switch #language-switch-list { position: absolute; top: 0; display: none; padding: 8px 0 8px 0; background: url("../../img/vmdn/sprite_lang.png") left top no-repeat; }
      #language-switch #language-switch-list li { margin: 0; }
      /* CONTACT                                                */
      #header-tools #contact-button { display: block; float: right; width: 167px; height: 31px; margin-left: 4px; text-indent: -5000px; background: url("../../img/vmdn/contact.png") left top no-repeat; ;}


/*** $3 - List Styles ***/

		/* 3.1 - General Lists */
		
			ul li {
				list-style:none;
			}
			
		/************************/
	
		/* 3.2 - Main Navigation */
	
			#header #nav {
				float:left;
				margin:0 0 0 -3px;
				padding:0;
				position:absolute;
				top:119px;
			}
			
			#header #nav li {
				background:url(../..//img/vmdn/tab_left.gif) no-repeat left top;
				float:left;
				margin:0 1px 0 0;
				padding:0 0 0 9px;
			}
			
			#header #nav .current {
				background-image:url(../../img/vmdn/tab_left_on.gif);
			}
			#header #nav .current a:link, #header #nav .current a:visited {
				background-image:url(../../img/vmdn/tab_right_on.gif);
			}
			
			#header #language {
				position:absolute;
				right:137px;
				top:126px;
			}
			
			#header #language li{
				display:inline;
			}
			
		/************************/
	
		/* 3.3 - Sidebar Lists */
	
			#sidebar li {
				border:1px solid #ff7800;
				border-width:0 0 1px 0;
				/*text-align:justify;*/
				padding:10px 0 10px 5px;
			}
			
			#sidebar .subnav li {
				background:url(../../img/vmdn/button_arrow.gif) no-repeat 0 9px;
			}			
			
			#body_blue #sidebar li, #body_yellow #sidebar li {
				border:0;
				padding:5px 0 5px 0;
			}
		
		/************************/
		
		/* 3.3.1 - Sidebar Lists - Samples Submenu */
		
			#sidebar .subnav .samples_subnav li {
				background:none;
			}
		
			#body_blue #sidebar .subnav .samples_subnav li{
				border:0;
				padding: 3px 0 2px 20px;
			}
			
			#sidebar .current .samples_subnav a:link, 
			#sidebar .current .samples_subnav a:visited {
				font-weight: normal;
			}

			#sidebar .current .samples_subnav .current a:link, 
			#sidebar .current .samples_subnav .current a:visited{
				font-weight : bold;
			}
			
		/************************/
	
		/* 3.4 - Extra Lists */

			.block_large_content_left ul, .block_2_columns_right ul, .block_2_columns_content ul{
				color:#003399;
				font-size:12px;
				font-weight:bold;
				line-height:14px;
			}
			.block_large_content_left li, .block_2_columns_content li{
				background:url(../../img/vmdn/button_arrow.gif) no-repeat 0 5px;                                
				padding-left : 10px;
				margin:5px 0 5px 0;
			}
			.block_2_columns_right ul {
				float:left;
				margin:0 0 0 0;
			}

			.block_blue ul, .block_yellow ul, .block_liste_exemples ul{
				display:block;
				margin:0 10px 0 10px;
				padding:0 0 0 0;
				width:549px;
			}
						
            .block_blue li, .block_yellow li, .block_liste_exemples li {
                float:left;
                margin:0 5px 3px 5px;
                min-width:170px;
                <!--[if lt IE 7]>
                width:170px;
                <![endif]-->
            }
			
			.block_orange ul {
				background:#fff;
				border:1px solid #FF7800;
				border-width:0 1px 0 1px;
				color:#ff7800;
				font-weight:bold;				
				padding:0 10px 10px 10px;
				width:149px;
			}

			.tutoriel li{
				background:url(../../img/vmdn/button_arrow_blue.gif) no-repeat 0 5px;
				background-position : left center;
				padding-left:10px;
			}




/*** $4 - Image Styles ***/

		/* 4.1 - General Image Styles */
		
			img {
				border: none;
			}
			
		/************************/
	
		/* 4.2 - Image Buttons */
	
			#logo {
				float:left;
				margin:0;
				position:absolute;
				top:36px;
			}
			
			#footer img {
				margin:0 10px 0 0;
				position: relative;
				top:11px;
			}
			
			#button_rss {
				background:url(../../img/vmdn/button_blog_rss.png) no-repeat;
				display:block;
				font-size:13px;
				height:16px;
				padding:2px 0 2px 10px;
				width:161px;
			}
			
		/************************/
	
		/* 4.3 - Content Images */
			
			.dynamic_image img{
				border:1px solid #ececec;
				margin:0 0 10px 0;
			}
			
			.block_2_columns_left img, block_2_columns_right img {
				float:right;
			}
			
		/************************/







/*** $5 - Form Styles ***/
	
		/* 5.1 - General Form Styles */
						
			fieldset {
				border:0;
				margin:0 0 0 0;
				padding:0 0 0 0;
			}
			
			legend {
				display:none;
			}
			
		/************************/
	
		/* 5.2 - Login Form */
			
		/************************/

			#header form {
				float:right;
				height:85px;
				padding:5px 0 0 0;
				width:180px;
			}
			
			#header .logged {
				float:right;
				height:85px;
				padding:10px 1px 1px 1px;
				margin-left: 5px;
				width:170px;
				color:#FFFFFF;
			}
			
			#header input {
				font-size:9px;
				margin: 0 0 2px 0;
				padding:2px 1px 1px 1px;
				border:1px solid #FFFFFF;
				width : 110px;
			}

			#header input.submit {
				border:none;
				float:right;
				height:22px;
				position:absolute;
				right:5px;
				top:49px;
				width:22px;
			}
			
			#header .link_password {
				padding:1px 1px 1px 1px;
			}
			
			#header label {
				color : #FFFFFF;
			}
			
		/************************/
	
		/* 5.3 - Signup Form */
			
		/************************/

			#main form {
				color:#003399;
				width:569px;
			}
			
			#main fieldset {
				background:url(../../img/vmdn/bg_fieldset.gif) repeat-x left bottom;
				border:none;
				padding:15px 0 20px 0;
			}
			
			#main fieldset.no_border {
				background:none;
			}
			
			#main legend {
				display:none;
			}
			
			#main label {
				display:block;
				float:left;
				margin:7px 5px 0 0;
				_margin:7px 0 0 5px;
				padding:0 0 0 1px;
				text-align:right;
				width:134px;
			}
			
			#main label.long {
				color:#000000;
				width:auto;
			}
			
			#main input {
				border:1px solid #000000;
				font-size:12px;
				margin:5px 0 0 0;
				padding:2px 0 2px 0;
				width:150px;
			}
			
			#main input.small {
				width:100px;
			}
			#main input.long {
				width:200px;
			}
			
			#main input.required, #main select.required {
				background:#E6ECFB;
			}

			#main select{
				border:1px solid #000000;
				color:#003399;
				font-size:12px;
				margin:3px 0 0 0;
				padding:2px 0 1px 0;
				width:152px;
			}
			
			#main select.small {
				width:auto;
			}
			
			#main select.no_label {
				display:inline;
				margin:0 0 0 165px;
			}	
			
			#main fieldset.large label {
				display:inline;
				float:none;
				margin:0 0 0 15px;
				padding:2px 0 0 0;
				width:auto;
			}
			
			#main label.legend_label {
				display:block;
				float:left;
				font-weight:bold;
				padding:0 0 0 0px;
				margin:5px 0 0 0;
				width:166px;
				_width:162px;
			}
			
			#main input.inline {
				border:none;
				display:inline;
				float:left;
				margin:5px 0 0 0;
				width:auto;
			}
			*> #main fieldset.large input{
				margin:5px 0 0 12px;
			}
			
			#main input.submit {
				border:none;
				height:20px;
				margin:0 0 0 135px;
				_margin:0 0 0 145px;
				width:80px;
			}
			
			#main form .bold {
				font-weight:bold;
			}
			.termsofuses {
				background-color:#E6ECFB;
				width:500px;
				padding:5px 10px 5px 10px;
			}