body {
	font-family: "Source Sans Pro";
	background-color: #DDDDDD;
}

:focus {
	outline: 0;
}

.title {
	background-color: black;
	color: #f7f7f7;
}

.title, .title h2, .footer, .footer h2 {
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
}

#html5 {
	background-color: black;
}

#html5 img {
	min-width: 50px;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.team_cthulhu {
	color: #f1c40f;
	background-color: #1c7d45;
}

.team_cthulhu img {
	margin-left: 20px;
}

.team_cthulhu h2 {
	font-family: Impact, Arial;
	text-shadow: 3px 3px #000000;
	font-size: 28pt;
	font-weight: normal;
	font-style: italic;
	text-decoration: none;
}

.slider {
	display: inline-block;
	width: 100px;
	margin-left: 10px;
	margin-right: 10px;
}

#output, #output2 {
/*
	background-color: #423e45;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
	color: #f7f7f7;
	*/
	color: #333333;
	padding-left: 0;
	padding-right: 0;
	border: solid 1px #333333;
/*	margin-left: -15px;
	margin-right: -15px; */
}

.character {
	display: block;
	color: #333333;
	background-color: #f7f7f7;
	padding: 4px;
	border-radius: 4px;
	width: auto;
	margin-right: 20px;
	margin-bottom: 10px;
}

.char1combat, .char2combat {
	width: 100%;
	padding-bottom: 5px;
	vertical-align: top;
	font-size: 10pt;
	display: inline-block;
	padding: 4px;
	border-radius: 4px;
	color: #333333;
	background-color: #f7f7f7;
}

/* columns of same height styles
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}
*/
/*
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}
*/


.accordion-group {
	margin-bottom: 0px;
	border:0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.accordion-heading .glyphicon, button .glyphicon {
	padding-right: 10px;
}

.accordion-heading {
	/*height: 55px; */
	padding: 10px;
	border-top: 1px solid #717171; /* inner stroke */
	border-bottom: 1px solid #5A5A5A; /* inner stroke */
	background-color: #353535; /* layer fill content */
	background-image: -moz-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
	background-image: -o-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
	background-image: linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
	list-style-type:none;
	cursor: pointer;
}

.accordion-heading  a {
	font-size: 14pt;
	color: #f7f7f7; /* text color */
	text-shadow: 0 1px 0 #3b3b3b; /* drop shadow */
	text-decoration:none;
	font-weight:bold;
}

.accordion-heading  a:hover{
	color:#ccc
}

.accordion-heading .active {
	width: 182px;
	height: 34px;
	border: 1px solid #5b5b5b; /* inner stroke */
	background-color: #353535; /* layer fill content */
	background-image: -moz-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
	background-image: -o-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
	background-image: linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
}

.accordion-inner {
	margin-left: 20px;
	margin-bottom: 10px;
}

input {
	color: #333333;
	margin-left: 10px;
}

button {
	border: 0;
	border-radius: 4px;
	font-weight: bold;
	padding: 0.3em 0.6em;
	font-size: 12pt !important;
	text-transform: uppercase;
	color: #f7f7f7;
	margin: 0px 2px;
}

button a:hover, button a:link, button a:visited, button a:active {
	color: #f7f7f7;
	text-decoration: none;
}

button a {
	color: #f7f7f7;
}

.accordion-heading .button-accordion {
	position: absolute;
	right: 5px;
	/* float: right; */
	padding: 0.4em 1.0em;
	margin-top: -4px;
}

.button-normal {
	background-color: #3498db;
	margin-bottom: 5px;
}

.button-normal:hover {
	background-color: #4aa3df
}

.button-green {
	background-color: #2ecc71;
	margin-bottom: 5px;
}

.button-green:hover {
	background-color: #40d47e;
}

.button-red {
	background-color: #e74c3c;
	margin-bottom: 5px;
}

.button-red:hover {
	background-color: #ea6153;
}

input[type='checkbox'] {
	width: 20px;
	height: 20px;
	margin-left: 10px;
	vertical-align: middle;
}


.name,.success,.myturn,.failure,.chain {
	font-weight: bold;
}

.reset {
	font-size: 14pt;
}

.character .trait {
	font-size: 12pt;
	padding-right: 8px;
}

.character .ability {
	padding-right: 8px;
}

.character .aspect {
	padding-right: 8px;
}

.character .combo.tagged {
	background-color: #8e44ad;
	color: #f7f7f7;
}

.character .offense.tagged, .character .consequence.tagged {
	background-color: #e74c3c;
	color: #f7f7f7;
}

.character .heal.tagged {
	background-color: #27ae60;
	color: #f7f7f7;
}

.character .defense.tagged {
	background-color: #2980b9;
	color: #f7f7f7;
}

.character .misc.tagged {
	background-color: #333333;
	color: #f7f7f7;
}

.combo {
	color: #8e44ad;
}

.offense, .consequence {
	color: #e74c3c;
}

.heal {
	color: #27ae60;
}

.defense {
	color: #2980b9;
}

.dead .aspect.combo, .dead .trait.combo, .dead .ability.combo {
	color: #e74c3c;
	background-color: white;
}

.dead .aspect.offense, .dead .trait.offense, .dead .ability.offense, .dead .consequence {
	color: #e74c3c;
	background-color: white;
}

.dead .aspect.heal, .dead .trait.heal, .dead .ability.heal {
	color: #e74c3c;
	background-color: white;
}

.dead .aspect.defense, .dead .trait.defense, .dead .ability.defense {
	color: #e74c3c;
	background-color: white;
}

/* only indent ability in the character display */
.character .ability {
	padding-left: 8px;
	padding-right: 8px;
	font-size: 11pt;
}

.dead {
	color: #e74c3c;
}

.creation {
	color: #2ecc71;
}

	.death {
	color: #e74c3c;
	font-size: 18pt;
	font-weight: bold;
}

.advantage {
	color: #3498db;
	font-style: italic;
}

.expired {
	font-style: italic;
}

.paid {
	color: #2ecc71;
}

.finesse {
	color: #e74c3c;
	font-style: italic;
}

.damage,.lethal,.reflect {
	color: #e74c3c;
	font-weight: bold;
}

.power {
	color: #3498db;
	font-style: italic;
}

.wound {
	color: #e74c3c;
	font-weight: bold;
}

.damaged {
	text-decoration: line-through;
}

.dice {
	width: 48px;
	height: 48px;
	margin-left: -8px;
	margin-top: -8px;
	vertical-align: middle;
}

.tooltip {
  text-align: center;
  color: black;
  display: none;
  position: absolute;
}

#turnShown, #costAmount {
	width: 30px;
}

#yaml {
	border: solid 1px;
	padding: 4px;
	border-radius: 4px;
	display: block;
	width: 300px;
	height: 400px;
	margin-top: 10px;
}

.deathmatch {
	font-size: 14pt;
}

#combatWrapper {
	background-color: black;
	min-height: 50px;
	padding-top: 6px;
	color: #f7f7f7;
}

#combatGuts {
	margin-left: 0;
	margin-right: 0;
}

#combat {
/*
	background-color: #423e45;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
	*/
/*	width: 760px ;
	margin-top: 20px;
	margin-left: auto ;
	margin-right: auto ;
	padding: 20px;
	margin-bottom: 100px; */
	text-align: left;
	font-size: 11pt;
	color: #f7f7f7;
}

.combathead {
	border-top: 1px solid #f7f7f7;
	border-bottom: 1px solid #f7f7f7;
/*	border-top: 1px solid #717171;
	border-bottom: 1px solid #5A5A5A; */
}

.turn {
	padding-bottom: 10px;
}