/*
 * media queries for responsive design
 * these follow after primary styles so they will successfully override.
 */
 /* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-width: 480px) {


/* ---------vert portrait ipad, iphone  --------------------------*/

	html, body{height: 100%;}

	#sidebar.navigation{
		position: absolute;
		left: -320px;
		top: 0;
		width:300px;
		margin: 40px 10px;
		background-color: white;
/* 		display: none; */
/* 		box-shadow: 5px 0 10px 5px #bbb; */
	}

	#container{
		overflow-x: hidden;
	}

	body{
		width: 100%;
		height: 100%;
/* 	 	overflow-x: hidden; */
	 	}

	#sliding_container{
		box-shadow: -5px 0 10px 5px #bbb;
		position: relative;
		display: block;
/* 		overflow-x: hidden; */
	}
	.submit{
		border-radius: 0;
	}

	#global_header .global_search input.search_field {
	   width: 67%;
	   border-radius: 0;									/*29.166666666667   140px/480px*/
	 }

	 #global_header .global_search .search_selector {
	   margin: 08.75% 0 0;										/*---7px/80px 0 0--*/
	   font: 0.625em "Trebuchet MS",sans-serif;				/* --10px/16px--*/
	   border-radius: 0;
	 }

	#sidebar h1 a{
		margin: 0 auto;
	}

	#sidebar h1 a.ir{ /*Reset this in local CSS*/
/* 	 background-image: url(../../280x114_text-Department-Logo.png); */
/*
	 height: 114px;
	 width: 280px;
*/
	}

	#sidebar ul.section_nav{
		width: 100%;
	}

	#sidebar ul.section_nav li a{
		display: block;
		width: auto; /*overrides previous width setting in main CSS*/
		border: 0 none;
        margin: 0;
		padding: 6px 0 5px;
	    text-indent: 1em;
	}

	#sidebar ul.section_nav li a.expandable{
	   display: inline-block;
	   width: 86%;
	}

	#sidebar ul.section_nav li a.more_button{
    margin:0;
    margin-left: 1%;
    padding: 6px 0 5px;
    text-indent: 0;
    width: 13%;
    float:right;
	}

	#mobile_nav{
		position: fixed;
		display:block;
		width: 100%;
		height: 2.5em;
		background: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(133, 133, 133, 0.7)),color-stop(3%,rgba(99, 99, 99, 0.7)),color-stop(50%,rgba(32, 32, 32, 0.7)),color-stop(51%,rgba(0, 0, 0, 0.7)),color-stop(97%,rgba(0, 0, 0, 0.7)),to(rgba(38, 38, 38, 0.7)));
		color: white;
		z-index: 5000;
	}

	.breadcrumbs{
		margin-left: .75em;
	}

	#container #main{width: 100%; padding: 0;}

	#show_nav{
		position: absolute;
		font-size: 1em;
		font-weight: bold;
		z-index: 3;
		top:.25em;
		-webkit-border-top-left-radius: 16px;
		-webkit-border-bottom-left-radius: 16px;
		-webkit-border-top-right-radius: 6px;
		-webkit-border-bottom-right-radius: 6px;
		float: left;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		line-height: 2em;
	}

	.left_arrow{
		-webkit-border-image: url("../images/header/navleftblack.png") 0 5 0 13;
		border-width: 0 5px 0 13px;
		padding-right: .25em;
		left: 1em;
	}

	.right_arrow{
		-webkit-border-image: url("../images/header/navrightblack.png") 0 13 0 5;
		border-width: 0 13px 0 5px;
		padding-left:.25em;
	}

	#show_nav a{color: white;}

	ul.section_nav ul ul li{
		width: auto;
	}

	article{
		margin: 0 2%;
	}

	article header h1{
		margin-bottom: 0;
	}

	aside.our_physicians{
		display: block;
		float:none;
		width:auto;
		margin:0;
	}

	aside.our_physicians p{
		width: auto;
		}

	#sidebar section {				/* added this one*/
		 margin: 0 1%;
	 }

	 ul.section_nav ul ul{
		width: auto;
	 }
	 section.related_links{
	 	margin-left: 1%;
	 	margin-right: 1%;
	 }

	#global_footer{
		padding-left: 2%;
		padding-right: 2%;
	}

	#related_sites, #sitemap {
	  width: 80%;
	}

	#sitemap input{
		display: none;
	}

	.overlay{
		height: 100%;
		}

  #related_sites a, #related_sites a:visited {
    color: rgb(141, 138, 129);
  }
  #related_sites li {
    display: block;
    width: 95%;
    padding: 4px 3px 4px 7px;
    font-size: 12px;
  }
	/* ---delete after only use for testing------*/

	body { font:0.8125em/1.231 sans-serif; *font-size:small; }
	 /*	hack retained to preserve specificity  */
	 /*0.8125em   13px/16px original 90%*/

	pre {padding: 3.125%;}						/* 15px/480 */

/* Layout style for overall WCMC structure/grid */
	#global_header,
	nav.main ul,
	#global_footer #footer_container			/* whole website */
	 {width:100%;
	  /* padding:0 1% 0 2%; */
	  padding: 0;}


