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


/* main
--------------------- */
main.crr_voice{
	background-color: #27262B;
	border-bottom: 1px solid #383838;
}

	
	
/* pagetitle
--------------------- */
#pagetitle.voice {
	background: url("../img/voice/pagetitle_pht.jpg") no-repeat center / cover;
}
#pagetitle.cross-talk01 {
	background: url("../img/cross-talk01/pagetitle_pht.jpg") no-repeat center / cover;
}
#pagetitle.cross-talk02 {
	background: url("../img/cross-talk02/pagetitle_pht.jpg") no-repeat center / cover;
}
#pagetitle.job-changer {
	background: url("../img/job-changer/pagetitle_pht.jpg") no-repeat center / cover;
}

	
	
/* voice_intro
--------------------- */
.voice_intro{
	padding-top: 30px;
	width: 100%;
	margin: 0 auto;
}
	.voice_intro .inner{
		max-width: 860px;
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	.voice_intro h2{
		font-size: 2.4rem;
		line-height: 1.5;
		color:#FDCD00;
		text-align: center;
	}
	.voice_intro .cntnts{
		margin-top: 26px;
	}
	.voice_intro .cntnt{
		width: 100%;
		background-color: #fff;
		padding: 24px 40px;
		align-items: center;
		border-radius: 6px;
		margin-bottom: 10px;
	}
	.voice_intro .cntnt:nth-last-child(1){
		margin-bottom: 0;
	}
		.voice_intro .cntnt .ttl{
			width: 90px;
			font-size: 1.8rem;
			font-weight: bold;
		}
		.voice_intro .cntnt.last .ttl {
			width: 100%;
			text-align: center;
			margin-bottom: 20px;
		}
		.voice_intro .cntnt .txt{
			font-size: 1.4rem;
			width: calc(100% - 90px);
		}

		.voice_intro .cntnt.last ul {
			width: 80%;
			margin: auto;
		}
			.voice_intro .cntnt.last ul li:nth-child(1) {
				width: 50%;
			}
			.voice_intro .cntnt.last ul li:nth-child(2) {
				width: 42%;
			}



/* voice_sec
--------------------- */
.voice_secs{
	padding-top: 40px;
	padding-bottom: 140px;
}
	.voice_sec{
		margin-top: 130px;
		color:#fff;
	}
	.voice_sec .inner{
		margin: 0 auto;
		padding: 0px 50px 60px;
		border: 1px solid #383838;
	}
		.voice_sec .ttl_area{
			width: 100%;
			text-align: center;
			transform: translateY(-50px);
			margin-bottom: -10px;
		}
			.voice_sec .ttl_area .en{
				color:#FDCD00;
			}
			.voice_sec .ttl_area h2{
				font-size: 3rem;
				line-height: 1.4;
			}
			.voice_sec .ttl_area h2 span{
				background-color: #27262B;
				padding: 0 10px;
			}
		.clmn2_sec .voice_sec .ttl_area{
		}
			.clmn2_sec .voice_sec .ttl_area h2{
				font-size: 2.5rem;
			}

		.voice_sec.bar_graph .ttl_area{
			margin-bottom: -30px;
		}

		.voice_sec .graph{
			width: 100%;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}
			.voice_sec .graph .g_txt{
				display: inline-block;
				font-size: 1.5rem;
				line-height: 1.5;
				width: 100%;
				height: 55px;
				text-align: center;
			}
				.voice_sec .graph .g_txt img{
					height: 14px;
				}
			.voice_sec .graph.ccl01{
				max-width: 780px;
			}
				.voice_sec .graph.ccl01 .img:nth-child(1){
					width: 51%;
					margin-right: 12%;
				}
				.voice_sec .graph.ccl01 .img:nth-child(2){
					width: 37%;
				}
			.voice_sec .graph.ccl02{
				max-width: 800px;
			}
				.voice_sec .graph.ccl02 .img:nth-child(1){
					width: 50%;
				}
				.voice_sec .graph.ccl02 .img:nth-child(2){
					width: 54%;
					margin-left: -4%;
				}
			.voice_sec .graph.ccl03{
				max-width: 350px;
			}
				.voice_sec .graph.ccl03 .img{
					width: 100%;
				}
			.voice_sec.bar_graph .graph{
				max-width: 100%;
			}
				.voice_sec.bar_graph .graph .img{
					max-width: 760px;
					width: 100%;
				}

		/* 2カラム */
		.clmn2_sec .voice_sec{
			width: 47%;
			margin-right: 6%;
		}
		.clmn2_sec .voice_sec:nth-child(2){
			margin-right: 0;
		}
		.clmn2_sec .voice_sec .inner{
			width: 100%;
			margin: 0;
			padding: 0 30px 50px;
		}

		.voice_sec ul.voice_icon{
			margin-top: 50px;
			max-width: 860px;
			width: 100%;
			margin: 50px auto 0;
		}
			.voice_sec ul.voice_icon li{
				width: calc(100% - 80px);
				margin: 0 auto 0 0;
				align-items: center;
			}
			.voice_sec ul.voice_icon li:nth-child(2n){
				margin: 0 0 0 auto;
				flex-direction: row-reverse;
			}
			.voice_sec ul.voice_icon li:nth-child(n+2){
				margin-top: 20px;
			}
			.voice_sec ul.voice_icon li .icon{
				position: relative;
				width: 60px;
				height: 60px;
				background-color: #313131;
				border-radius: 50%;
			}
				.voice_sec ul.voice_icon li .icon img{
					width: 22px;
					height: 26px;
					object-fit: contain;
					position: absolute;
					top:50%;
					left:50%;
					transform: translate(-50%,-50%)
				}
			.voice_sec ul.voice_icon li .txtarea{
				position: relative;
				width: calc(100% - 80px);
				margin-left: 20px;
				padding: 20px;
				font-size: 1.4rem;
				line-height: 1.5;
				letter-spacing: 0.13rem;
				border-radius: 6px;
				color:#141414;
				background-color: #fff;
			}
			.voice_sec ul.voice_icon li:nth-child(2n) .txtarea{
				margin-left: 0;
				margin-right: 20px;
			}
				.voice_sec ul.voice_icon li .txtarea:before{
					content:'';
					position: absolute;
					top:50%;
					left:-9px;
					transform: translateY(-50%);
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 9px 9px 9px 0;
					border-color: transparent #ffffff transparent transparent;
				}
				.voice_sec ul.voice_icon li:nth-child(2n) .txtarea:before{
					content:'';
					left:auto;
					right:-9px;
					border-width: 9px 0 9px 9px;
					border-color: transparent transparent transparent #ffffff;
				}

	
	
/* intro
--------------------- */
#intro {
	width: 100%;
	background: #FDCD00;
	position: relative;
}
#intro:before {
	content: "";
	width: 100%;
	height: 50%;
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
}
	#intro .read {
		padding: 100px 0;
	}


	#intro .sub_txt {
		margin-top: 40px;
		font-size: 1.2rem;
		text-align: center;
		line-height: 1.4em;
	}


	#intro .member .box {
		width: 30%;
	}
		#intro .member .box .text {
			margin-top: 15px;
			margin-bottom: 15px;
			position: relative;
		}
		#intro .member .box .text.pt {
			margin-top: 25px;
		}
			#intro .member .box .text .head {
				background: #FDCD00;
				width: 130px;
				height: 24px;
				border-radius: 12px;
				font-size: 1.2rem;
				line-height: 24px;
				text-align: center;
				position: absolute;
				top: -36px;
				left: 50%;
				margin-left: -65px;
			}

			#intro .member .box .text h2 {
				font-size: 2.4rem;
				line-height: 1.4em;
				text-align: center;
				margin-bottom: 15px;
			}
				#intro .member .box .text h2 span {
					display: block;
					font-size: 1.2rem;
					line-height: 1;
					color: #FDCD00;
				}

			#intro .member .box .text .join {
				font-size: 1.2rem;
				line-height: 1.6em;
				text-align: center;
			}

		#intro .member .box .txtbox p {
			font-size: 1.4rem;
			line-height: 1.8em;
		}

	
	
