article,footer { display: block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background:#ed1b2e url('../img/bg-top.png') repeat-x }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #FABBC1; text-decoration: none;}
a:hover { color: #fff; }
a:focus { outline: thin dotted; }
a:hover { outline: 0; }

html,body { height:100%}
#floater	{float:left; height:50%; margin-bottom:-185px; width:100%;}
#main { width: 620px; background-color:white; text-align:center; margin: 0 auto; clear:both; position:relative;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: inset 5px 5px 5px #aaa;
		-webkit-box-shadow: inset 5px 5px 5px #aaa;
		box-shadow: inset 5px 5px 5px #aaa;
		padding-top:150px;
		}
	#main footer{ background-color: #ed1b2e; width:360px; float:right; text-align:right;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		border-top-left-radius: 10px;
		color:#fabbc1;
		}
	#main footer h2, #main footer h3, h1.mobile, h2.mobile, h2.mobile a { font-weight:normal; padding:0 ; margin:10px 0 0 0; color:#FABBC1}
	#main footer h2, h1.mobile, h2.mobile { font-size : 18px; line-height:20px; letter-spacing:1}
	#main footer h3 { font-size : 12px;  line-height:12px}
	#main footer a{ color : #FABBC1 }
	#main footer strong, h1.mobile strong { color: white }
	h1#logo { margin: 0 0 100px 0; text-align:center}
	h1#logo a{ background : url(../img/wcare-logo.png) no-repeat; width: 300px; height:68px; display:block; font-size:0; margin:0 auto;}
	.clear { clear:both }
	.mobile { display:none }

@media print {
  * { text-align:left; background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  h1#logo a{ background : url(../img/wcare-logo.png) no-repeat; width: 300px; height:68px; display:block; font-size:0; margin:0 auto;}
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

@media only screen 
and (max-width : 320px){
	
	body { background-position: 0 -90px}
	.website { display:none }
	.mobile { display: block }
	#floater { display: none}
	
	h1.mobile, h2.mobile { font-size:24px; line-height:1.5em; text-align:center; font-weight:bold; padding: 0 1em;}
	h1.mobile { margin:1em 0 }
	h1#logo { padding:40px 0; margin:0 0 0.5em }
	h2.mobile { margin:0 }
	h1#logo a { background : url(../img/wcare-logo-small.png) no-repeat; width:200px; height:45px; display:block; margin:0 auto}
	#main { width: auto; margin:0 1em; padding:0;}
	#main footer { display:none }

}


@media only screen 
and (min-width : 321px)
and (max-width: 480px) {
	
	body { background-position: 0 -90px;}
	.website { display:none }
	.mobile { display: block }
	#floater { display: none}
	
	h1.mobile, h2.mobile { font-size:24px; line-height:1.5em; text-align:center; font-weight:bold; padding: 0 1em }
	h1.mobile { margin:0.5em 0 }
	h1#logo { padding:0.3em 0; margin:0 0 0.3em }
	h2.mobile { font-size:20px; margin:0.5em 0 0 ; line-height: 1.2em}
	h1#logo a { background : url(../img/wcare-logo-small.png) no-repeat; width:200px; height:45px; display:block; margin:0 auto }
	#main { width: 250px; margin:0 auto; padding:0 }
	#main footer { display:none }

}