* {
	margin:0;
}
html,
body {
  height: 100%;
	font-size: 16px;
	line-height: 1.4em;
  /* The html and body elements cannot have any padding or margin. */
}

p {
    line-height: 1.4em;
}

table a:not(.btn), .table a:not(.btn) {
    text-decoration: none;
}

.logo {
    font-size: 50px;
    vertical-align: middle;
    padding-bottom: 10px;
    margin-right: 5px;
}

.logo-small{
    font-size: 25px;
    vertical-align: middle;
    padding-bottom: 5px;
    margin-right: 5px;
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -190px;
}

.push {
  height: 200px;
}

.push-down-160{
	margin-top: 160px;
}

#footer {
	height: auto;
  background-color: #f5f5f5;
  border-top: 1px #333;
	box-shadow: inset 0 1px 1px -1px #333;
	-webkit-box-shadow: inset 0 1px 1px -1px #333;
	background:url(../img/bg/squairy_light.png) repeat;
}

.home-search {
	border: 2px solid #bebebe;
	font-size: 22px;
	height: 36px;
	width: 80% !important;
    float: left;
    margin-top: 2px;
}

.main-search {
    height: 36px;
    margin-top: 2px;
    border: 2px solid lightgrey;
    font-size: 18px;
    float: left;
    width: 85% !important;
}

.main-search:focus, .main-search:active, .home-search:focus, .home-search:active {
    border-color: darkblue;
}

.main-search-button, .home-search-button {
    float: left;
}

.navbar-right {
    margin-top: 6px;
}

.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: white;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}

.panel-heading a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.panel-heading a:hover {
    color: #fff;
}

small {
    color: darkgrey;
}

.cf-term, .last-edit {
    color: darkblue;
    font-weight: 700;
    font-family: "Courier New", monospace;
}

.last-edit {
    margin: 20px 0;
}

.js-play {
    cursor: pointer;
    color: darkblue;
}

.playing {
    color: red !important;
}

.js-play:hover {
    color: #158cba;
}

.idgi-alert {
    border-bottom: 1px dashed white;
    cursor: pointer;
}

.idgi{
    margin-top: 40px;
    display: block;
    clear: both;
}

div.well {
    padding-top: 0 !important;
}