/* talk
--------------------- */
.talk {
	width: 100%;
	margin-top: 100px;
	padding-top: 130px;
	position: relative;
	overflow: hidden;
}
#talk04 {
	margin-bottom: 120px;
}
.talk:before {
	white-space: nowrap;
	width: 100%;
	height: auto;
	font-size: 15.0em;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	text-shadow:1px 1px 0 #E8E8E8, -1px -1px 0 #E8E8E8,
	-1px 1px 0 #E8E8E8, 1px -1px 0 #E8E8E8,
	0px 1px 0 #E8E8E8,  0-1px 0 #E8E8E8,
	-1px 0 0 #E8E8E8, 1px 0 0 #E8E8E8;
	letter-spacing: 0;
	color: #fff;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.crosstalk01 #talk01:before {
	content: "WHAT ARE YOUR FUTURE GOALS/CHALLENGES?　WHAT ARE YOUR FUTURE GOALS/CHALLENGES?";
	animation: flowimg-left 30s linear infinite;
}
.crosstalk01 #talk02:before {
	content: "WHAT IS THE HARDEST THING ABOUT BALANCING WORK AND PARENTING?　WHAT IS THE HARDEST THING ABOUT BALANCING WORK AND PARENTING?";
	animation: flowimg-right 30s linear infinite;
}
.crosstalk01 #talk03:before {
	content: "WHAT IS GOOD ABOUT AEON DELIGHT?　WHAT IS GOOD ABOUT AEON DELIGHT?";
	animation: flowimg-left 30s linear infinite;
}
.crosstalk01 #talk04:before {
	content: "WHAT ARE YOUR FUTURE GOALS/CHALLENGES?　WHAT ARE YOUR FUTURE GOALS/CHALLENGES?";
	animation: flowimg-right 30s linear infinite;
}
.crosstalk02 #talk01:before {
	content: "HOW’S THE ATMOSPHERE IN THE TEAM?　HOW’S THE ATMOSPHERE IN THE TEAM?";
	animation: flowimg-left 30s linear infinite;
}
.crosstalk02 #talk02:before {
	content: "WHAT IS THE RELATIONSHIP BETWEEN SUPERIORS AND SUBORDINATES?　WHAT IS THE RELATIONSHIP BETWEEN SUPERIORS AND SUBORDINATES?";
	animation: flowimg-right 30s linear infinite;
}
.crosstalk02 #talk03:before {
	content: "WHAT IS GOOD ABOUT AEON DELIGHT?　WHAT IS GOOD ABOUT AEON DELIGHT?";
	animation: flowimg-left 30s linear infinite;
}
.crosstalk02 #talk04:before {
	content: "WHAT ARE YOUR FUTURE GOALS/CHALLENGES?　WHAT ARE YOUR FUTURE GOALS/CHALLENGES?";
	animation: flowimg-right 30s linear infinite;
}
	.talk .title_talk {
		text-align: center;
	}
		.talk .title_talk .en {
			font-size: 1.6rem;
			font-weight: 600;
			line-height: 1;
			color: #FDCD00;
			margin-bottom: 18px;
		}

		.talk .title_talk h2 {
			font-size: 4.6rem;
			font-weight: 600;
			line-height: 1.4em;
			margin-bottom: 40px;
		}


	.talk .talkarea {
		max-width: 820px;
		margin: auto;
	}
		.talk .talkarea dl {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			margin-top: 50px;
		}
			.talk .talkarea dl dt {
				width: 60px;
			}
				.talk .talkarea dl dt span {
					display: block;
					margin-top: 4px;
					font-size: 1.2rem;
					text-align: center;
				}

			.talk .talkarea dl dd {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: -webkit-calc(100% - 80px);
				width: calc(100% - 80px);
				background: #F5F5F5;
				padding: 20px;
				font-size: 1.5rem;
				line-height: 1.8em;
				border-radius: 3px;
				position: relative;
			}
			.talk .talkarea dl dd:before {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 10px 10px 0;
				border-color: transparent #f5f5f5 transparent transparent;
				position: absolute;
				top: 21px;
				left: -10px;
			}

	
	
