@charset "UTF-8";



/*----------------------------------------------*/
/*----------------------------------------------*/
/*FM COCOLO  [DJ INDEX]*/
/*----------------------------------------------*/
/*Created: 2015.10.01*/
/*Last Update:	2015.10.01*/
/*----------------------------------------------*/




/*INDEX*/

/*[DJ INDEX]*/
/*[Main Frame Customize]*/
/*[Page Title with Icon Customize]*/

/*[DJ Index Page]*/
/*-- [DJ List] --*/

/*[DJ Profile Page]*/
/*-- [DJ Face and Name] --*/
/* --[DJ Profile Text] --*/











/*----------------------------------------------*/
/*[DJ INDEX]*/
/*----------------------------------------------*/

/*[Main Frame Customize]*/
/*[DJ Index Page]*/
.main-container.one-column .main-frame > .p-dj-index.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}

/*[DJ Profile Page]*/
.main-container.one-column .main-frame > .p-dj-profile.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}


@media screen and (min-width:481px) and (max-width:640px) {
/*[DJ Index Page]*/
.main-container.one-column .main-frame > .p-dj-index.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}


}


@media screen and (min-width:641px) and (max-width:959px) {
/*[DJ Index Page]*/
.main-container.one-column .main-frame > .p-dj-index.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}

/*[DJ Profile Page]*/
.main-container.one-column .main-frame > .p-dj-profile.inner-frame {
width:81.67539%;
margin:0 auto;
padding:0;
}


}


@media screen and (min-width:961px) and (max-width:1199px) {
/*[DJ Index Page]*/
.main-container.one-column .main-frame > .p-dj-index.inner-frame {
width:91.09946%;
margin:0 auto;
padding:0;
}

/*[DJ Profile Page]*/
.main-container.one-column .main-frame > .p-dj-profile.inner-frame {
width:81.67539%;
margin:0 auto;
padding:0;
}


}


@media screen and (min-width:1200px) {
/*[DJ Index Page]*/
.main-container.one-column .main-frame > .p-dj-index.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}

/*[DJ Profile Page]*/
.main-container.one-column .main-frame > .p-dj-profile.inner-frame {
width:780px;
margin:0 auto;
padding:0;
}


}
/*----------------------------------------------*/





/*[Page Title with Icon Customize]*/
/*[Pages Title]*/
#pages-header.pages-header .ph-ttl {
padding:12px 0 0 42px;
background:url(../images/icn_page_dj.png) no-repeat left top;
background-size:auto 56px;
-webkit-background-size:auto 56px;
-moz-background-size:auto 56px;
-ms-background-size:auto 56px;
-o-background-size:auto 56px;
}


@media screen and (max-width:899px) {
#pages-header.pages-header .ph-ttl  small {
margin-left:-42px;
}


}


@media screen and (max-width:640px) {
#pages-header.pages-header .ph-ttl {
padding:8px 0 0 32px;
background:url(../images/icn_page_dj.png) no-repeat left top;
background-size:auto 42px;
-webkit-background-size:auto 42px;
-moz-background-size:auto 42px;
-ms-background-size:auto 42px;
-o-background-size:auto 42px;
}

#pages-header.pages-header .ph-ttl  small {
margin-left:-32px;
}


}


@media screen and (max-width:480px) {
#pages-header.pages-header .ph-ttl {
padding:8px 0 0 26px;
background:url(../images/icn_page_dj.png) no-repeat left top;
background-size:auto 34px;
-webkit-background-size:auto 34px;
-moz-background-size:auto 34px;
-ms-background-size:auto 34px;
-o-background-size:auto 34px;
}

#pages-header.pages-header .ph-ttl  small {
margin-left:-26px;
}


}
/*----------------------------------------------*/





/*
[DJ Index Page]
*/

