/*
canvas.mapster_el {
	box-shadow: 10px 10px 10px black !important;
}
*/


.model-wrapper {
	width:1200px;
	padding:0;
	margin:50px auto;
	overflow:hidden;
	font: normal 18px/26px "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#555;
	background:#fff;
}

.model-wrapper a {color:#19baed; text-decoration: none;}
.model-wrapper a:hover {color:#1d8ab2; }

.model-left {width:60%;float:left;} 
.model-right {width:40%;float:right;}


.text-wrapper {height: 500px;}

.model-row {
	margin-bottom:3%;
	overflow: hidden;
	clear:both;
}

.model-heading {
	width:100%;
	padding:0;
	background:gray;
	margin-bottom:3%;	
}

.model-heading.bosons {width:65.64%; margin-right:3%; float:left;}
.model-heading.higgs {width:31.3%; float:left;}

.model-square {
	display:block;
	width:14.16%;
	padding-bottom:14.16%;
	margin:0;
	margin-right:3%;
	float:left;
	background:gray;
	position:relative;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	-ms-transition:all 0s ease-in-out;
}
.model-square:hover {
	cursor: pointer;
	background:black;
}

.model-square:last-child {
	margin-right:0;
}

.model-symbol {
	font: 900 40px/40px "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#fff;
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.model-info-wrapper {
	clear:both;
	margin-bottom:3%;
}

.model-info {
	/* 	
	background:gray;
	padding:40px;
	overflow: hidden;	 
	*/
	display:none;
}
.model-info.text-intro {display:block;}

.model-info-row {
	overflow:hidden;
	margin-bottom:20px;
}

.model-info-row.model-description {margin-top:40px;}
.model-info-row.model-generation {margin-bottom:0;}


.model-info-col {
	width:48%;
	float:left;
}
.model-info-col + .model-info-col {margin-left:4%;}



#model-key {margin-top:80px;}

.model-wrapper a.model-symmetry-link {color:#555; font-weight: bold; font-size:14px;float:left;margin-top:8px;}

#logos {float:right;}

.model-footer {
	border-top:2px dotted #999;
	margin-top:40px;
	padding-top:10px;
}


/* Typography */


body.node-type-article article .model-wrapper h3,
.model-wrapper h3 {
	margin:0;
	margin-bottom:30px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font: 900 22px/26px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.node-type-article article .model-wrapper h4,
.model-wrapper h4 {margin:0;font: 900 18px/26px "Helvetica Neue", Helvetica, Arial, sans-serif;}

body.node-type-article article .model-wrapper h5,
.model-wrapper h5 {margin:0;font: 900 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;} 

body.node-type-article article .model-heading h4,
.model-heading h4 {
	font: 900 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding:5px 10px;
	margin:0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight:bold;
}
body.node-type-article article .model-wrapper p,
.model-wrapper p {
	font: 400 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:0;
}
body.node-type-article article .model-wrapper p + p,
.model-wrapper p + p {
	text-indent: 0;
}

.model-wrapper h1 {
	font: 900 22px/26px "Helvetica Neue", Helvetica, Arial, sans-serif;
	border-bottom:2px dotted #999;
	margin-bottom:40px;
	padding-bottom:10px;
}

.model-wrapper .text-intro p + p {margin-top:12px;}


sup {font-size:50%;}


/*

Color Definitions

light orange: 	#f48560
dark orange:	#f85a49
light blue:		#19baed
dark blue:		#1d8ab2
light green:	#25ad96
dark green:		#397b72
light purple:	#bc88bc
dark purple:	#9f62a7

*/

.quarks .model-heading,
.quarks .model-square {background:#f48560;}
.quarks .model-square:hover,
.quarks .model-square.active,
.quarks .model-info {background:#f85a49;}

.leptons .model-heading,
.leptons .model-square {background:#25ad96;}
.leptons .model-square:hover,
.leptons .model-square.active,
.leptons .model-info {background:#397b72;}

.bosons .model-heading,
.bosons .model-square {background:#19baed;}
.bosons .model-square:hover,
.bosons .model-square.active,
.bosons .model-info {background:#1d8ab2;}

.model-heading.higgs,
.model-square.higgs {background:#bc88bc;}
.model-square.higgs:hover,
.model-square.higgs.active {background:#9f62a7;}

.generation-quarks {color:#f85a49;}
.generation-leptons {color:#397b72;}