/* changer
--------------------- */
#changer {
	width: 100%;
	padding: 120px 0 80px 0;
}
	#changer .box {
		width: 48%;
		margin-right: 4%;
		margin-bottom: 40px;
	}
	#changer .box:nth-child(2n) {
		margin-right: 0;
	}
		#changer .box a {
			display: block;
		}
			#changer .box a .pht {
				overflow: hidden;
				position: relative;
			}
			#changer .box a .pht:before {
				content: "";
				width: 60px;
				height: 60px;
				background: url("../img/job-changer/icon_movie.svg") no-repeat center / 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				-webkit-transform: translateY(-50%) translateX(-50%);
				z-index: 2;
				transition: 0.4s;
				-webkit-transition: 0.4s;
			}
			#changer .box a:hover .pht:before {
				width: 70px;
				height: 70px;
			}

			#changer .box a h2 {
				font-size: 2.4rem;
				font-weight: 600;
				line-height: 1.4em;
				margin-top: 15px;
				margin-bottom: 5px;
			}

			#changer .box a time {
				font-size: 1.2rem;
				font-weight: 600;
				line-height: 1;
				margin-top: 0;
			}
				#changer .box a time .en {
					font-size: 1.4rem;
				}


.movie_list_wrap video {
  width: 60vw;
  height: auto;
  display: block;
}








