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

	[ Solution /familypaint ] 
	
	Update 2010/05/11
	@ Sony Marketing(Japan) Inc
	
	--- "/vaio/solution/familypaint/index.html"
	
	 1. Basic setting
	 2. Page setting
	 3. Common module setting
	
===========================================================*/
p {
/*	font-size:16px;*/
}
/* ---------------------------------------
	1. Basic setting
--------------------------------------- */
/* headline setting */
#main h2 {
	margin-bottom:10px;
}

.without {
	font-size:18px;
}
#main h3 {
	border-bottom:1px solid #ccc;
	/*margin:0 0px 27px;*/
	padding:5px 5px 4px;
/*margin-bottom:15px;
	background:#E5E5E5;
	padding:5px 9px 4px;
	font-size:108%;*/	
}

#main h4 {
	background:url(/vaio/share/images/dotline_side.gif) repeat-x left bottom;
	margin-bottom:15px;
	padding-bottom:3px;
	font-size:16px;
}
#main h5 {
	border-left:5px solid #ADCDD8;
	margin-bottom:10px;
	padding-left:10px;
}
#main h6 {
	margin-bottom:5px;
}

/* Layout */
#main-visual {
	margin-bottom:30px;
}

.section {
	margin-bottom:30px;
	padding:0 15px;
}

/* boxes setting */
.boxes {
	
}
.boxL, .boxR {
	display:table-cell;
	vertical-align:top;
}
.boxR {
	padding-left:20px;
}

	/* for IE6, 7 */
	* html .boxL,
	* html .boxR {
		display:inline;
		zoom:1;
	}

	*:first-child+html .boxL,
	*:first-child+html .boxR {
		display:inline;
		zoom:1;
	}



/* ---------------------------------------
	2. Page setting
--------------------------------------- */
.boxR img {
	vertical-align:bottom;
}


/* overview */
#main #overview {
	margin-bottom:30px;
}
#main #overview h2 {
	margin-bottom:30px;
}


/* grid setting */
.grid1 .boxL {width:660px;}
.grid1 .boxR {width:240px;}

.grid2 .boxL {width:650px;}
.grid2 .boxR {width:250px;}

.grid3 {
	padding:0 185px;
}
.grid3 .boxL {width:240px;}
.grid3 .boxR {
	padding-left:70px;
	width:240px;
}


/* column setting */
.column {
	margin: 0 20px 30px;
	padding-bottom: 20px;
	background: url(../images/familypaint_column_bottom.gif) no-repeat left bottom;
}
.columnInner {
	padding-top: 20px;
	background: url(../images/familypaint_column_top.gif) no-repeat left top;
}
.columnContent {
	padding: 0 25px 10px;
	background: url(../images/familypaint_column_side.gif) repeat-y left top;
}
#main .column h3 {
	padding: 5px 0 0 0;
	background: none;
}

.columnGrid1 .boxL {width: 600px;}
.columnGrid1 .boxR {width: 240px;}



/* ---------------------------------------
	3. Common module setting
--------------------------------------- */
/* corresponding
--------------------------------------- */
.corresponding {
	padding: 0 15px 40px;
}
.corresponding h6 {
	margin-bottom:0;
	padding: 0 0 20px 15px;
}
.corresponding ul.models {
	padding:0 1px 0 15px;
}
.corresponding ul.models li {
	float: left;
	padding:0 14px 25px 0;
}
.corresponding ul.models li img {
	vertical-align: bottom;
}


/* products info */
.products_info {
	margin-bottom:50px;
	background:#F7F7F7;
	padding:10px 20px;
}
.products_info ul li {
	margin-left:0.8em;
	text-indent:-0.8em;
}


/* note */
p.note, ul.note li {
	margin-left:1em;
	text-indent:-1em;
}


/* image center */
.imageCenter {
	margin-top:30px;
	text-align:center;
}


/* text align */
.align_center { text-align: center; }
.align_right { text-align: right; }


/* margin */
.mt0 { margin-top: 0 ! important; }
.mt5 { margin-top: 5px ! important; }
.mt10 { margin-top: 10px ! important; }
.mt15 { margin-top: 15px ! important; }
.mt20 { margin-top: 20px ! important; }
.mt30 { margin-top: 30px ! important; }
.mt40 { margin-top: 40px ! important; }
.mt50 { margin-top: 50px ! important; }

