﻿.logo-kryptos {
	background:url(../images/logo-kryptos.png) no-repeat center -34px;
	max-width:100%;
	height:21px;
	margin:1em auto;
}

/* ORIG tab styling */
.tabs-panels {
	width: 100%;
}
	.tabs-panels ul.tabs-list {
		margin: 0;
		padding: 0;
		height:35px;
		list-style: none;
	}
		.tabs-panels ul.tabs-list li.first {
			width:45%;
		}
		.tabs-panels ul.tabs-list li.last {
			width:54%;
		}
		.tabs-panels ul.tabs-list li { /* default tab / TAB OFF */
			float: left;
			margin: 0;
			padding: 0;
			max-width:13em; /* 156px / 12 = 13 */
			height: 35px;
			border:0;
			background-color: #f3f3f3;
			color: #000;
			text-transform: uppercase;
			font-weight: bold;
			text-align: center;
		}
		.tabs-panels ul.tabs-list a {
			float: left;
			display: block;
			padding: 0;
			text-decoration: none;
			height: 100%;
			width: 100%;
			color: #000;
			line-height:3;
		}
			.tabs-panels ul.tabs-list a:hover {
				color: #333;
			}
		.tabs-panels ul.tabs-list li.last { /* default tab / TAB OFF */
			max-width: 15.41666666666667em; /* 185px / 12 = 15.41666666666667 */
		}
		.tabs-panels ul.tabs-list .first { /* FIRST TAB OFF */
			 background:url(../images/angle-side-7.png) repeat-x left top;
		}
		.tabs-panels ul.tabs-list .current { /* TAB ON */
			border:0;
			color: #fff;
		}
		.tabs-panels ul.tabs-list .current a {
				background-color: #000;
				color: #fff;
			}
		.tabs-panels ul.tabs-list .current.first { /* FIRST TAB ON LI */
		}
		.tabs-panels ul.tabs-list .current.first a { /* FIRST TAB ON A */
		}
		.tabs-panels ul.tabs-list .current.last { /* LAST TAB ON LI */
			background:none;
		}
		.tabs-panels ul.tabs-list .current.last a { /* LAST TAB ON A */
			background:url(../images/angle-side-4.png) no-repeat right top;
		}
		.tabs-panels ul.tabs-list .last { /* LAST TAB OFF LI */
			background:url(../images/angle-side-5.png) no-repeat left top;
		}
		.tabs-panels ul.tabs-list .last a { /* LAST TAB OFF A */
			background:url(../images/angle-side-6.png) no-repeat right top;
		}
.js .tabs-panels .current-info,
.js .tabs-panels .accessibletabsanchor,
.js .tabs-panels .tabhead /*position each individual tab's heading (default class .tabhead) off-screen*/ {
	position: absolute;
	left: -999em;
}
.js .tabs-panels .content {
	clear: both;
}
/**********************************/


/**********************************/
/* trigger layout */
.text-holder-full > div {
	overflow: hidden;
}
.text-holder-full > section {
	width: 100%;
}
/* trigger layout */
.tabs-panels > div > div {
	overflow: hidden;
	background-color:#000;
	position:relative;
}
.section-tab {
	border-bottom:1px solid #ccc;
}
	.section-tab > h3 {
		margin: 0;
		padding: 0;
	}
.section-accordion {
	margin-top: 2px;
}
.tabbody {
	color: #fff;
	overflow:hidden;
}
.tab-content-video {
	background:#000 url(../images/background-video-panel.jpg) left top;
	margin: 0;
	padding-bottom:1em;
}

/******************************************************/
.tab-content-panel {
	padding-bottom:2em;
}

