/* Global Styles for CMS-generated pages/layouts */

.interior .main {
width: 600px;
}
.interior .sidebar {
float: right;
width: 300px;
}
.interior section {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.interior section h3 { 
border-top: 4px solid #D3D3D3;
padding-top: 10px;
}
.interior section li { margin-bottom: 0; }
.interior .col { width: 450px; }
.interior .col.two { float: right; }

.interior ul {
list-style-type: disc;
margin: 10px 0 10px 15px;
}
.interior li ul { list-style-type: none; }
.interior li ul li:before { content: "- "; }

.interior dt, .interior dd, .interior li {
font-size: 14px;
line-height: 18px;
}
.interior .sidebar li {
margin-bottom: 13px;
}

/* Sidebars and Asides (can we ditch the .interior?)
----------------------------------------------- */
.interior .sidebar { padding: 20px 20px 0 20px; }
.interior .plain h3 { border-top: 4px solid #E6E6E6; }

.interior .chunky,
.interior .chunkier,
.content_container aside {
background: #E5E5E5;
width: 260px;
}
.interior .chunky h3,
.interior .chunkier h3 {
border-top: 4px solid #D3D3D3;
color: #858585;    
}
.interior .chunky h3 { font-size: 13px; }
.interior .chunkier h3 { font-size: 16px; }
.interior .chunky p, .interior .chunky li { font-size: 12px; }
.interior .chunky ul { margin-left: 0; }

.interior .chunky li {
background: url(../imgs/global/sheet.png) no-repeat -108px -268px;
line-height: 16px;
list-style: none;
padding-left: 10px;
}

/* Aside */
.content_container aside {
background: #e5e5e5;
float: right;
padding: 24px 20px;
width: 260px;
}
.content_container aside h3 {
border-top: 5px solid #d2d2d2; 
color: #888;
font-size: 16px;
padding: 8px 0;   
}
.content_container aside ul {
float: left;
list-style-type: disc;
margin: 4px 0 0 0;
}
.content_container aside div > ul {
border-bottom: 1px solid #c8c8c8;
padding-bottom: 15px;
width: 100%;
}
.content_container aside li {
clear: left;
color: #555;
line-height: 18px;
margin-left: 15px;
width: 145px;
font-size: 12px;
}
.content_container aside div > ul > li {
line-height: 16px;
padding-bottom: 8px;
}
.content_container aside p {
background-color: #e5e5e5;
color: #555;
font: 12px normal helvetica, arial;
text-align: left;
}
/* Aside - Bestee */
aside.bestee {
background: #e5e5e5 url("../imgs/pick/bestee_adobe_logo.png") no-repeat 90% 35%;
}
aside.bestee p { 
padding: 16px 8px 0px 0px;
position: relative;
width: 120px;
line-height: 18px;
}
aside.bestee img { 
float: right;
position: absolute;
right: -131px;
top: 14px;
}

/* Grid Layouts 
----------------------------------------------- */

/* Regular (Threadspotting, Stories) */
.grid .main_content { width: 100%; }
.grid li, /*.grid li img*/ { width: 312px; }
.grid ul {  }
.grid li { width:313px; float:left; background: #E6E6E6; }
.grid figcaption { padding: 16px; float:none;min-height: 39px; }

/* Extended (Bestee) */
.gridx .main_content { 
float: left; 
width: 600px; 
}
.gridx .banner {
border-top: 5px solid #e5e5e5;
border-bottom: 5px solid #e5e5e5;
margin-bottom: 12px;
padding: 18px 0;
}
.gridx .combo hgroup { 
min-height: 0;
width: 385px; 
}
.gridx h1 {
color: #282828;
font-size: 38px;
margin-bottom: 18px;
}
.gridx h2, .gridx h2 a {
clear: left;
font-family: helvetica, arial;
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin:0 10px 0 0;
text-transform: none;
}
.gridx h2 a { color: #09f; }
.gridx .banner img { margin: 0; }

.gridx .banner + h3, 
.gridx .banner + h3 + ul {
margin-bottom: 30px; 
}
.gridx .banner + h3 {
float: left;
font-size: 18px;  
width: auto; 
}
.gridx .banner + h3 + ul { float: right; }

.gridx .banner + h3 + ul li {
float: left;
padding-left: 10px;
}
.gridx .mods img{
    display:block;
}
.gridx .mods li{
float: left;
min-height: 100px;
height: auto;
}
.gridx .mods li figure {
margin-right: 10px;
}
.gridx .mods li figcaption {
max-width: 600px;
}
.gridx .mods li { padding-bottom: 30px; }
.gridx .mods img { border: 1px solid #E6E6E6; }
.gridx dl { background: #E6E6E6; padding: 16px 16px 10px; min-height: 75px; }
.gridx dt { font-size:15px; } 
.gridx dt, .gridx dd { line-height: 18px; max-width: 254px;}
.gridx dd span { color: #555; display: inline-block; }
.gridx dd a:hover span { text-decoration: none; }
.gridx .mods p { margin-top: 12px; }

/*.grid li figure:hover{
-moz-box-shadow: inset 0 0 -3px #f39;
-webkit-box-shadow: inset 0 0 -3px #f39;
box-shadow: inner 0 0 -3px #f39;
}
*/


/* Playlist Layout
------------------------------------------------- */
.playlist .banner {
margin: 50px 0 30px;
width: 100%;   
}
.playlist .combo hgroup {
float: right;
min-height: 0;
width: 799px;
}
.playlist .combo img {
margin-top: -40px;
}
.playlist h2 {
clear: left;
font-family: kulturista-web-1, kulturista-web-2, Georgia, serif;
font-size: 18px;
font-weight: normal;
line-height: 22px;
text-transform: none;
}

/* Banners
---------------------------------------------------- */
.banner {
float: left;
margin-bottom: 50px;
position: relative;
}
.combo hgroup {
float: left;
min-height: 226px;
width: 280px;
}
.full hgroup {
display: block;
height: 0;
line-height: 0;
min-height: 0;
padding: 0;
text-indent: -9999em;
width: 0;
}
.combo img {
float: left;
margin-top: -54px;
}

/* playlist banner */
.playlist .banner {
	float: left;
	margin: 0 0 20px 0;
}
.playlist .banner h1 {
	color: #282828;
	margin: 30px 0 12px 0;
}
.playlist .banner > img,
.playlist .banner .plugin_picture {
	float: left;
	margin: 0 20px 0 0;
}
.playlist .banner p {
	clear: none;
	color: #555555;
	display: inline;
	float: left;
	font-family: "kulturista-web-1","kulturista-web-2",helvetica,arial;
	font-size: 18px;
	max-width: 770px;
	line-height: 22px;
}

/* Picture Plugin 
------------------------------------------------------ */
.interior .plugin_picture img { margin: 10px; }
.interior .align-center img { display: block; margin: 10px auto; }
.interior .align-left img { float: left; margin-left: 0; }
.interior .align-right img { float: right; margin-right: 0; }

/* Document Template 
----------------------------------------- */
.cms_document .topbar_container {
/*margin-bottom: 170px;*/
}
.cms_document .interior h1 {
font-size: 35px;
padding-bottom:35px;
}
.cms_document h2 {
font-family: "futura-pt-1","futura-pt-2", sans-serif;
font-weight: 800;
font-size:24px;
padding-bottom:35px;
}
.cms_document .interior section{
padding: 30px 30px 30px 30px;
background-color: #E5E5E5;
display:block;
float:none;
}

/* Section Headings */
.cms .content_container {padding-top:30px;}
.cms .main_container h1.page_title {
	color:#282828;
	font-size:40px;
	margin:0 20px 0 0;
}
.cms .main_container h2.tagline  {padding:5px 0 0;}
.main_content.stories, .main_content.threadspotting {border-top:solid 5px #e5e5e5;padding:18px 0 0;}

/* Bestee Nav */
li#bestee_nav {
float: none;
clear: both;
border: 0px solid red;
width: auto;
padding: 0;
margin-bottom: 30px;
min-height: 0;	
}
li#bestee_nav ul {
border: 0px solid blue;
width: auto;
float: right;
position: relative;
top: -17px;
}
li#bestee_nav ul li {
border: 0px solid orange;
padding: 5px;
float: none;
width: auto;
display: inline;
list-style-type: none;
}
li#bestee_nav ul li a:hover {
color: #f39;
text-decoration: none;
}
li#bestee_nav ul li a.active {
color: #747474;
}

/* Bestee Of The Month Winners */
ul#bestee_of_the_month_winners {
float: left;
padding-top: 30px;
border-top: 1px solid #c8c8c8;
}
ul#bestee_of_the_month_winners li {
width: 600px;
margin-top: -13px;
min-height: 0px;
}
ul#bestee_of_the_month_winners h3 {
padding-bottom: 20px;
}


/* Shop Landing Style */
.shop-landing {
	background:#ededed;
}
.shop-landing .banner {
	margin:0;
}

.shop-landing .content_container {
	padding:0;
}

.shop-landing .content_container {
	margin:0 auto;
	width:940px;
}

.shop-landing .panel {
	height:342px;
	position: relative;
	width:470px;
  color: #f39;
}

.shop-landing .panel:hover {
  color: #09f; 
}

.shop-landing .panel-cover {
	display: block;
	position: absolute;
	z-index: 5;
	height: 100%;
	width: 100%;
}

.shop-landing .panel h3{
  color: inherit;
}

.shop-landing .panel_content {
	background: #F39;
	left: 0;
	padding: 20px 20px 20px;
	position: absolute;
	top: -120%;
	width: 100%;
	height: 100%;
}


.panel_content ul {
	position: relative;
	z-index: 10;
}

.shop-landing .panel_content li {
	line-height: 20px;
	width: 100%;
}

.shop-landing .panel_content a {
	color: white;
	font-size: 14px;
}

.shop-landing .panel_content a:hover {
	text-decoration: underline;
}

.shop-landing .panel_content a:active {
	color:#ededed;
}