@font-face {
	font-family: 'PatheticFont'; /*a name to be used later*/
	src: url('../fonts/AC-Pathetic_unicode.ttf'); /*URL to font*/
}

.pathetic-font {
	font-family: 'PatheticFont';
}


body.bare {
    background: url("../games/ui/low_contrast_linen.png") repeat scroll 0 0 #393939 !important;
}


#myCanvasContainer {
	padding-top:80px;
}

#words { 
	background: #393939 url('../../img/literature/education/words/bg_words.jpg');
}

#words-container {
	margin: auto;
	padding: 0 15px 15px 15px;
	overflow: hidden;
	max-width: 1280px;
	max-height: 850px;
}

#userwords-container {
	margin: auto;
	padding: 0 15px 15px 15px;
	overflow: hidden;
	max-width: 1280px;
}

#userwords {
	background: #fff;
	display:block;
	padding:0 15px;
	min-height: 750px;
	-webkit-border-radius: 0px 0px 6px 6px;
		-moz-border-radius: 0px 0px 6px 6px;
	border-radius: 0px 0px 6px 6px;
	border:1px solid #bfbfbf;
	-webkit-box-shadow: #1c1c1c 4px 4px 4px;
		-moz-box-shadow: #1c1c1c1 4px 4px 4px;
	box-shadow: #1c1c1c 4px 4px 4px;
}

#words {
	box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 1);
	box-sizing: border-box;
	display: none;
	height: 850px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

#words-menu {
	position:absolute;
	z-index: 1019;
	width: 1280px;
}

#words-menu ul {
	z-index: 1020;
	text-align: center;
	margin-bottom:0;
	
}

#words-menu ul li {
    vertical-align: top;
	float:none;
	display: inline-block;
}

#words-menu .nav-pills > li > a {
	color: #ccc;
	margin-top: 0;
	background: #000;
	text-decoration: none;
	border-radius:0 0 5px 5px;
	background-image: linear-gradient(to bottom, #333, #000);
}
#words-menu .nav-pills > li > a:hover {
	color: #fff;
	background: #009dff;
	background-image: linear-gradient(to bottom, #009dff, #0083db);
}
#words-menu .nav a.dropdown-toggle .caret {
	border-bottom-color: #ccc;
	border-top-color: #ccc;
}
#words-menu .nav a.dropdown-toggle:hover .caret {
	border-bottom-color: #005580;
	border-top-color: #005580;
}


#words-menu .dropdown-menu li {
	text-align:left;
	display:list-item;
}

#words-menu .dropdown-menu li > a {
	margin-left: -10px;
	margin-right: -10px;
}
#words-menu .dropdown-menu li > a:hover, #words-menu .dropdown-menu li > a:focus, #words-menu .dropdown-submenu:hover > a {
	background-color: #009dff;
	background-image: none;
}
#words-menu .dropdown-menu .active > a, #words-menu .dropdown-menu .active > a:hover {
	background-color: #009dff;
	background-image: none;
}
#words-menu i.icon {
    font-size: 12px;
}
#words-menu .nav-list > li > a {
    padding: 5px 15px;
}

/*
.words-list-item {
	position:relative;
	float:left;
	display:block;
	padding:0 5px;
	width:120px;
	margin-right:5px;
}
*/

.menulist {
	width:470px;
	overflow:hidden;
		-webkit-column-count:3;
		-moz-column-count:3;
		-o-column-count:3;
		column-count:3;
}

#words-main {
	position: relative;
	
}

#words-main h1 {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40px;
}


.word-title {
	font-size:200px;
	color:white;
	width:100%;
	text-align:center;
	position:absolute;
	top:200px;
	line-height:200px;
	opacity:0.8;
	text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.3);
}

.word {
	position:absolute;
	display: table;
	text-align: center;
	background:#000;
	opacity:0.9;
	border-radius:50%;
	font-size: 18px;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.4);
}

.word span {
	display: table-cell;
	vertical-align: middle;
	cursor:pointer;
}

.word > span {
	color: #ccc;
	font-weight: bold;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	line-height: 1em;
	transition: color 0.25s;
}

.word > span:hover {
	color: #E95D2A;
}

.description > span {
	color: #333 !important;
	font-size: 14px !important;
	text-shadow: none;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}
.description > span:hover {
	color: #0083db !important;
}