.tab-content-panel > div:first-child {
	background:#000;
}
	.tab-content-panel > div:first-child ul {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		height: 300px;
		text-align:center;
	}
	.tab-content-panel > div:first-child ul li {
		position:absolute;
		width:139px;
		height:176px;
		background: none;
	}
	.tab-content-panel > div:first-child ul li#panel1 {
		left: 3%;
		margin:0;
		background: none;
	}
	.tab-content-panel > div:first-child ul li#panel2 {
		left: 50%;
		margin:0;
		background: none;
	}
	.tab-content-panel > div:first-child ul li a {
		display: block;
		text-decoration:none;
		width: 100%;
		height: 100%;
	}
		.tab-content-panel > div:first-child ul li a i,
		.tab-content-panel > div:first-child ul li a em {
			font-size:1.166666666666667em;
			font-style:normal;
			font-weight:bold;
			color:#fff;
			background: url(../images/arrow-kryptos-sprite.png) no-repeat right 10px #bf2800;
			padding:.5em 2em .5em .7em;
			position:relative;
			top:5.5em;
		}
		.tab-content-panel > div:first-child ul li a:hover i,
		.tab-content-panel > div:first-child ul li a:active i,
		.tab-content-panel > div:first-child ul li a:focus i,
		.tab-content-panel > div:first-child ul li a:hover em,
		.tab-content-panel > div:first-child ul li a:active em,
		.tab-content-panel > div:first-child ul li a:focus em {
			color:#cdcdcd;
			background: url(../images/arrow-kryptos-sprite.png) no-repeat right -30px #bf2800;
		}
	.tab-content-panel > div:first-child ul li#panel1 a {
		border: 1px solid #9d9d9d;
		margin:0;
		padding:0;
		width:100%;
		background: url(../images/kryptos-panel-text.jpg) no-repeat;
		background-size:cover;
	}
	.tab-content-panel > div:first-child ul li#panel2 a {
		border: 1px solid #9d9d9d;
		margin:0;
		padding:0;
		background: url(../images/kryptos-panel-cipher.jpg) no-repeat;
		background-size:cover;
	}
	/* hover images */
	.tab-content-panel > div:first-child ul li#panel1 a:hover,
	.tab-content-panel > div:first-child ul li#panel1 a:active,
	.tab-content-panel > div:first-child ul li#panel1 a:focus {
		border-color:#d2d2d2;
	}
	.tab-content-panel > div:first-child ul li#panel2 a:hover,
	.tab-content-panel > div:first-child ul li#panel2 a:active,
	.tab-content-panel > div:first-child ul li#panel2 a:focus {
		border-color:#d2d2d2;
	}

	/* panel detail */
	.tab-content-panel > div:first-child + div {
		display: none;
		background-color: #000;
		padding-top:1em;
		padding-bottom:1em;
	}
	/* BACK TO PANEL INDEX button */
	.kp-col3 > a,
	.kp-col3 > a:link,
	.kp-col3 > a:visited {
		display: block;
		text-transform: uppercase;
		text-align: center;
		line-height: 2.4;
		color: #fff;
		width:17.5em;
		height: 29px;
		margin: 0 auto;
		margin-bottom:1em;
		font-size: 1em;
		font-weight: bold;
		background: #de483b url(../images/arrow-kryptos-sprite.png) no-repeat -6px -70px;
	}
		.kp-col3 > a:hover,
		.kp-col3 > a:active {
			text-decoration: none;
			color: #cdcdcd;
			background:#de483b url(../images/arrow-kryptos-sprite.png) no-repeat -6px -110px;
		}

		.kp-col3 > a.viewOtherPanel,
		.kp-col3 > a.viewOtherPanel:link,
		.kp-col3 > a.viewOtherPanel:visited {
			background: url(../images/arrow-kryptos-sprite.png) no-repeat right 10px #de483b;
			padding-left:0;
		}

		.kp-col3 > a.viewOtherPanel:hover,
		.kp-col3 > a.viewOtherPanel:active {
			background: url(../images/arrow-kryptos-sprite.png) no-repeat right -30px #de483b;
			padding-left:0;
		}

.tab-content-panel ul li h4 {
	font-size:1.5em;
	font-weight:bold;
	margin: 2em 0 .8em;
	color:#fff;
	text-transform:none;
}
/******************************************************/

.current-panel-title {
	color:#fff;
	font-weight:bold;
	font-size:1.5em;
	margin-left:.6em;
	margin-top:0;
}

.tab-content-video > p:first-child {
	max-width:36.5em;
	margin:1em .5em;
	font-size:1.25em;
	font-weight:bold;
}

/* BREAK CODE NOW button */
	.tab-content-video > a,
	.tab-content-video > a:link,
	.tab-content-video > a:visited {
		display:block;
		background-color:#de483b;
		text-transform:uppercase;
		text-align:center;
		line-height:2.9;
		color:#fff;
		width:173px;
		height:39px;
		margin:.8em auto 0;
		font-size:1.108333333333333em;
		font-weight:bold;
	}
		.tab-content-video > a:hover,
		.tab-content-video > a:active {
			text-decoration:none;
			color:#333;
		}

#kryptos-panel img {
	clear:both;
	display: block;
	margin:0 auto 2em;
}

/* expand/collapse overrides */
#content .expandcollapse > li {
	border-bottom: 1px solid #B9B9B9;
	margin: 0;
	padding: 0;
}
	#content .expandcollapse > li.odd {
		background: #464646; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ2NDY0NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjAyMDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #464646 0%, #020202 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#464646), color-stop(100%,#020202)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #464646 0%,#020202 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #464646 0%,#020202 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #464646 0%,#020202 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #464646 0%,#020202 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#020202',GradientType=0 ); /* IE6-8 */
	}
	#content .expandcollapse > li a.tabHead {
		color:#fff;
		text-transform:uppercase;
	}
	#content .expandcollapse > li a.tabHead:focus{color: #FFFF00;}
	#content .expandcollapse > li a.tabHead p {
		margin:0;
		padding:1.02em 1em;
	}
	#content .expandcollapse > li.even {
		padding: 9px 20px 8px 20px;
		background:#fff;
	}
	#content .expandcollapse > li p:first-of-type {
		padding-top: .2em;
		margin-top: 0;
	}
