/*
Boxers  CSS
Author: Jasidog http://jasidog.com/
Theme for the boxers subsite of Jasidog.com.
Version: 1.0
License: GNU General Public License
*/

/* -----------------------------
Google's font api
------------------------------ */

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic|Varela);
/* -----------------------------------------
Reset default browser CSS. Based on work by Eric Meyer: 
http://meyerweb.com/eric/tools/css/reset/index.html
------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* -------------------------------------------*/

/* Assistive text */
#accessibility {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
#accessibility a.assistive-text:active,
#accessibility a.assistive-text:focus {
	background: #eee;
	border-bottom: 1px solid #ddd;
	color: #1982d1;
	clip: auto !important;
	font-size: 12px;
	position: absolute;
	text-decoration: underline;
	top: 0;
	left: 7.6%;
}

html {
min-height:100%;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding: 0;
margin: 0;
list-style: none;
} 
body  {
min-height: 100%;
margin: 0;
padding : 0;
text-align : center;
padding : 0;
color : #eaeaea;
font-family: 'Ubuntu', arial, serif;
background: black;
}
#header h1 {
  font-size: 76px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 0 0 4px #CCCCCC, 0px 8px 4px #000000;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -5px;
  word-spacing: 0em;
  line-height: 1em;
  margin: 34px 0 0 -9px;
}
#header h1 a, 
.article h2 a {
	color: #ccc;
}
#header h1 a:hover, 
article h2 a:hover, 
.article h2 a:hover  {
	color: white;
}
article h1, 
.article h1 {
padding: 7px 10px 6px;
color: #4C88AD;
font-size: 40px;
font-weight: 300;
letter-spacing: -2px;
margin: 1px 0;
text-shadow: 0 -2px 0 lightblue, 0 2px 0 black;
text-transform: uppercase;
}
article h1 a, 
.article h1 a {
color: #617378;
}
#header h2 {
text-align: center;
font-family: 'Varela',sans-serif;
font-size: 13px;
font-weight: 800;
margin: 0 0 30px 0;
text-transform: uppercase;
letter-spacing: 8px;
color: #4C88AD;
text-shadow: 0 -1px 0 lightblue, 0 2px 0 black;
}
h2 { 
margin : 0;   
}
p {
font-size : 16px;
margin : 0;
text-indent : 0;
padding: 4px 0;
color : #ccc;
}
.article-body p {
padding: 8px 0;
line-height: 1.6em;
letter-spacing: 0.4px;
font-family: 'Varela',sans-serif;
}
article footer, 
.article .footer {
font-family: 'Ubuntu', arial, serif;
margin: 0;
}
a:link {
color : #4C88AD;
text-decoration : none;
}
a:visited {
color : orange;
text-decoration : none;
}
a:hover {
text-decoration : none;
color : purple;
}
img {
border : 0 none ;
margin : 0;
}
input , textarea , select {
background-color : #D3E3E7;
border : 1px solid #A2BFC8;
margin : 0;
padding : 7px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
border-radius: 3px;
width: 100%;
font-size: 14px;
font-family: 'Varela',sans-serif;
line-height: 1.5em;
letter-spacing: 0.4px;
}
fieldset div{
margin:0 7px 0 0;
}

input:focus , textarea:focus , select:focus{
border-color: #cadetBlue;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
background: #eaeaea;
}
label {
display: block;
font-family: 'Ubuntu', arial, serif;
font-weight: 800;
font-size: 20px;
margin: 2ex 0;
padding: 0;
letter-spacing: -1.5px;
color: #617378;
}
#header {
background: url("images/boxy.jpg") no-repeat scroll 0 0 #000000;
padding: 20px 0 10px ;
}
#hide-tab-top {
background: #333;
height: 10px;
width: 100%;
z-index: 2;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
position: relative;
border-bottom: 2px solid #444;
}

/* ---------------------------------------------
Nav toggle stuff
-------------------------------------------- */

#nav-toggle {
position: absolute;
background: #333;
min-width: 100px;
margin: 10px -60px 0 0;
right: 50%;
font-weight: 800;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
border: 2px solid #555;
padding: 7px 12px 7px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
color: #ccc;
float: left;
text-transform: uppercase;
border-color: #444;
border-top: #333;
z-index: 9;
}
#nav-toggle:hover, 
#nav-toggle:active {
border-color: #555555;
border-top: #333;
background-position: bottom center;
z-index: 3;
color: #4C88AD;
}

/* ---------------------------------------------
Nav stuff
-------------------------------------------- */