/*-- [DJ List] --*/
.dj-list {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.dj-list li {
width:auto;
float:left;
margin:0;
padding:0;
}

/*(DJ Box)*/
.dj-list a .dj-box {
display:block;
}
.dj-list .dj-box {
width:auto;
height:auto;
margin:5px;
padding:0;
text-align:center;
border:1px solid #E6E6E6;
}
/*(DJ Face Image)*/
.dj-list .dj-box .dj-face {
width:auto;
height:auto;
margin:0;
padding:12px;
background:#e0f0f4;
}
/*(DJ Name)*/
.dj-list .dj-box .dj-name {
font-size:.85em;
padding:.8em 12px;
color:#0080a7;
}
/*(DJ Band Name)*/
.dj-list .dj-box .dj-name .small {
display:block;
letter-spacing:0;
color:#666;
}
/*(Program)*/
.dj-list .dj-box .dj-prg {
	width:auto;
	height:auto;
	margin:0;
	padding:0 12px 12px;
}

.dj-list .dj-box .dj-prg-ttl {
	width:auto;
	height:auto;
	margin:0 0 .5em;
	padding:.1em .3em;
	text-align:left;
	font-size:.7em;
	font-weight:normal;
	color:#FFF;
	background:#0080a7;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
	border-radius:5px;
}
.dj-list .dj-box .dj-prg-name {
	clear:both;
width:auto;
height:auto;
margin:0;
padding:0;
text-align:left;
font-size:.8em;
color:#666;
}

/*(Hover)*/
.dj-list a:hover {
	text-decoration:none;
}
.dj-list a:hover .dj-face {
	background:#f3f5db;
}
.dj-list a:hover .dj-name {
color:#603813;
}


@media screen and (max-width:479px) {
.dj-list li {
width:auto;
float:none;
}
.dj-list li:first-child {
border-top:1px solid #CCC;
}
.dj-list .dj-box {
display:table;
margin:0;
padding:5px 0;
border:none;
border-bottom:1px solid #CCC;
background:url(../../shared/images/gn_icn_arrow_blue.png) no-repeat right;
}
.dj-list a .dj-box:hover {
	background:url(../../shared/images/gn_icn_arrow_blue.png) no-repeat right;
}
.dj-list .dj-box .dj-face {
width:17%;
height:auto;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
}
.dj-list .dj-box .dj-name {
display:table-cell;
vertical-align:middle;
padding:0 0 0 1em;
text-align:left;
font-size:1em;
}

.dj-list .dj-box .dj-prg {
	display:none;
}

}


@media screen and (min-width:480px) and (max-width:567px) {
.dj-list li {
width:33.33333%; /*145px*/
}

}


@media screen and (min-width:568px) and  (max-width:1199px) {
.dj-list li {
width:25%; /*145px*/
}

}


@media screen and (min-width:1200px) {
.dj-list li {
width:20%; /*145px*/
}

}










/*
[DJ Profile Page]
*/

/*-- [DJ Face and Name] --*/
/*(Frame)*/
.dj-profile-heading {
width:auto;
height:auto;
margin:0 0 3em;
padding:0;
display:table;
}

.dj-profile-heading .djh-face,
.dj-profile-heading .djh-name {
display:table-cell;
vertical-align:middle;
text-align:left;
}

/*(Face)*/
.dj-profile-heading .djh-face {
max-width:160px;
margin:0;
padding:0;
}
/*(Name)*/
.dj-profile-heading .djh-name {
font-size:1.4em;
font-weight:bold;
margin:0;
padding:0 2em;
color:#0080a7;
}
.dj-profile-heading .djh-name small {
font-size:.7em;
font-weight:normal;
color:#666;
font-family:Arial, Helvetica, sans-serif;
display:block;
}


@media screen and (max-width:640px) {
.dj-profile-heading {
margin:0 0 2em;
}

/*(Face)*/
.dj-profile-heading .djh-face {
max-width:98px;
margin:0;
padding:0;
}
/*(Name)*/
.dj-profile-heading .djh-name {
font-size:1.2em;
padding:0 1em;
}
.dj-profile-heading .djh-name small {
font-size:.8em;
}

}




/* --[DJ Profile Text] --*/
/*(Box)*/
.dj-profile-txt {
width:auto;
height:auto;
margin:0 0 4em;
padding:0;
}

/*(Heading)*/
.dj-profile-txt .djp-heading {
font-size:1em;
color:#0080a7;
margin:0 0 1em;
padding:.5em .7em;
border-bottom:2px solid #d6ebf1;
}

/*(Text)*/
.dj-profile-txt .djp-txt {
font-size:.9em;
line-height:1.6em;
margin:0;
padding:0 .7em;
}


@media screen and (max-width:640px) {
/*(Heading)*/
.dj-profile-txt .djp-heading {
font-size:.95em;
margin:0 0 .8em;
padding:.5em .8em;
}

}