.expandcollapse > li.odd .plus {
	top: 13px;
}

/* YOUTUBE INTRO VIDEO */
.intro-embed-container {
	position: relative;
	padding-bottom: 31%;
	padding-top: 20px;
	border: 1px solid #f1f1f1;
	height: 0;
	overflow: hidden;
	max-width: 95%;
	margin: 0 auto;
	height: auto;
}
	.intro-embed-container iframe,
	.intro-embed-container object,
	.intro-embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


/* TEXT VERSION OF PANELS */
.link-text-version {
	text-align:right;
	padding:.5em .8em .5em 0;
	margin:0;
	background-color:#434343;
}
	.link-text-version a,
	.link-text-version a:link,
	.link-text-version a:visited {
		color:#dbdbdb;	/*#e9e9e9;*/
	}
	.link-text-version a:hover,
	.link-text-version a:active {
		color:#fdfdfd;
	}

.tabs-panels > div > div.panel-text {
	background-color:transparent;
}
.panel-text {
	color:#333;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	padding: 0 1em;
}
	.panel-text i,
	.panel-text em,
	.panel-text pre {
		margin-left:-4px;
	}
	.panel-text pre {
		letter-spacing:2px;
		margin-top:.2em;
		margin-bottom:1.5em;
	}



/* THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */
.kp-col1 {
	width: auto;
	float: none;
	padding-top: 0.5em;
}
.kp-col2 {
	width: auto;
	float: none;
}
.kp-col3 {
	width: auto;
	float: none;
	padding-top: 0.5em;
}
/* ./ THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 321px) {
	.tabs-panels ul.tabs-list li { /* default tab / TAB OFF */
		width: 49%;
		max-width:13em;
		height: 35px;
	}
	.tabs-panels ul.tabs-list li.last { /* default tab / TAB OFF */
		max-width: 15.41666666666667em;
	}
	.tabs-panels ul.tabs-list li.first { /* default tab / TAB OFF */
		 border-left: 1px solid #737373;
	}
	.tabs-panels ul.tabs-list .current { /* TAB ON */
	}
	.tab-content-video {
		padding-bottom:2em;
	}
		.tab-content-video > a,
		.tab-content-video > a:link,
		.tab-content-video > a:visited {
			width:200px;
			height:46px;
			font-size:1.333333333333333em;
			line-height:2.9;
			margin: 1.5em auto 0;
		}
		.tab-content-video > a {
			
		}
		.tab-content-video > p:first-child {
			max-width:95%;
			margin-left:auto;
			margin-right:auto;
		}
	.panel-text i,
	.panel-text em,
	.panel-text pre {
		margin-left: 0;
	}
}

@media only screen and (min-width: 400px) {
	.tab-content-panel > div:first-child ul li#panel1 {
		left: 10%;
	}
	.tab-content-panel > div:first-child ul li#panel2 {
		left: 51%;
	}
}


@media only screen and (min-width: 515px) {	/* 515px is width of large Kryptos logo image */
	.logo-kryptos {
		background: url(../images/logo-kryptos.png) no-repeat center top;
		height: 32px;
		margin-bottom:2em;
	}
	.intro-embed-container {
		max-width: 60%;
	}
	.tab-content-video > p:first-child {
		max-width: 60%;
		margin-left:auto;
		margin-right:auto;
	}


	.tab-content-panel > div:first-child {
		height: 360px;
	}


	.tab-content-panel > div:first-child ul li {
		width:188px;
		height:237px;
	}
	.tab-content-panel > div:first-child ul li#panel2 {
		left: 50%;
	}

		.tab-content-panel > div:first-child ul li a i,
		.tab-content-panel > div:first-child ul li a em {
			top:7.5em;
		}

	.panel-text i,
	.panel-text em,
	.panel-text pre {
		margin-left: 10%;
		font-size:1.166666666666667em;
	}
	.panel-text pre {
		letter-spacing:3px;
	}

}