/* 1300px */
@media screen and (max-width: 1300px) {

	
/* voice_sec
--------------------- */
.voice_sec .inner{
	width: 90%;
}



}








/* 1024px */
@media screen and (max-width: 1024px) {

.voice_sec .inner {
	padding: 0px 30px 60px;
}
	.voice_intro h2{
		font-size: 2.2rem;
	}
	.voice_sec .ttl_area h2 {
		font-size: 2.4rem;
	}
	.clmn2_sec .voice_sec .ttl_area h2{
		font-size: 2.4rem;
	}
	.clmn2_sec .voice_sec {
		width: 100%;
		margin-right: 0;
	}
	
	

	
	
/* intro
--------------------- */
#intro .read {
	padding: 60px 0;
}


#intro .member .box {
	width: 30%;
}
	#intro .member .box .text {
		margin-bottom: 12px;
	}
	#intro .member .box .text.pt {
		margin-top: 20px;
	}
		#intro .member .box .text .head {
			width: 110px;
			height: 20px;
			border-radius: 10px;
			font-size: 1.0rem;
			line-height: 20px;
			top: -29px;
			margin-left: -55px;
		}
		#intro .member .box .text h2 {
			font-size: 1.8rem;
		}
			#intro .member .box .text h2 span {
				font-size: 1.0rem;
			}

		#intro .member .box .text .join {
			font-size: 1.1rem;
			line-height: 1.6em;
		}

	#intro .member .box .txtbox p {
		font-size: 1.3rem;
		line-height: 1.7em;
	}

	
	