/*  Header */
	#global_header {
	  height:90%;								/* 80px-original /80px*/
	}
	#global_header h1 {							/* main logo */
	margin-top: .75em;
	  padding:1% 0 0 3%;
	  }									/*5 0 0 4px-original : 5/68px 0 0 4/284px  */

    #global_header h1 a {
	 padding:0px;							/*	59.166666666667% :	284px-original/480*/
	 background-position:0px 0px;}

						/*85% 	68px-original / 80px 	header h1{padding: 0 0 0 0%;}*/

	a #weill_cornell_head_logo .ir {background-size:85%};

											/*header .ir {background-size:85%; }*/
											/*wcmc logo top and cardio logo*/
	 a .ir{ max-width:100%; }
 	header img {max-width:100%; height: auto;}
	#global_header section.global_search {
	  margin: -5% 0 2% 0;					/* 0.1625% 0 0: 13px 0 0/80*/
	  padding:1% 1%;			/*0.075% 0.0125% : .618556701031%	6px-original/480*/
	 }


 /* <!-- original img sizes   class="headerImg" 665 container width 642 height   original image size 663/315-->
  <img width="99.699248120301%" height="49.068420560748%" src=" <!--#echo var='domain_root' -->static_local/images/content/isom2.jpg">
 */






/*  Top Nav */

nav.main li {
  float: left;
  font-size: 0.75em;										/*12px / 16px*/
  letter-spacing: 0.09375em;								/*1.5px / 16px*/
}

/* not doing anything? - not tested on nav*/
nav.main li a:visited {
  float: left;
  height: 0.8em;		/* 24px/ 30px - measured with pixel ruler - when adding % doesn't work */
  padding: 6px 12px 0;	/* 6px 12px 0 */
  border-left: 1px solid rgb(82, 78, 71);
  border-right: 1px solid rgb(82, 78, 71);
  font-size:0.75em;						/*12px / 16px*/
}


/*background-image:url(/static_local/images/content/isom2-sm.jpg);								 viv created class*/
.headerImg {
  max-width:100%;  			/*68.350515463918%		663 / 970*/
 height:auto;				/*49.21875	15.75%		315px / 640*/
 }

/* ie6 fix */
 .headerImg {
 width:100%;  				/*68.350515463918%		663 / 970*/
 height:auto;				/*49.21875	15.75%		315px / 640*/
 background:none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/static_local/images/content/isom2-sm.jpg", sizingMethod="scale");
 }

/* ---------- base styles: content ---------- */

 .right {margin: 0 0 0 0;}

 .left {margin: 0 0 0 0;}

/* ---------- homepage styles ---------- */

 #main_home header {
 width:100%;					/**/
 padding: 21px 0 28px 0;
 }

 #main_image {
 background: url("http://cornellheartsurgery.org/static.02/images/content/main_image_hp.jpg") rgb(75,75,75);
 width:  970px;					/* original 970px*/
 height: 270px;					/*270px/100% - no real height generic?*/
 }

 #titlebar {
 background: url("http://cornellheartsurgery.org/static.02/images/presentation/titlebar_bg.jpg") rgb(75,75,75);
 width: 100%;					/* original 970px*/
 height: 14%;					/*137px/100% - no real height generic?*/
 }

 #titlebar h1 {
 background-image: url("http://cornellheartsurgery.org/static.02/images/presentation/wcmc_cardiothoracic_logo_hp.gif");
 background-position: 6px 6px;
 height: 6.185567010309%;		/*60px/100%*/
 width: 588px;
 margin: 16px 14px 14px 0;
 float: right; 					/**/
 }

 /* ---------- main content ---------- */

 #main {padding:0 20px 30px; }
 /* 0 4.166666666667% 3.333333333333%  :  0 20px/480 															30px/900px-generic website height-*/

 #sidebar {
 width: 100%;					/*7.017543859649em 285px - original /480*/
 margin: 2.75em 0 0 0;				/*0 20px 0 0 /285*/
 }

 /*   #sidebar .ir{padding-left:6px;}*/

 #sidebar header {
 margin: 0 0 0;					/*0 0 20px/500(screen measured)*/
 }
 #sidebar header a {			/*cardio-logo*/
 width: 59.375%;				/*285/480w*/
 height: 42.8%;					/* 214/500h*/
 }

 #sidebar section h1 {			/*contact us title*/
 padding: 0 0 0px 0px;
 }



 #sidebar header h1 a {
	 /* width: 100%; */ /*makes the logo centered*/					/*	 29.381443298969%    285px/970  */
	/*  margin: 19px 0 0 0; */
	margin: 0 auto;
 }

 /*  #sidebar h2 {					title above photo
 padding:0 0 0 6px;
 }*/


 #content {
 float: left;
 padding: 0 0 0 0px;
 width: 100%;					/*665/480*/
 }


 #content .navigation {width: 90%; margin: 0;}
								 /* 636/480*/

 .contact{clear:left;}

 /* --- footer -- */

 #global_footer .social_and_site_links{
	 	float: left;
 	}

 #global_footer .social_and_site_links .select_box, #global_footer .social_and_site_links .select_box:visited{
	 	width: 100%;
 	}
 /*
 NEED TO FIX ICON SIZE --- RELATED TO .ir?  #global_footer .social_and_site_links .social_sprite { background-color:red;
      display: block;
      background-image: url(../images/footer/social_icons.png);
      width: 80px;
      height: 16px;
      margin: 2px 0 0;
    }

    #icon_facebook { background-position: 0 0; }
    #icon_linkedin { background-position: -16px 0; }
    #icon_youtube { background-position: -32px 0; }
    #icon_twitter { background-position: -48px 0; }
    #icon_rss { background-position: -64px 0; }
 ---*/

  /* uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}