/* Elliot Barer, ebarer [at] mac [dot] com, 9/19/2013 */


/* RESETS */
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, em, font, img, strong, var, ul, ol, dl, li,
fieldset, form, label, caption,
table, tbody, tfoot, thead, tr, th, td { background: transparent; margin: 0; padding: 0; border: 0; outline: 0; }

ol, ul 	{ list-style: none; }
:focus 	{ outline: 0; }
table 	{ border-collapse: collapse; border-spacing: 0; }


/* BASIC */
div 	{ display: block; }
.left 	{ float: left; }
.right 	{ float: right; }
.clear 	{ clear: both; }


/* FONTS */
@font-face 	{ font-family: 'Lucida'; src: url("fonts/Lucida.otf"); }
@font-face 	{ font-family: 'Myriad Pro Light'; src: url("fonts/MyriadPro-Light.otf"); }
@font-face 	{ font-family: 'Myriad Pro Semibold'; src: url("fonts/MyriadPro-Semibold.otf"); }

h1 			{ font: 45px/70px 'Myriad Pro Semibold', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: white; text-align: center; }
h2 			{ font: 24px/30px 'Myriad Pro Light', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: #999; text-align: center; margin-bottom: 30px; }
h3 			{ font: 14px/22px 'Myriad Pro Semibold', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: #999; text-align: left; margin-bottom: 5px; }
p	 		{ font: 14px/22px 'Lucida', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: #444; text-align: left; margin: 0 auto 20px; }

a 			{ font: 14px/22px 'Lucida', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: #2e78ba; text-decoration: none; display: inline-block; }
a:hover		{ text-decoration: underline; }

ul			{ margin: 0 0 20px; }
li	 		{ font: 14px/22px 'Lucida', 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; color: #444; text-align: left; list-style: square inside; }


/* BODY */
html		{ background: #f2f2f2; }

body 		{
			background: white;
			width: 980px; min-height: 100%;
			margin: 0 auto; padding: 0 70px;
			position: relative;
			-webkit-font-smoothing: antialiased;
			}


/* SECTIONS */
section		{ width: 680px; padding: 50px 150px; border-top:1px solid #e4e4e4; overflow: hidden; }
	
			
			/* HELLO */
			#hello						{
										background: url("images/vancouver.jpg") no-repeat; background-size: 1120px auto;
										width: 680px; height: auto;
										margin-left: -70px; padding: 65px 220px 50px;
										overflow: hidden; border: none;
										}
									
			#hello h2					{ color: #333; margin-bottom: 304px; }
			
			
			/* NAVIGATION */
			#nav						{ padding: 0 150px; border-top: 1px solid #e4e4e4;  }
			#nav ul						{ width: 399px; overflow: hidden; margin: 0 auto; }
			#nav li						{ float: left; list-style: none; padding: 20px; }
			
			
			/* CONTACT */
			#contact					{ border-bottom: 1px solid #e4e4e4; }
			#contact .location			{ overflow: hidden; }
			.location#clearview			{ margin-bottom: 50px; }
			.location img				{ width: 350px; height: auto; float: left; clear: both; border: 1px solid #e4e4e4; padding: 10px; }
			.location .address			{ float: left; margin-left: 40px; padding-top: 30px; }
			
			
			/* PATIENTS */
			#patients					{ width: 1120px; margin-left: -70px; padding: 50px 0; overflow: hidden; border: none; cursor: pointer; }
			.patient					{ width: 560px; height: 370px; float: left; position: relative; }
			.patient img				{ width: 560px; height: auto; }
			.patient h2.cover			{ position: absolute; z-index: 10; margin: 0; top: 20px; color: black; text-shadow: 0 0 25px black; }
			.patient .details			{ background: white; width: 460px; height: 275px; padding: 50px; position: absolute; z-index: 20; }
			.patient .close				{
										height: auto; width: auto;
										position: absolute; top: 0px;
										font-size: 50px; color: black;
										cursor: pointer; display: none;
										}
			.patient .close:hover		{ opacity: 0.5; }

			#child_services .details 	{ left: 560px; display: none; }
			#child_services .close,		
			#child_services h2.cover	{ right: 20px; }
			
			#adult_services .details	{ right: 560px; display: none; }
			#adult_services .close,
			#adult_services h2.cover	{ left: 20px; color: white; }
			
			
			/* DR. SIU */
			#drsiu img					{
										width: 305px; height: auto;
										float: left; clear: both;
										border: 1px solid #e4e4e4;
										padding: 10px; margin: 0 30px 10px 0;
										}
										
			/* FOOTER */
			#footer p					{ text-align: center; }
			
			
/* VIDEO FRAME */
.video_frame				{
							background: #f2f2f2;
							height: 100%; width: 100%; display: none; 
							position: fixed; top: 0; left: 0; z-index: 500;
							}

.video_frame .close			{
							height: 100%; width: 100%;
							position: absolute; top: 0; left: 0; z-index: 501;
							padding: 20px 0 0 50px;
							font-size: 50px; color: #666;
							cursor: pointer;
							}

.video_frame .close:hover	{ opacity: 0.5; }
					
.video_stage				{
							height: auto; width: 680px; 
							position: relative; z-index: 502;
							margin: 100px auto;
							}