.idgi img {
    width: 240px;
    height: 162px;
    display: block;
    margin: auto;
    -webkit-filter: drop-shadow(1px 1px 1px #222);
    filter: drop-shadow(1px 1px 1px #222);
    margin-bottom: -40px;
    cursor: pointer;
}

/* overrides */

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* CSS3 Bubbles by “phpdude” v1.0 */
.bubble {
    width:auto;
    min-height:36px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    padding:8px 15px;
    border:1px solid rgba(0,0,0,0.25);
    position:relative;
    z-index:8;
    -moz-box-shadow:inset 0px 0px 2px rgba(0,0,0,0.2),0px 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow:inset 0px 0px 2px rgba(0,0,0,0.2),0px 1px 2px rgba(0,0,0,.2);
    text-shadow:1px 1px rgba(255,255,255,.3);
}
.bubble:after {
    content:'';
    border-left:1px solid rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(0,0,0,0.25);
    position:absolute;
    height:13px;
    width:13px;
}
.bubble-left {
    margin:0 0 12px 58px;
}
.bubble-left:after {
    left:-8px;
    bottom:20px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.bubble-right {
    margin:0 58px 12px 0;
}
.bubble-right:after {
    right:-8px;
    bottom:20px;
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
}
.bubble:before {
    padding:0 10px 0 11px;
    content:'';
    position:absolute;
    z-index:-5;
    left:4px;
    top:1px;
    width:inherit;
    height:14px;
    -moz-border-radius:10px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-radius:10px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-radius:10px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.avatar {
    position:absolute;
    width:45px;
    height:45px;
    bottom:4px;
}

.bubble-left .avatar {
    left:-60px;
}
.bubble-right .avatar {
    right:-60px;
}
.avatar img {
    width:45px;
    height:45px;
    border:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border: 1px solid #b2b2b2;
}
.bubble small {
    display:block;
    margin:5px 0 0 0;
    font-style:italic;
    color:rgba(0,0,0,.3);

}
.white,
.white:after {
    background:#fff;
}

.grey,
.grey:after {
    background:#eee;
}


@media all and (-webkit-min-device-pixel-ratio: 2) {
	#footer{
		background:url('../img/bg/squairy_light_@2X.png') repeat;
	}
}

.container {
	max-width: 640px;
}

.container-home {
    margin-top: 5%;
    margin-bottom: 5%;
}
.container-wide {
    max-width: 1120px !important;
}

.container-narrow {
    width: 40%;
/*     max-width: 500px !important; */
    float: left;
}

.alert {
    font-family: "Source Sans Pro";
    font-weight: 700;
}
.container-narrow-right {
    width:45%;
    float: left;
    margin-left: 5%;
    padding-left: 5%;
    border-left: 1px dashed grey;
}

.navbar{
	border-width: 0 0 1px 0;
	padding: 6px;
}

.form-control{
	-webkit-box-shadow:none;
	box-shadow:none;
}

.alert-warning {
	background-color: #fff;
	color: #ff7701;
	border-width:2px;
}
.btn {
	border-width: 2px;
	color: #0000cd;
	display: inline-block;
	margin-bottom: 0;
	margin-top: 1px;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	line-height: 1.2;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 8px;
	text-transform: none;
}

.btn {
	margin-top: 2px !important;
}

.btn-default, .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-edit, .btn-view {
	background-color: white;
}

.btn-default{
	color: darkblue;
}

.btn-warning {
	color:#ff7701;
}

.btn-primary{
	color: darkblue;
	border: 2px solid darkblue;
}

.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus{
	color: white;
	background-color: darkblue !important;
	border: 2px solid darkblue !important;
}

.active {
    color: white;
    background-color: darkblue !important;
}

.btn-view{
	color: #23a127;
	border: 2px solid #23a127;
}

.btn-view:hover{
	color: white;
	background-color: #23a127;
	border: 2px solid #23a127;
}

.btn-edit {
	color: #663399;
	border: 2px solid #663399;
}

.btn-edit:hover {
	color: white;
	background-color: #663399;
	border: 2px solid #663399;
}

.btn-success:hover, a.btn-success:hover {
}

.btn-letter {
	padding: 4px 8px 4px;
	font-size: 16px;
	color: darkblue;
	border: 2px solid darkblue;
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	line-height: 1.2;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.btn-letter-off {
	padding: 4px 8px 4px;
	font-size: 16px;
	border: 2px solid grey;
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	line-height: 1.2;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.btn-letter:hover, .btn-letter-off:hover {
	border: 2px solid darkblue;
}

.btn:hover{
	border-bottom-width: 2px;
}
#search_button {
	display: none;
}

.navbar-nav>li>a, .navbar-nav>li>a:hover{
	padding: 6px 16px;
	font-size: 14px;
}

.navbar-nav>li>a, .navbar-nav>li>a:hover{
margin-top:8px;
}

.navbar-collapse {
	border-top:0;
}
@media (min-width: 768px ){
	.navbar-form .form-control {
		width: 190px;
	}
	#search_button{
		display: inline;
		margin-left:6px;
	}
}

ol.list {
	margin: 20px 0 0 0;
	padding: 10px 0 0 26px;
}

ol.list li {
	margin-bottom: 30px;
	max-width: 560px;
}

ul.list {
	margin: 20px 0 0 0;
	padding: 0;
}

ul.list li {
	list-style: none;
	margin-bottom: 30px;
	max-width: 560px;
}

h1,h3,h4 {
	font-weight: 700;
}

h2 {
	font-weight: 400;
}
h2,h3,h4 {
	margin-top: 22px;
	margin-bottom: 0;
}

h3 {
	line-height:24px;
}

h4 {
	font-size: 19px;
    margin-bottom: 0.3em;
}

a.term { font-weight: 700; }
a { color: darkblue; font-weight: 400; }

a:hover, a:active { color: dodgerblue; }

a.slim {
	font-weight: 400;
}

.alpha-left {
	float: left;
	padding: 0;
	line-height: 30px;
}

.alpha-right {
	float: left;
	padding: 0;
	line-height: 30px;
}

.lighter {
	color: darkgray;
}

h3 > em {
	font-weight: 400;
    line-height: 1.4em;
	display: block;
}

li > br {
	margin-bottom: 6px;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

	.push-down-160 {
		margin-top: 0;
	}

	.alpha-left {
		clear: both;
		text-align: center;
	}

	.alpha-left a{
		padding:2px;
	}

	.alpha-right {
		clear: both;
		text-align: center;
		padding: 2px;
	}


    .idgi img {
        margin-right: 0;
        margin-top: 20px;
    }
}