.main {
	top:170px;
	left:430px;
	width:280px;
	height:280px;
	font-size:38px;
	font-weight:bold;
	z-index:1;
	opacity:1.0;
}

.main > span{
	color:#0083DB;
}

.back {
	top:300px;
	left:280px;
	width:170px;
	height:170px;
}

.back > span{
	color:#E95D2A;
	background:url('../../img/literature/education/words/back_arrow.png') 70% 10% no-repeat;
}

.sub1 {
	top:65px;
	left:320px;
	width:185px;
	height:185px;
}

.sub2 {
	top:90px;
	left:640px;
	width:180px;
	height:180px;
}

.sub3 {
	top:425px;
	left:420px;
	width:160px;
	height:160px;
}

.sub4 {
	top:50px;
	left:490px;
	width:160px;
	height:160px;
}


.sub5 {
	top:400px;
	left:560px;
	width:150px;
	height:150px;
}


.description {
	top:280px;
	left:680px;
	width:250px;
	height:250px;
	display: table;
	text-align: center;
	background:#fff;
	border-radius:50%;
}

.description span {
	display: block;
	vertical-align: middle;
	padding: 0;
	margin:40px;
	width:175px;
	height:175px;
	overflow:scroll;
	overflow-x: hidden;
}

.description span a {
	text-decoration:none;
}

a.more {
	text-decoration:none;
	color:#ADA7A7;
	display: inline-block;
}

a.more:hover {
	color:#E95D2A;
}

a.previous {
	text-decoration:none;
	color:#E95D2A;
}

a.previous:hover {
	color:#E95D2A;
}


.items {
	position:absolute;
	top:70px;
	right:30px;
	width:280px;
	min-height:400px !important;
	padding: 40px 20px;
	margin: 1em auto 80px;
	background:url('../../img/literature/education/words/talk.bubble.png') 0 0 no-repeat;
	border-radius: 50px;
	display:block;
	box-shadow:none !important;
}

.items::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 90px;
    left: -40px;
    width: 25px;
    height: 25px;
    border: 4px solid #C81E2B;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 50px;
    display: block;
	opacity:0.6;
}

.items::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 110px;
    left: -60px;
    width: 10px;
    height: 10px;
    border: 4px solid #C81E2B;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 25px;
    display: block;
	opacity:0.6;
}


.items  a.item {
	margin-bottom:10px;
	font-size:15px;
	font-weight:bold;
	border-radius:5px;
	padding:5px;
	display:block;
	text-align:left;
}

.items a.item  {
	text-decoration:none;
	color: #000;
}

.items a:hover.item   {
	color:#E95D2A;
}

.breadcrumb {
	background:none;
	margin:0;
}

.breadcrumb li {
	text-shadow:none;
}

.breadcrumb .divider {
	color:#000;
}

.breadcrumb .active {
	color:#000;
}

.breadcrumb a {
	text-decoration:none;
}

.breadcrumb a:hover {
	color:#E95D2A;
}


.item-navigation {
	background:#444;
	padding:10px;
	margin:0;
}

.item-more{
	border-top:1px solid #ccc;
	background:#dfdfdf;
	padding:10px;
	margin-top:20px;
	border-radius:6px;
	z-index:5;
}

.bibliographic {
	padding:20px;
	background:url(../img/break_page.gif) 0 100% no-repeat;
}


#espa {
	margin: auto;
	padding: 0 15px;
	max-width: 1280px;
	text-align: center;
}

#espa p {
	color: #ccc;
}

#espa img {
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 1);
}

#flip {
	position:absolute;
	display:block;
	top:-8px;
	right:8px;
	height:50px;
	width:50px;
	background:url('../../img/literature/education/words/flip.png') 0 0 no-repeat;
	z-index:9999;
}

.bubbleChart {
	width: 1278px;
	height: 670px;
	position: absolute;
	margin-top: 10px;
}
svg {
	z-index: 1000;
}
.title > div {
	color: #ccc;
	font-weight: bold;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	line-height: 1em;
	transition: color 0.25s;
}
.title > div:hover {
	color: #E95D2A;
}
.c0 .title > div {
	color: #333 !important;
	font-size: 12px !important;
	text-shadow: none;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}
.c0 .title > div:hover {
	color: #0083db !important;
}

#game-footer {
	position: absolute;
	bottom: 0;
	left: 20px;
	bottom: 20px;
	z-index: 1010;
}
.items {
	z-index: 1030;
}


