@charset "utf-8";

/*========================================================================

	File name : /events/motor_sports/wec/css/archive2014.css
	Site name : TOYOTA MOTOR SPORTS
	Copyright : TOYOTA MOTOR CORPORATION, All Rights Reserved.

========================================================================*/

#archive2014{
	font-size:120%;
	}


h2{
	font-size:38px;
	text-align:center;
	color:#333333;
	font-weight:bold;
	}

/* title */
.title{
	height:auto!important;
	}
	
	.title h1{
		background-color: rgba(0, 0, 0, 0.7);
		color: #ffffff;
		display: inline-block;
		font-size: 38px;
		left: 0;
		line-height: 1em;
		padding: 4% 0;
		text-align: center;
		top: 0;
		width: 100%;
		}


.videoArchive{
	border: 15px solid rgba(255, 255, 255, 0.5);
    float: right;
    margin-right: 3%;
    margin-top: -23%;
    position: relative;
    width: 240px;
	}
	
	.videoArchive img{
		width:100%;
		}

#archive2014 .summary,
#archive2014 .highlight,
#archive2014 .drivers{
	background-color:#151515;
	padding:35px 75px;
	color:#9a9999!important;
	}
	
	#archive2014 h2{
		background-image:none!important;
		text-align:center;
		padding:60px 0!important;
		}
		
		#archive2014 h2 span{
			font-size:40%;
			display:block;
			color:#555555;
			}
	
	#archive2014 .summary p,
	#archive2014 .highlight p,
	#archive2014 .drivers p{
		margin-bottom:0.7em;
		}
		
		.comments{
			font-style:italic;
			padding-top:30px;
			margin-top:30px;
			border-top:solid 1px #3e3d3d;
			}
		.comments h4{
			font-size: 140%;
			font-weight: bold;
			line-height: 1.3;
			margin-bottom: 20px;
			}
		.comments .signature{
			font-size:80%;
			text-align:right;
			line-height:1.2;
			}
			
			.comments .signature strong{
				font-weight:bold;
				font-size:120%;
				font-style:italic;
				}


/* hybrid */