/* talk
--------------------- */
.talk {
	width: 100%;
	margin-top: 80px;
	padding-top: 80px;
	position: relative;
	overflow: hidden;
}
#talk04 {
	margin-bottom: 120px;
}
.talk:before {
	font-size: 10.0em;
}
	.talk .title_talk {
		text-align: center;
	}
		.talk .title_talk .en {
			font-size: 1.4rem;
			margin-bottom: 12px;
		}

		.talk .title_talk h2 {
			font-size: 3.6rem;
			margin-bottom: 30px;
		}


	.talk .talkarea dl {
		margin-top: 40px;
	}
		.talk .talkarea dl dt span {
			font-size: 1.1rem;
		}

		.talk .talkarea dl dd {
			font-size: 1.4rem;
		}

	
	
/* changer
--------------------- */
#changer {
	padding: 100px 0 60px 0;
}
	#changer .box a h2 {
		font-size: 2.0rem;
	}

	#changer .box a time {
		font-size: 1.0rem;
	}
		#changer .box a time .en {
			font-size: 1.2rem;
		}
	
	
	
	
}

	







/* max 768px */
@media screen and (max-width: 768px) {

	

/* voice_intro
--------------------- */
.voice_intro{
	padding-top: 20px;
}
	.voice_intro h2{
		font-size: 1.7rem;
	}
	.voice_intro .cntnts{
		margin-top: 20px;
	}
	.voice_intro .cntnt{
		padding: 16px 20px;
	}
		.voice_intro .cntnt .ttl{
			width: 100%;
			font-size: 1.6rem;
			text-align: center;
		}
		.voice_intro .cntnt .txt{
			width: 100%;
		}
		.voice_intro .cntnt:nth-child(2) .txt{
			text-align: center;
		}

		.voice_intro .cntnt.last ul {
			width: 100%;
			margin: auto;
		}
			.voice_intro .cntnt.last ul li:nth-child(1) {
				width: 51%;
			}
			.voice_intro .cntnt.last ul li:nth-child(2) {
				width: 43%;
			}

/* voice_sec
--------------------- */
.voice_secs{
	padding-top: 20px;
	padding-bottom: 80px;
}
	.voice_sec{
		margin-top: 80px;
	}
	.voice_sec .inner{
		padding: 0px 20px 30px;
	}
		.voice_sec .ttl_area{
			transform: translateY(-35px);
			margin-bottom: -10px;
		}
			.voice_sec .ttl_area .en{
				font-size: 1.2rem;
			}
			.voice_sec .ttl_area h2{
				font-size: 2rem;
			}
			.clmn2_sec .voice_sec .ttl_area h2{
				font-size: 2rem;
			}

		.voice_sec.bar_graph .ttl_area{
			margin-bottom: -20px;
		}

			.voice_sec .graph .g_txt{
				font-size: 1.4rem;
				height: 35px;
			}
			.voice_sec .graph .g_txt.pc{
				display: none;
			}
				.voice_sec .graph .g_txt img{
					height: 13px;
				}
				.voice_sec .graph.ccl01 .img:nth-child(1){
					width: 90%;
					margin-right: 0%;
				}
				.voice_sec .graph.ccl01 .img:nth-child(2){
					width: 70%;
					min-width: 220px;
					margin-top: 20px;
				}
				.voice_sec .graph.ccl02 .img:nth-child(1){
					width: 90%;
				}
				.voice_sec .graph.ccl02 .img:nth-child(2){
					width: 100%;
					margin-top: -30px;
					margin-left: 0%;
				}
			.voice_sec .graph.ccl03{
				width: 90%;
			}
				.voice_sec .graph.ccl03 .g_txt{
					height: 55px;
				}
				.voice_sec .graph.ccl03 .img{
					width: 100%;
				}
			.voice_sec.bar_graph .graph{
				max-width: 100%;
			}
				.voice_sec.bar_graph .graph .img{
					max-width: 760px;
					width: 100%;
/*					min-width: 540px;*/
				}

		/* 2カラム */
		.clmn2_sec .voice_sec .inner{
			padding: 0 20px 30px;
		}

		.voice_sec ul.voice_icon{
			margin: 30px auto 0;
		}
			.voice_sec ul.voice_icon li{
				width: 100%;
			}
			.voice_sec ul.voice_icon li:nth-child(2n){
				margin: 0 0 0 auto;
				flex-direction: row-reverse;
			}
			.voice_sec ul.voice_icon li:nth-child(n+2){
				margin-top: 15px;
			}
			.voice_sec ul.voice_icon li .icon{
				position: relative;
				width: 40px;
				height: 40px;
			}
				.voice_sec ul.voice_icon li .icon img{
					width: 18px;
					height: 22px;
				}
			.voice_sec ul.voice_icon li .txtarea{
				position: relative;
				width: calc(100% - 60px);
			}
/*
			.voice_sec ul.voice_icon li:nth-child(2n) .txtarea{
				margin-left: 0;
				margin-right: 20px;
			}
*/

	.js-scrollable{
		position: relative;
		overflow: auto; /*スクロールさせる*/
		white-space: nowrap; /*文字の折り返しを禁止*/
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
	}
	.js-scrollable::-webkit-scrollbar{
		display:none;
	}
	.scroll-hint-icon {
		top: calc(50% - 40px)!important;
		height: 84px!important;
	/*	opacity: 0.7!important;*/
	}

	.scroll-hint-text {
		margin-top: 0px!important;
	}

	
	
/* intro
--------------------- */
#intro:before {
	display: none;
}
	#intro .read {
		padding: 40px 0;
	}


	#intro .sub_txt {
		margin-top: 30px;
		font-size: 1.0rem;
		padding-bottom: 40px;
	}


	#intro .member {
		display: block;
		padding-bottom: 0;
	}
		#intro .member .box {
			width: 100%;
			margin-bottom: 25px;
		}
		#intro .member .box:nth-last-child(1) {
			margin-bottom: 0;
		}
			#intro .member .box .profile {
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				margin-bottom: 15px;
			}
	
	
			#intro .member .box .pht {
				width: 120px;
			}
	
	
			#intro .member .box .text {
				width: -webkit-calc(100% - 120px);
				width: calc(100% - 120px);
				padding-left: 15px;
				margin-top: 0;
				margin-bottom: 15px;
			}
			#intro .member .box .text.pt {
				margin-top: 0;
			}
				#intro .member .box .text .head {
					width: 100%;
					height: auto;
					border-radius: 0;
					font-size: 1.0rem;
					text-align: left;
					position: static;
					line-height: 1;
					margin-left: 0;
					margin-bottom: 5px;
				}
	
				#intro .member .box .text h2 {
					font-size: 2.0rem;
					line-height: 1.2em;
					text-align: left;
					margin-bottom: 12px;
				}
					#intro .member .box .text h2 span {
						display: none;
					}

				#intro .member .box .text .join {
					text-align: left;
					line-height: 1.4em;
				}

	
	
/* talk
--------------------- */
.talk {
	width: 100%;
	margin-top: 60px;
	padding-top: 60px;
}
#talk04 {
	margin-bottom: 80px;
}
.talk:before {
	font-size: 8.0em;
}
	.talk .title_talk h2 {
		font-size: 2.6rem;
		margin-bottom: 20px;
	}


	.talk .talkarea dl {
		margin-top: 30px;
	}
		.talk .talkarea dl dt {
			width: 50px;
		}
			.talk .talkarea dl dt span {
				font-size: 1.0rem;
			}

		.talk .talkarea dl dd {
			width: -webkit-calc(100% - 60px);
			width: calc(100% - 60px);
			padding: 15px;
		}
		.talk .talkarea dl dd:before {
			border-width: 5px 5px 5px 0;
			top: 21px;
			left: -5px;
		}

	
	
/* changer
--------------------- */
#changer {
	padding: 60px 0 30px 0;
}
	#changer .inner {
		display: block;
	}
	#changer .box {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}


.movie_list_wrap video {
  width: 80vw;
}

}



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(../img/job-changer/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../img/job-changer/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}