/**********************************************************
RESOURCES STYLES
**********************************************************/
.resPanel {
border:0px solid;
position:relative;
float:left;
clear:left;
width:100%;
}
.resPanel h4 {
border-bottom:1px solid;
width:50%;
}
.resAdPanel {
border:0px solid;
width:50%;
float:right;
}
.resDesc {
border:2px solid;
position:absolute;
margin-left:50%;
margin-top:-6em;
padding:.5em;
display:none;
background-color:#fff;
z-index:5;
}
.resDesc img,
.resAdPanel img {width:100%;}

.resCatImg { max-width:50%; }
.resName { font-weight:bold;
border:0px solid;
width:50%;
overflow:hidden;
 }
.resName:hover {
cursor:pointer;
}
.resListingLoc { font-weight:normal; font-style:italic; }

.feat {
	border:0px solid; 
	height:100%;
}
.feat img { 
	max-height:100%; 
	max-width:40%; 
	float:left; 
	clear:left;
	margin-right:.5em; 
}

.resNo {
	float:right;
	font-size:80%;
	border:0px solid;
	margin-left:2em;
margin-top:0;
}
.resDescClose {
display:none;
position:absolute;
top:-1.5rem;
right:0 }
.feat h3,
.feat p { margin:0; }

.resBook {
clear:left;
border-top:1px solid #ddd;
padding:.3em 0;
}
.resBook iframe {
margin-right:.5rem;
}

.amazonLink {
float:left;
clear:left;
margin-right:.5em;
}

/**********************************************************
STYLE GUIDE PAGES
**********************************************************/
.styleExamples p {
width:32%;
float:left;
height:230px;
text-align:center;
margin:.5%;
}
.styleExamples p img {
max-width:98%;
max-height:210px;
display:block;
margin:auto;
}
.styleEl {
border-bottom:1px solid #ddd;
margin-bottom:1em;
}
.styleRange {
float:right;
font-weight:bold;
font-style:italic;
}
/**********************************************************
MEDIA OVERRIDES
**********************************************************/



@media only screen and (max-width: 600px) {
.resAdPanel {float:none; width:100%; }
.resPanel .rtPtr { display:none }
.resDesc {
width:100%;
margin:2.2rem 0 0 ;
}
.resName {width: auto; }
.resDescClose {
display:block;
}
.styleExamples p {
width:100%;
}
}
@media only screen and (max-width: 400px) {
.resShortDesc {display:none; } 
}