@charset "UTF-8";
/* CSS Document */

/*==============================

Johnbull Private Labo

==============================*/


/*=====================
	common
=====================*/

/* base */

.johnbull {
	width:900px;
	padding: 0 30px;
}

.johnbull a {
	color:#619EB2;
	text-decoration:underline;
	outline: none;
}

.johnbull a img {
	outline: none;
	border: none;
}

.johnbull a:hover {
	color:#619EB2;
	text-decoration:none;
}

.johnbull h1, .johnbull h2, .johnbull h3, .johnbull h4, .johnbull h5, .johnbull h6 {
	margin: 0; padding: 0; font-size: 100%; font-weight: normal;
}

/* title */
.johnbull #title {
	width: 900px;
	border-bottom: 1px solid #000;
	margin-bottom: 15px;
}

.johnbull #title h1 {
	margin-bottom: 15px;
	border-bottom: 1px solid #000;
}

.johnbull #title h2 {
	margin-bottom: 18px;
}

/* read */
.johnbull #title .read {
	width: 520px;
	float: left;
	display: inline;
	margin-bottom: 15px;
}

.johnbull #title .read p {
	color: #666;
}

/* Stylist Navigation */
.johnbull #title .navigation {
	width: 360px;
	float: right;
	display: inline;
}

.johnbull #title .navigation #snav {
	margin: 0; padding: 0;
}

.johnbull #title .navigation #snav li {
	list-style: none;
	float: left;
	display: inline;
	margin: 0; padding: 0;
}

.johnbull #title .navigation #snav li.active {
	width:191px; height: 160px;
}

.johnbull #title .navigation #snav li.right-top,
.johnbull #title .navigation #snav li.right-btm {
	width:163px; height: 80px;
}


/* Stylist credit */
.johnbull #title p.credit {
	clear: both;
	font-size: x-small;
}


/* collaboration */

.johnbull #collaboration {
	margin-bottom: 10px;
}

.johnbull #collaboration .collabo-box {
	margin-bottom: 5px;
	width: 900px;
	height: 582px;
}

.johnbull #collaboration .collabo-box .collabo-photo {
	float: left;
	display: inline;
	width: 451px;
}

.johnbull #collaboration .collabo-box .collabo-txt {
	float: left;
	display: inline;
	width: 449px;
	height: 100%;
	position: relative;
}

.johnbull #collaboration .collabo-box .collabo-txt #txt1 {
	width: 399px;
	margin-left: 30px;
	margin-right: 20px;
	padding-bottom: 20px;
	position: absolute;
	bottom: 0; right: 0;
}

.johnbull #collaboration .collabo-box .collabo-txt #txt2 {
	width: 399px;
	margin-right: 30px;
	margin-left: 20px;
	padding-bottom: 20px;
	position: absolute;
	bottom: 0; left: 0;
}


.johnbull #collaboration .collabo-box .collabo-txt h3 {
	margin-bottom: 15px;
}

.johnbull #collaboration .collabo-box .collabo-txt h4 {
	font-weight: bold;
	font-size:16px;
	padding-bottom: 2px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #333;
}

.johnbull #collaboration .collabo-txt p {
	font-size: 12px;
	line-height: 1.7em;
	margin-bottom: 15px;
}

.johnbull #collaboration .collabo-txt ul.itemlist {
	overflow: hidden;
	font-size: 12px;
	padding: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}

.johnbull #collaboration .collabo-txt ul.itemlist li {
	list-style: none;
	padding-left: 12px;
	margin-bottom: 0.25em;
}

/* linkbutton */

.johnbull #linkbutton {
	width: 100%;
	padding: 30px 0;
	text-align: center;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.johnbull #linkbutton a {
	margin: 0 auto;
}


/*=====================
	vol.1
=====================*/

#vol1 #collaboration #collabo1 {
	background: url(../images/vol1/bg_collabo1.jpg) no-repeat;
}

#vol1 #collaboration #collabo2 {
	background: url(../images/vol1/bg_collabo2.jpg) no-repeat;
}

#vol1 #collaboration .collabo-box .collabo-txt h4 {
	color: #1fa1a0;
}

#vol1 #collaboration .collabo-txt ul.itemlist li {
	background: url(../images/vol1/mrk_itemlist.gif) left 2px no-repeat;
}

#vol1 #collaboration .collabo-txt ul.itemlist {
	background: url(../images/vol1/bg_item.png);
}

#vol1 #collaboration .collabo-txt ul.itemlist li.shop {
	background: none;
}


/*=====================
	vol.2
=====================*/

#vol2 #collaboration #collabo1 {
	background: url(../images/vol2/bg_collabo1.jpg) no-repeat;
}

#vol2 #collaboration #collabo2 {
	background: url(../images/vol2/bg_collabo2.jpg) no-repeat;
}

#vol2 #collaboration .collabo-box .collabo-txt h4 {
	color: #a83170;
}

#vol2 #collaboration .collabo-txt ul.itemlist li {
	background: url(../images/vol2/mrk_itemlist.gif) left 2px no-repeat;
}

#vol2  #collaboration .collabo-txt ul.itemlist {
	background: url(../images/vol2/bg_item.png);
}

#vol2 #collaboration .collabo-txt ul.itemlist li.shop {
	background: none;
}

/*=====================
	vol.3
=====================*/

#vol3 #collaboration #collabo1 {
	background: url(../images/vol3/bg_collabo1.jpg) no-repeat;
}

#vol3 #collaboration #collabo2 {
	background: url(../images/vol3/bg_collabo2.jpg) no-repeat;
}

#vol3 #collaboration .collabo-box .collabo-txt h4 {
	color: #1d6aa3;
}

#vol3 #collaboration .collabo-txt ul.itemlist li {
	background: url(../images/vol3/mrk_itemlist.gif) left 2px no-repeat;
}

#vol3  #collaboration .collabo-txt ul.itemlist {
	background: url(../images/vol3/bg_item.png);
}

#vol3 #collaboration .collabo-txt ul.itemlist li.shop {
	background: none;
}




/*=====================
	Clearfix
=====================*/


/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}