.hybrid{
	background-color:#00468b;
	color:#ffffff;
	padding:0 75px 75px;
	}
	
	.hybrid h2{color:#ffffff;line-height:1.4;}
	.hybrid li{float:left;}
	.hybrid .image{
		width:43%;
		}
		
		.hybrid .image img{
			width:92%;
			}
	
	.hybrid .text{
		width:57%;
		font-size:110%;
		}
		
		.hybrid .text p{
			margin-bottom:30px;
			}
		
		.hybrid .text a{
			display:block;
			text-align:center;
			color:#ffffff;
			background-color:#151515;
			font-weight:bold;
			padding:11px 0;
			position:relative;
			}
			
			.hybrid .text a:after{
				display:block;
				content:"";
				width:15px;
				height:24px;
				background-image:url(https://toyotagazooracing.com/pages/contents/en/assets/images/wec/report/common2014/img/archive2014/ico_arrow.png);
				position:absolute;
				top:50%;
				right:20px;
				margin-top:-12px;
				}

.pc .movieSize {
    background-color: #141414;
    padding: 0 13%;
}

.pc .movie {
    height: 0;
    overflow: hidden;
    padding: 30px 0 50%;
    position: relative;
}
.pc .movie iframe{
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/* point */

.point{
	background-color:#eeeeee;
	padding:0 75px 75px;
	}

	
	.point h3{
		background-color:#484848;
		color:#ffffff;
		text-align:center;
		font-weight:bold;
		font-size:110%;
		line-height:1.2;
		padding:15px 0;
		}
	
	.point li{
		width:47%;
		float:left;
		margin-left:6%;
		background-color:#ffffff;
		}
		
		.point li .wrap{
			padding:20px;
			}
		
		.point li img{
			width:100%;
			}
		
		.point li:first-child{
			margin-left:0;
			}
		
		.point th,
		.point td{
			padding:5px 0;
			border-bottom:solid 1px #dbdbdb;
			font-size:90%;
			vertical-align:top;
			}
			
			.point th{
				text-align:center;
				width:4em;
				}
			
			.point td.points{
				text-align:right;
				width:6em;
				}
		
		.point .toyota th,
		.point .toyota td{
			color:#0071e0;
			font-weight:bold;
			}


/* Panel */

#archive2014 .panel{
	/*padding: 30px 40px 50px;*/
	}
	.panel:after{
		content:"";
		display:block;
		clear:both;
		}
	.panel li{
		width:100%;
		text-align:center;
		position:relative;
		}
	
	.panel a{
		}
		
		.panel li .btnRepo{
			position:absolute;
			bottom:0;
			cursor:pointer;
			width:100%;
			}
	
	.spNone{
		display:block;
		}


/* results */

.results{
	padding:0 75px 75px;
	position:relative;
	overflow:hidden;
	background-color:#000000;
	}
	
	.results .cover{
		width:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:0;
		}
	
	.results .block{
		position:relative;
		top:0;
		left:0;
		z-index:1;
		}
	
	.results h2{
		color:#ffffff;
		}
		
		.results li{
			width:24.1%;
			float:left;
			margin-left:1.2%;
			background-color:rgba(255,255,255,0.8);
			margin-bottom:1.2%;
			position:relative;
			}
			
			.results li:nth-child(4n+1){
				margin-left:0;
				}

		
		.results li .wrap{
			margin:10px 15px 15px 20px;
			display:block;
			background-image:url(https://toyotagazooracing.com/pages/contents/en/assets/images/wec/report/common2014/img/archive2014/ico_arrow.png);
			background-repeat:no-repeat;
			background-position:right bottom;
			}
			
			.results li.future .wrap{
			background-image:none!important;
			}
		
		.results li span{
			display:block;
			background-color:#6c6c6c;
			padding:10px;
			color:#b6b6b6;
			position:absolute;
			top:0;
			right:0;
			font-size:70%;
			}
		
		.results li.future{
			opacity:0.5;
			}
			
		.results li h3{
			line-height: 1.2;
			min-height: 2.7em;
			font-weight:bold;
			}
		
		.results li time,
		.results li em{
			display:block;
			font-weight:normal;
			font-size:90%;
			height:1.2em;
			}
			
			.results li time{
				font-weight:bold;
				}

/* related contents */



.pc{display:block;padding:20px 0;background-color: #151515;}
.sp{display:none;background-color: #151515;}

@media screen and (max-width:1000px){ /* sp - Contents */
.results li{
	width:49%;
	margin-left:2%;
	}
	
	.results li:nth-child(2n+1){
		width:49%;
		margin-left:0;
		}
}


@media screen and (max-width:768px){ /* sp - Contents */

/* title */
.title{
	height:auto;
	}
	
	.title h1{
		background-color:rgba(0,0,0,0.8);
		color: #ffffff;
		display: block;
		left: 0;
		line-height: 1em;
		padding: 3%;
		top: 0;
		text-align:center;
		width:auto;
		text-shadow: 1px 0px 6px rgba(0, 0, 0, 1);
		font-size:22px;
		position:static;
		}
	
	.title h1 span{
		display:inline;
		}

.videoArchive{
	border: 15px solid rgba(255, 255, 255, 0.5);
    float: none;
    margin-right: 0%;
    margin-top: 0px;
    position: relative;
    width: 100%;
	box-sizing:border-box;
	}

	#archive2014 .summary{
		padding:3%;
		line-height:1.4;
		}
	
	#archive2014 .summary p{
		margin-bottom:1em;
		}
	
	.panel{
		background-color:#151515;
		}
		
	.panel li{
		float:none;
		width:100%;
		text-align:center;
		margin:0 auto;
		}
	
	.spNone{
		display:none;
		}
	
	#slideBox{
		margin:0;
		}
	
	#slideBox div{
		font-size:12px;
		padding-bottom:3%;
		}
		
	#slideBox strong{
		display: block;
		font-size: 18px;
		font-weight: bold;
		margin: 2% 0 1%;
		}

	.flex-control-nav{
		bottom:0!important;
		}

.hybrid h2{
	font-size:24px;
	}


.hybrid .img{
	margin-bottom:5%;
	}

.hybrid,
.point,
.results{
	padding:3%;
	line-height:1.3;
	}

.hybrid li,
.ranking li{
	float:none;
	width:100%!important;
	margin:0 0 3% 0;
	}
	
	.hybrid .image img{
		width:100%!important;
		}

.results .cover{
	width:240%;
	margin-left:-50%;
	}

.results li{
	float:none;
	width:100%!important;
	padding:2% 0;
	margin:0 0 1.2%;
	}



	
.pc{display:none;background-color: #151515;}
.sp{display:block;padding:20px 20px;background-color: #151515;}
.sp img{width:100%;}
}



/* chaplogo */

#logoChamp{
	background-color:#141414;
	padding:20px 0 0;
	}
	
	#logoChamp ul{
		width:980px;
		margin:0px auto;
		}
	
	#logoChamp li{
		float:left;
		width:33.3%;
		}
	
	#logoChamp li img{
		width:60%;
		margin:0 auto;
		}


@media screen and (max-width:980px){ /* sp - chaplogo */
	#logoChamp ul{
		width:90%;
		}
	
	#logoChamp li img{
		width:90%;
		}
}