@media only screen and (min-width: 768px) {
	.tab-content-panel > div:first-child {
		height: 450px;
	}
	.tab-content-panel > div:first-child ul {
		height: 300px;
	}
	.tab-content-panel > div:first-child ul li {
		width:258px;
		height:327px;
	}
	.tab-content-panel > div:first-child ul li#panel1 {
		left: 11%;
	}
	.tab-content-panel > div:first-child ul li#panel2 {
		left: 55%;
	}
	.tab-content-panel > div:first-child ul li a {
		width:258px;
		height:327px;
	}
	.tab-content-panel > div:first-child ul li a i,
	.tab-content-panel > div:first-child ul li a em {
			padding:.5em 2.5em .5em 1em;
			top:10.5em;
		}

	.panel-text i,
	.panel-text em,
	.panel-text pre {
		margin-left: 20%;
		font-size:1.166666666666667em;
	}
	.panel-text pre {
		letter-spacing:5px;
	}

	.kp-col3 > a,
	.kp-col3 > a:link,
	.kp-col3 > a:visited {
		width: 100%;
	}

	/* THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */
	.kp-col1 {
		width: 18%;
		float: left;
	}
	.kp-col2 {
		width: 56%; /* Account for margins + border values */
		float: left;
	}
	.kp-col3 {
		width: 24%;
		float: left;
	}
	/* ./ THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */
}

@media only screen and (min-width: 1000px) {
	.link-text-version {
		padding: .2em 2em .2em 0;
		margin: 0;
	}
}





/* ==========================================================================
   IE styles
   ========================================================================== */
.lt-ie9 .tabs-panels ul.tabs-list li { /* default tab / TAB OFF */
	width: 49%;
	max-width:13em; /* 156px / 12 = 13 */
	height: 35px;
}
.lt-ie9 .tabs-panels ul.tabs-list li.last { /* default tab / TAB OFF */
	max-width: 15.41666666666667em; /* 185px / 12 = 15.41666666666667 */
}
.lt-ie9 .tabs-panels ul.tabs-list li.first { /* default tab / TAB OFF */
		border-left: 1px solid #737373;
}
.lt-ie9 .tabs-panels ul.tabs-list .current { /* TAB ON */
}
.lt-ie9 .tab-content-video {
	padding-bottom:2em;
}
	.lt-ie9 .tab-content-video > a,
	.lt-ie9 .tab-content-video > a:link,
	.lt-ie9 .tab-content-video > a:visited {
		width:200px;
		height:46px;
		font-size:1.333333333333333em;	/* 16 / 12 = 1.333333333333333 */
		line-height:2.9;
		margin: 1.5em auto 0;
	}
	.lt-ie9 .tab-content-video > a {
			
	}
	.lt-ie9 .tab-content-video > p:first-child {
		max-width:95%;
		margin-left:auto;
		margin-right:auto;
	}
.lt-ie9 .panel-text i,
.lt-ie9 .panel-text em,
.lt-ie9 .panel-text pre {
	margin-left: 0;
}


.lt-ie9 .logo-kryptos {
	background: url(../images/logo-kryptos.png) no-repeat center top;
	height: 32px;
	margin-bottom:2em;
}
.lt-ie9 .intro-embed-container {
	max-width: 60%;
}
.lt-ie9 .tab-content-video > p:first-child {
	max-width: 60%;
	margin-left:auto;
	margin-right:auto;
}

.lt-ie9 .panel-text i,
.lt-ie9 .panel-text em,
.lt-ie9 .panel-text pre {
	margin-left: 10%;
	font-size:1.166666666666667em;
}
.lt-ie9 .panel-text pre {
	letter-spacing:3px;
}




.lt-ie9 .panel-text i,
.lt-ie9 .panel-text em,
.lt-ie9 .panel-text pre {
	margin-left: 20%;
	font-size:1.166666666666667em;
}
.lt-ie9 .panel-text pre {
	letter-spacing:5px;
}



.lt-ie9 .link-text-version {
	/*border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: right;*/
	padding: .2em 2em .2em 0;
	margin: 0;
}



	.lt-ie9 .tab-content-panel > div:first-child {
		height: 450px;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul {
		height: 300px;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul li {
		width:258px;
		height:327px;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul li#panel1 {
		left: 11%;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul li#panel2 {
		left: 55%;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul li a {
		width:258px;
		height:327px;
	}
	.lt-ie9 .tab-content-panel > div:first-child ul li a i,
	.lt-ie9 .tab-content-panel > div:first-child ul li a em {
			padding:.5em 2.5em .5em 1em;
			top:10.5em;
		}

	.lt-ie9 .panel-text i,
	.lt-ie9 .panel-text em,
	.lt-ie9 .panel-text pre {
		margin-left: 20%;
		font-size:1.166666666666667em;
	}
	.lt-ie9 .panel-text pre {
		letter-spacing:5px;
	}

	.lt-ie9 .kp-col3 > a,
	.lt-ie9 .kp-col3 > a:link,
	.lt-ie9 .kp-col3 > a:visited {
		width: 100%;
	}

	/* THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */
	.lt-ie9 .kp-col1 {
		width: 18%;
		float: left;
	}
	.lt-ie9 .kp-col2 {
		width: 56%; /* Account for margins + border values */
		float: left;
	}
	.lt-ie9 .kp-col3 {
		width: 24%;
		float: left;
	}
	/* ./ THREE COLUMNS FOR CODE TEXT PANEL LAYOUT */