#game-footer h1 {
	padding-bottom:20px;
	font-size:52px;
	font-weight:500;
	color:#fafafa;
    text-shadow:
    -1px -1px 3px #777777,
    1px -1px 3px #777777,
    -1px 1px 3px #777777,
    1px 1px 3px #777777;
}






#bubbleChart {
	width:1280px;
}

.node circle {
	cursor: pointer;
}

.node text {
	font: 12px sans-serif;
	pointer-events: none;
	text-anchor: middle;
	line-height:1.3em;
}

.node text.main {
	font: normal 18px sans-serif;
	fill:orange;
}

.node text.sub {
	fill:#fff;
}

line.link {
	fill: none;
	stroke: #888;
	stroke-width: 1.9px;
}


.node circle.more {
	background: url("../img/biggerdot.png") 0 0 no-repeat !important;
}



#info {
	position:absolute;
	top:-30px;
	right:0;
	width:280px;
	height:750px;
	background: #000;
	display:block;
	z-index:2;
    transition-property: visibility, opacity;
    transition-duration: 0.8s, 0.8s;
}

#info.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.8s, 0.8s;
}


#info p, #info h3, #info h4 {
	color:#fff;
}

#info p {
	font-weight:200;
	padding:10px;
}

#info h3 {
	text-align:center;
	font-size:30px;
	line-height:30px;
	margin-bottom:10px;
	background:#22618E;
	padding:10px;
}

#info h3 small {
	font-size:20px;
}


#info ul { padding:10px; }

#info ul li {
	margin-bottom:10px;
	color:#fff;
}

#info ul li a {
	font-size:1.1em;
	color:#3387C4;
	text-decoration:none;
}

text.plus {
	font-size:20px;
}


.bubble-talk {
	position:absolute;
	display:block;
	width:120px;
	height:200px;
	top:80px;
	right:28px;
	text-align:center;
	font-weight:bold;
}

.chromeframe {
	margin:auto;
	text-align:center;
	font-size:1.3em;
}



.help-modal {
	position:absolute;
	top:50px;
	left:110px;
	white-space: nowrap;
}

/* ============================================================================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right {
  position:relative;
  padding:15px 35px;
  margin:0;
  color:#fff;
  background:#075698; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  background:-moz-linear-gradient(#2e88c4, #075698);
  background:-o-linear-gradient(#2e88c4, #075698);
  background:linear-gradient(#2e88c4, #075698);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  
-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4);
  
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-right.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
  background:-moz-linear-gradient(#075698, #2e88c4);
  background:-o-linear-gradient(#075698, #2e88c4);
  background:linear-gradient(#075698, #2e88c4);
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-right.left {
  margin-left:40px;
  /*background:#075698;*/
  background:#fff;
  color:#333;
  font-size:16px;
  font-weight:600;
  border: 2px solid #383838;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-right.right {
  margin-right:40px;
  background:#075698;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right:after {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#075698 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.triangle-right:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#075698 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}


/* Variant : top
------------------------------------------ */

.triangle-right.top:after {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #075698;
}

/* Variant : left
------------------------------------------ */

.triangle-right.left:after {
  top:12px;
  left:-30px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:0 44px 15px 0; /* vary these values to change the angle of the vertex */
  /*border-color:transparent #075698;*/
  border-color:transparent #fff;
}

.triangle-right.left:before {
  top:10px;
  left:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:0 40px 15px 0; /* vary these values to change the angle of the vertex */
  /*border-color:transparent #075698;*/
  border-color:transparent #383838;
}

/* Variant : right
------------------------------------------ */

.triangle-right.right:after {
  top:16px;
  right:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  border-color:transparent #075698 ;
}


/*
.help-modal {
	position:absolute;
	bottom:0;
	left:80px;
	display:block;
	width:150px;
	height:100px;
	background:url("../img/literature/education/words/help_bubble_small.png") 0 0 no-repeat;
}

.help-modal a {
	display:block;
	position:absolute;
	top:63px;
	left:15px;
	text-decoration:none;
	font-size:14px;
	font-weight:400;
}
*/

.fancybox-overlay {
	background:rgba(0,0,0,0.1) !important;
}

.fancybox-opened .fancybox-skin {
    border-radius: 0;
}

.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.1;
}