@import "compass/css3";

.jsj_code_highlight {

	/* * * * Code * * * */

	code {
		display: inline-block;
		padding: 0.8em;
		padding-right: 1.8em;
	}

	/* * * * Thumbnails * * * */

	.jsj_code_highlight_style_image_container {
		display: inline-block;
		width: 45%;
		max-width: 250px;

		p {
			margin: 0 10px;
			padding: 0;
		}

		img {
			width: 100%;
		}

		input[type=radio] {
			display:none;
		}

		input[type=radio] + img{
			cursor:pointer;
			border: 3px solid transparent;
		}

		input[type=radio]:checked + img{
			border: 3px solid #2ea2cc;
		}
	}

	.jsj_code_highlight_other_options {

		table {
			font-size: 13px; 
			td {
				padding: 5px;
				min-width: 150px;
			}
		}
	}

	.jsj_code_highlight_other_options, .jsj_code_highlight-options_box {
		max-width: 600px; 
	}

	.jsj_code_highlight-registration_box {
		padding: 7px; 
		margin: 10px 0px; 
		border: 1px #999 solid; 
		background: #ddd;

		@include border-radius(3px);
		h4, p {
			margin-top: 5px;
			margin-bottom: 5px;
		}
		
	}

	.tab-nav {
		h2 {
			border-bottom: 1px #ccc solid; 
		}
		.nav-tab {
			background: none; 
		}
	}

	.jsj_code_highlight-tab-content {
		&.disabled {
			display: none;
		}
	}


}

@media all and (min-width: 720px){

	.jsj_code_highlight .jsj_code_highlight_style_image_container {
		width: auto;
	}

	.jsj_code_highlight .jsj_code_highlight_style_image_container img {
		width: 150px;
	}
}

@media all and (min-width: 960px){

	.jsj_code_highlight .jsj_code_highlight_style_image_container img {
		width: 200px;
	}
}