/*
National Library of Medicine Mobile CSS pages
Last Revision - 2/15/11
TOC 
- Desktop View
- Mobile View, max width 902px;
- Extened View, min width 1301px;
*/
/***************************************************** 
                    Desktop View 
*****************************************************/

#body .mobile-item{
	float:left;
	/*width:475px;*/
	width:45%;
	margin:5px 15px 10px 5px;
	overflow:hidden;
	padding:10px;
	border-left:1px solid #DBDBD4;
	opacity:.8;
	/*Transition*/
	-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	transition: opacity .3s ease-in-out;
}

#body .mobile-item:hover{opacity:1;}

#body .mobile-item .mobile-left{
	float:left;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right:10px;
	width:190px;}
#body .mobile-item .mobile-left img{
	width:170px;
	height:170px;
	border: 5px solid rgb(0,0,0); /*rgba ie fix*/
	border: 5px solid rgba(0,0,0,0.75);
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin:0 5px;
}
#body .mobile-item .mobile-left ul{
	text-align:left;
	color:#2b2b28;
	list-style:none;
	border-left:3px solid #dbdbd4;
	font-size:10px;
	margin:5px;
	padding:0;
}
#body .mobile-item .mobile-left ul li{
	padding:1px 0 1px 8px;
	margin:0;


}
#body .mobile-item .mobile-info{
	background: rgb(255,255,255); /*rgba ie fix*/
	background: rgba(255,255,255,0.75);
	border: 1px solid rgb(255,255,255); /*rgba ie fix*/
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-khtml-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin-left: 5px;
	overflow: hidden;
}



#body .mobile-item .mobile-info h2{
	border-bottom:1px solid #DBDBD4;
	margin:10px;
	padding-bottom:10px;
	text-align:center;
}
#body .mobile-item .mobile-info p{margin:10px; padding:0;}
#body .mobile-item .mobile-left div.more{margin:15px auto; text-align:center; }

#body .mobile-item .mobile-left div.more a {
			background: #577A8F;
			display:inline-block;
			font-weight:bold;				
			padding: 8px 12px;
			color: #fff;
			font-size:.85em;
			text-decoration:none;
			text-shadow: 1px 1px 1px #546d7c;
			/*Border Radius*/
			-moz-border-radius: 15px;			
			-khtml-border-radius: 15px;	
			-webkit-border-radius: 15px;	
			border-radius: 15px;
			/*Box Shadow*/
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;	
			-webkit-box-shadow: -1px -1px 2px #3f5867; /*-webkit- inset fix*/
			box-shadow: inset 0px 0px 2px #3f5867;
			/*Transition*/
			-webkit-transition: background .6s ease;
			-moz-transition: background .6s ease;
			-o-transition: background .6s ease;
			transition: background .6s ease;
		}

#body .mobile-item .mobile-left div.more a:hover {
			background: #b8ccd7;
			color:#333;
			text-shadow: none;
			/*Box Shadow*/
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;	
			-webkit-box-shadow: -1px -1px 2px #3f5867; /*-webkit- inset fix*/
			box-shadow: inset 0px 0px 2px #3f5867;

		}
.clear-left{clear:left;}
/*Clear Float between width 903px and 1300px*/
@media screen and (min-width: 903px) and (max-width: 1300px){#body .mobile-item:nth-child(2n+2){clear:left;}}

/***************************************************** 
                    Mobile View 
*****************************************************/
/*@media screen and (min-width: 321px) and (max-width: 902px), screen and (max-width: 902px), only screen and (-webkit-min-device-pixel-ratio: 2)*/

@media only screen and (max-width: 902px){

body{}
#wrapper-fluid, #container-fluid{margin:0; max-width:902px; min-width:480px;}
#main-body {margin:0; max-width:898px; min-width:476px;}
#header-sub, .slug{width:90%;}
.slug{display:none;}
#header-left{ width:100% float:left;  overflow:hidden;}
.search-under{float:left; width:350px; overflow:hidden;}
.logo{max-width: 100%; margin:0 auto;}
.contact-us{display:none;}
#searchForm{margin:14px 0 1em 0;}
.search-input{float:none; width:300px;}
.social-home{display:none;}
#nav{display:none;}
.skipnavigation, .skipnavigation a, a.skipnavigation:link, a.skipnavigation:visited, a.skipnavigation:hover, a.skipnavigation:active, #_atssh{display:none;}
#body{padding:10px 5px;}
}

@media (max-width: 481px) { 
 #NLMStar { display: none; }

}
/*Mobile items*/
#body .mobile-item{width:95%; float:none;background: rgb(255,255,255); /*rgba ie fix*/
	background: rgba(255,255,255,0.75);
	border: 1px solid rgb(255,255,255); /*rgba ie fix*/
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-khtml-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin: 0 0 10px 0;
	overflow: hidden;}
#body .mobile-item .mobile-left{
	float:left;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right:10px;
	width:120px;}
#body .mobile-item .mobile-left img{
	width:100px;
	height:100px;
	border: 5px solid rgb(0,0,0); /*rgba ie fix*/
	border: 5px solid rgba(0,0,0,0.75);
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin:0 5px;
}
#body .mobile-item .mobile-info{
	background: rgb(255,255,255); /*rgba ie fix*/
	background: rgba(255,255,255,0.75);
	border: none; /*rgba ie fix*/
	-moz-border-radius: none;
	-khtml-border-radius: none;
	-webkit-border-radius: none;
	border-radius: none;
	-moz-box-shadow: none;
	-khtml-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-left: 5px;
	overflow: hidden;
}
#body .mobile-item .mobile-info h2{
	border-bottom:1px solid #DBDBD4;
	margin:5px;
	padding-bottom:5px;
	text-align:center;
}
#body .mobile-item .mobile-left div.more{margin:15px 10px 15px 0; text-align:center; }
		
}
}

/***************************************************** 
                    Extended View 
*****************************************************/
@media screen and (min-width: 1301px) {
	/*Mobile items*/
#body .mobile-item{
	background: rgb(255,255,255); /*rgba ie fix*/
	background: rgba(255,255,255,0.75);
	border: 1px solid rgb(255,255,255); /*rgba ie fix*/
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-khtml-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin: 0 5px 10px 5px;
	overflow: hidden;
	float:left;
	width:30%;
	}
#body .mobile-item .mobile-left{
	float:left;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right:10px;
	width:210px;}
#body .mobile-item .mobile-left img{
	width:190px;
	height:190px;
	border: 5px solid rgb(0,0,0); /*rgba ie fix*/
	border: 5px solid rgba(0,0,0,0.75);
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #c6c6bf;
	-webkit-box-shadow: 0px 0px 5px #c6c6bf;
	box-shadow: 0px 0px 5px #c6c6bf;
	margin:0 5px;
}
#body .mobile-item .mobile-info{
	background: rgb(255,255,255); /*rgba ie fix*/
	background: rgba(255,255,255,0.75);
	border: none; /*rgba ie fix*/
	-moz-border-radius: none;
	-khtml-border-radius: none;
	-webkit-border-radius: none;
	border-radius: none;
	-moz-box-shadow: none;
	-khtml-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-left: 5px;
	overflow: hidden;
}
#body .mobile-item .mobile-info h2{
	border-bottom:1px solid #DBDBD4;
	margin:5px;
	padding-bottom:5px;
	text-align:center;
}
	#body .mobile-item:nth-child(3n+2){clear:left;}

}