.mr0 { margin-right: 0 ! important; }
.mr5 { margin-right: 5px ! important; }
.mr10 { margin-right: 10px ! important; }
.mr15 { margin-right: 15px ! important; }
.mr20 { margin-right: 20px ! important; }
.mr30 { margin-right: 30px ! important; }
.mr40 { margin-right: 40px ! important; }
.mr50 { margin-right: 50px ! important; }

.mb0 { margin-bottom: 0 ! important; }
.mb5 { margin-bottom: 5px ! important; }
.mb10 { margin-bottom: 10px ! important; }
.mb15 { margin-bottom: 15px ! important; }
.mb20 { margin-bottom: 20px ! important; }
.mb30 { margin-bottom: 30px ! important; }
.mb40 { margin-bottom: 40px ! important; }
.mb50 { margin-bottom: 50px ! important; }

.ml0 { margin-left: 0 ! important; }
.ml5 { margin-left: 5px ! important; }
.ml10 { margin-left: 10px ! important; }
.ml15 { margin-left: 15px ! important; }
.ml20 { margin-left: 20px ! important; }
.ml30 { margin-left: 30px ! important; }
.ml40 { margin-left: 40px ! important; }
.ml50 { margin-left: 50px ! important; }


/* clearfix */
.models:after,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.models,
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .models,
* html .clearfix { height: 1%; }
.models,
.clearfix { display: block; }
/* End hide from IE-mac */

#animationGif_flashMovie {width:950px; margin:25px auto; overflow:hidden}
.AFlft {width:463px; float:left; margin-left:35px;}
.AFrgt {width:320px; float:left; margin-left:15px;}

.wd900 {}

/* added 06/sep */

h3.btmLine {
	border-bottom:1px solid #e7e7e7;
	margin:0 0 15px !important;
	padding-bottom:15px !important;
}

/* added sep18_2013 */
p.skyblue {
	border-left:5px #85ccff solid;
	padding-left:8px;
	overflow:hidden;
}
p.skyblue strong{
	display:block;
	font-size:16px;
}
p.balloon {
	padding:6px 0 0 103px;
	min-height:93px;
	overflow:hidden;
}
p.balloon span {
	font-size:0.80em;
}
p.balloon strong {
	display:block;
	border-bottom:dotted 1px #ccc;
	padding-bottom:5px;
	margin-bottom:7px;
	font-size:16px;
}
p.balloon#yellow {
	background:url(../images/familypaint_b01.jpg) no-repeat left top;
}
p.balloon#pink {
	background:url(../images/familypaint_b02.jpg) no-repeat left top;
}
p.balloon#red {
	background:url(../images/familypaint_b03.jpg) no-repeat left top;
}
/* added 26/sep */
.lower {
	padding:0 0 0 30px !important
}

ul.p_links {
	overflow:hidden;
	background:url(../images/p_link99.jpg) no-repeat bottom center;
	padding-bottom:10px;
	padding-left:16px;
	margin-bottom:10px;
}
ul.p_links li {
	list-style-type:none;
	float:left;
	padding-left:12px;
}
ul.p_links li.first {
	padding-left:0;
}
ul.p_links li img {
	display:block;
}
#overview h2 p {
	display:none;
}
@media(max-width:640px){
	#container {
		width:100%;
	}
	#pagebody,#main-visual {
		width:100% !important;
		overflow:hidden;
	}
	#main-visual p img{
		width:100%;
		height:auto;	
	}
	#overview h2 p {
		display:block;
		font-size:1.25em;
		padding:0 1em;
	}
	#overview h2 img {
		display:none;
	}
	.imageCenter img {
		width:100%;
		height:auto;
	}
	div.section {
	
	}
	.lower {
		padding:0 1em !important;
	}
	.column,.column * {
		background:none;
	}
	.column {
		margin:1em;
	}
	.balloon span {
		
	}
	.balloons {
		padding:0;
	}
	.balloons li {
		width:49.5%;
		float:left;
		padding:0 !important;
	}
	.balloons li img {
		width:95%;
		height:auto;
		margin:0 auto;
	}
	.p_links {
		background:none !important;
	}
	.boxL,.boxR {
		width:100% !important;
		clear:both;
		display:block;
		padding:0;
	}
	.boxR img {
		width:100%;
		height:auto;
	}
	.columnContent {
		padding:0;
	}
	#animationGif_flashMovie {
		width:100%;
	}
	#animationGif_flashMovie .sp img{
		width:100%;
		height:auto;
	}
	.AFlft,.AFrgt { display:none;}
}