#nav-container ul, 
#nav-container {
position: relative;
margin: 0 auto;
background: #333;
}
#nav-container ul {
margin : 0 5px;
padding:  36px 0 0;
text-align: center;
}
#nav-container ul li {
margin: 0;
padding: 0;
display: inline-block;
list-style: none;
font-size: 16px;
font-weight: 800;
text-shadow: 0 1px 0 #000;
position: relative;
}
#nav-container ul li a , 
#toggle-nav {
background: #000;
border: 2px solid #555;
padding: 7px 12px 7px;
margin: 0 14px 26px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
color: #ccc;
float: left;
min-width: 70px;
text-transform: uppercase;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#nav-container ul li a:hover,
#nav-container ul li a:active, 
#main li.main a, 
#muffin li.muffin a, 
#poppy li.poppy a, 
#troy li.troy a, 
#lottie li.lottie a, 
#jason li.jason a, 
#lilly li.lilly a, 
#murphy li.murphy a, 
#betty li.betty a, 
#rosie li.rosie a, 
#shadow li.shadow a, 
#talk li.talk a, 
#links li.links a    {
text-decoration: none;
color: #4C88AD;
border-color: #666;
background-position: bottom center;
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
position: relative;
z-index: 3;
}

/* ---------------------------------------------
Nav stuff ends
-------------------------------------------- */

.main-column {
margin : 20px 8px;
}
#content {
max-width: 800px;
margin: 0 auto;
background: #333;
padding : 0;
text-align : left;
border : 2px solid #444;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
overflow: auto;
}
article h2, 
article .subtitle, 
.article h2, 
.article .subtitle {
display: block;
font-family: 'Varela',sans-serif;
font-size : 16px;
padding: 9px 10px 10px;
margin: 8px 0;
background: #444; /* Old browsers */
border: 1px solid #222;
border-width: 1px 0;
border-radius: 3px;
color : #fff;
text-shadow: 0 2px 0 #000;
text-transform: uppercase;
line-height: 1.6em;
font-weight: 400;
/* hack to smooth out some web fonts in chrome perhaps other windows webkits too*/
 -webkit-transform: rotate(-0.0000000001deg);
}
article h2 a ,
.article h2 a {
background: #4C88AD;
display: block;
border: 2px solid lightblue;
padding: 5px 20px;
margin: -4px -5px;
border-radius: 2px;
}
article h2 a:hover ,
article h2 a:active, 
.article h2 a:hover ,
.article h2 a:active {
background: orange;
border-color: wheat;
}
.article-body {
padding : 10px;
margin: 1px 0;
overflow: auto;
}

article, 
.article {
border: 1px solid #444;
border-width: 1px 0;
margin: 0 0 2ex;
padding: 8px 0;
overflow: auto;
}
article footer a, 
.article .footer a, 
.button {
background: #d7e6d1; /* Old browsers */
background: -moz-linear-gradient(top, #d7e6d1 0%, #9bbf8d 90%, #d7e6d1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e6d1), color-stop(90%,#9bbf8d), color-stop(100%,#d7e6d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d7e6d1 0%,#9bbf8d 90%,#d7e6d1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d7e6d1 0%,#9bbf8d 90%,#d7e6d1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d7e6d1 0%,#9bbf8d 90%,#d7e6d1 100%); /* IE10+ */
background: linear-gradient(top, #d7e6d1 0%,#9bbf8d 90%,#d7e6d1 100%); /* W3C */
border: 1px solid green;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
padding: 2px 8px 3px;
text-transform: uppercase;
text-shadow: 0 -2px 0 white;
float: right;
color: green;
font-family: 'Ubuntu',arial,serif;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.4px;
line-height: 1.6em;
}
article footer a:hover,
article footer a:active, 
.article .footer a:hover,
.article .footer a:active,
.button:hover, 
.button:focus {
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
background-image: #d6e6e7; /* Old browsers */
background-image: -moz-linear-gradient(top, #d6e6e7 0%, #a4c7d3 90%, #d6e6e7 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e6e7), color-stop(90%,#a4c7d3), color-stop(100%,#d6e6e7)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #d6e6e7 0%,#a4c7d3 90%,#d6e6e7 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #d6e6e7 0%,#a4c7d3 90%,#d6e6e7 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #d6e6e7 0%,#a4c7d3 90%,#d6e6e7 100%); /* IE10+ */
background-image: linear-gradient(top, #d6e6e7 0%,#a4c7d3 90%,#d6e6e7 100%); /* W3C */
color: #2E8989;
z-index: 3;
}

footer, #footer {
margin: 4ex 0 2ex;
}

h1#page-title {
color: #A2BFC8;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}


/* In Article Lists */

article ul, 
article ol, 
.article ul, 
.article ol {
margin: 20px 0 20px 20px;
font-size: 14px;
letter-spacing: 0.4px;
line-height: 1.6em;
font-family: 'Varela',sans-serif;
}
ol li, 
article ol li, 
.article ol li {
list-style: decimal-leading-zero;
margin: 14px 0;
padding: 0;
}
article ul li, 
.article ul li {
/*--background:url("/images/list.png") no-repeat scroll 0 4.5px transparent;--*/
margin: 14px 0;
padding: 0 0 0 30px;
}

/* ------------------------
Links List
-------------------------*/

dl, dt, dd {
margin: 0;
padding: 0;
}
dl {
padding: 30px 10px;
}
.article dt  a {
background: #4C88AD;
border: 2px solid lightblue;
color: #eaeaea;
border-width: 0 0 2px 0;
display: block;
padding: 10px;
text-align: right;
text-transform: uppercase;
letter-spacing: 3px;
}
dt a:hover , 
dt a:active {
background: orange;
border-color: wheat;
color: wheat;
}
dd {
padding: 25px 0;
}

/* ----------------------
Gallery tumbnails
--------------------- */

#Gallery {
text-align: center;
margin: 0 0 0 0;
}
#Gallery li {
display: inline-block;
padding: 0 0 0 0;
}

#Gallery li a {
border: 4px solid #555;
display: block;
margin: 5px 16px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
max-height: 100px;
}
#Gallery li a:hover , 
#Gallery li a:active {
border-color: #ccc;
transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
-moz-transform:rotate(30deg);
/* --
Removed due to weird chrome glitches
webkit-transform:rotate(30deg);
--*/
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform:rotate(30deg);
}

