<!doctype html>

<html>

<head>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
		html,body{font-family:"Open Sans";font-size:12pt;margin:0;padding:0}
		div {width:100%;text-align:center;margin-bottom:10px;}
		label{height:25px;font-size:12pt;text-align:left;display:block;margin-bottom:10px}
		* { -moz-box-sizing: border-box; box-sizing: border-box;}
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>

<body>
	
		<div style="height:60px;background:#c1002a;Xmargin-bottom:130px;line-height:60px;position:fixed;top:0;left:0;box-shadow:0 0 15px #111;z-index:100;">
			CNAM
		</div>
		
		<div style="padding:10px;max-width:600px;margin:50px auto;">
			<div style="background:#333;color:#fff;font-size:18pt;height:40px;line-height:40px;margin-top:40px;">
				ESPACE PERSONNEL
			</div>

			<div style="height:185px;padding:10px;background:#ddd;font-size:18pt;padding:10px;text-align:left">
				<div style="max-width:400px;margin:0 auto;">
					<label>Identifiant : </label>
					<div style="height:25px;background:#fff"></div>
					<label>Mot de passe : </label>
					<div style="height:25px;background:#fff"></div>
					<label style="color:#c1002a">Mot de passe perdu ?</label>
				</div>
			</div>

			<div style="height:95px;background:#c1002a;line-height:95px;font-size:18pt;color:#fff;">
				SE CONNECTER
			</div>
		</div>


	<div style="width:320px;height:480px;margin:20px auto;position:relative;box-shadow:0 0 10px #999;">
		<div style="height:60px;background:#c1002a;margin-bottom:30px;line-height:60px;">
			CNAM
		</div>
		
		<div style="padding:10px;">
			<div style="background:#333;color:#fff;font-size:18pt;height:40px;line-height:40px;">
				ESPACE PERSONNEL
			</div>

			<div style="height:185px;padding:10px;background:#ddd;font-size:18pt">
				<label>Identifiant : </label>
				<div style="height:25px;background:#fff"></div>
				<label>Mot de passe : </label>
				<div style="height:25px;background:#fff"></div>
				<label style="color:#c1002a">Mot de passe perdu ?</label>
			</div>

			<div style="height:95px;background:#c1002a;line-height:95px;font-size:18pt;color:#fff;">
				SE CONNECTER
			</div>
		</div>
	</div>


	<div style="position:fixed;bottom:0;right:0;width:50px;background:#fff;opacity:0.95;border:1px solid #ddd" id="w">
		test
	</div>

	
	<script>
		function wid(){
				$w = $('body');
				$("#w").text( $w.width());

			$( window ).resize( function(){
				$("#w").text( $w.width());
			});
		}


		$(document).ready(wid());
	</script>


</body>

</html>