/*------------------------
Front page recent talk topics 
-------------------------------*/

#recent-topics ul {
border: 1px solid #777;
background: #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 20px 5px;
padding: 0px 4px;
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
#recent-topics ul li {
background: none;
margin: 0;
padding: 0;
}
#recent-topics li a {
background: url("images/recent-topics-bullit.png") no-repeat scroll 10px 15px #444;
border: 1px solid #777;
border-width: 1px;
display: block;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
text-shadow: 0 2px 0 rgba(0, 0, 0, 1.0);
display: block;
margin: 4px 0;
padding: 8px 8px 9px 34px;
color: #ccc;
/* hack to smooth out web font in chrome perhaps other windows webkits */
 -webkit-transform: rotate(-0.0000000001deg);
}
#recent-topics li:nth-child(even) a {
background-color: #555;
}
#recent-topics li a:hover, 
#recent-topics li a:active  {
background-color: #000;
}
.desc {
border: 1px solid #444444;
border-radius: 4px;
background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #222222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333333 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333333 0%,#222222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #333333 0%,#222222 100%); /* IE10+ */
background: linear-gradient(to bottom, #333333 0%,#222222 100%); /* W3C */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.desc p {
font-size: 12px;
}

/* ---------------------------------------------
For larger screens
-------------------------------------------- */

@media (min-width: 1166px) {

	#nav-container ul li {
	font-size 14px;
	}
	#nav-container ul li a {
	margin: 0 6px 20px;
	padding: 7px 6px;
	}
	article ul li, .article ul li {
	padding: 0 0 0 0;
	}

}

@media (min-width: 804px) {

	.desc {
	width: 195px;
	margin: 20px 0 0;
	text-align: center;
	transparent;
	}
	#Gallery {
	float: left;
	width: 580px;
	}
	.gallery-article {
	background: #333333; /* Old browsers */
	background: -moz-linear-gradient(left, #333333 0%, #333333 72.7%, #444444 72.8%, #222222 73.0%, #222222 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(72.7%,#333333), color-stop(72.8%,#444444), color-stop(72.9%,#222222), color-stop(100%,#222222)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #333333 0%,#333333 72.7%,#444444 72.8%,#222222 72.9%,#222222 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #333333 0%,#333333 72.7%,#444444 72.8%,#222222 72.9%,#222222 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #333333 0%,#333333 72.7%,#444444 72.8%,#222222 72.9%,#222222 100%); /* IE10+ */
	background: linear-gradient(to right, #333333 0%,#333333 72.7%,#444444 72.8%,#222222 72.9%,#222222 100%); /* W3C */
	}
	
}

/* ------------------------------------------
  NECESSARY STYLES FOR RESPONSIVE NAV
--------------------------------------------- */

.js #nav-container {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav-container.opened {
  max-height: 9999px;
}


/* ------------------------
Nav larger


@media screen and (min-width: 40em) {

	#nav-container ul, 
	#nav-container {
	position: relative;
	margin: 0 auto;
	background: #333;
	}
	#nav-container ul {
	margin : 0 5px;
	padding:  36px 0 0;
	text-align: center;
	}
	#nav-container ul li {
	margin: 0;
	padding: 0;
	display: inline-block;
	list-style: none;
	font-size: 16px;
	font-weight: 800;
	text-shadow: 0 1px 0 #000;
	position: relative;
width: auto;
	}
	#nav-container ul li a {
	background: #000;
	border: 2px solid #555;
	padding: 7px 12px 7px;
	margin: 0 14px 26px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	color: #ccc;
	float: left;
	min-width: 70px;
	text-transform: uppercase;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	}

	#nav-container ul li a:hover,
	#nav-container ul li a:active, 
	#main li.main a, 
	#muffin li.muffin a, 
	#poppy li.poppy a, 
	#troy li.troy a, 
	#lottie li.lottie a, 
	#jason li.jason a, 
	#lilly li.lilly a, 
	#murphy li.murphy a, 
	#betty li.betty a, 
	#rosie li.rosie a, 
	#talk li.talk a, 
	#links li.links a    {
	text-decoration: none;
	color: #4C88AD;
	border-color: #666;
	background-position: bottom center;
	-webkit-transition-duration: 0.7s;
	-moz-transition-duration: 0.7s;
	-o-transition-duration: 0.7s;
	transition-duration: 0.7s;
	position: relative;
	z-index: 3;
	}
}
------------- */