/*
 Theme Name:   Gothick Hayden
 Theme URI:    http://gothick.org.uk
 Description:  Custom child of ThemeTrust Hayden Theme.
 Author:       Matt Gibson
 Author URI:   http://gothick.org.uk
 Template:     hayden
 Version:      1.0.0
 Tags: portfolio, responsive, blog, clean, minimal, white, two-columns, threaded-comments, translation-ready, custom-menus
 Text Domain:  gothick-hayden
*/

@import url("../hayden/style.css");

/* 
  Re-override weird thing in CSS "reset" for Hayden theme that turns
  img into a block element, which isn't really a reset, is it? No, it's
  more of a fuck-it-up. 
  
  http://themetrust.com/support-forums/topic.php?id=22393

*/
#content img {
  display: inline-block;
}

/* Definition list styles for Fave Mac Apps */
dd {
  padding-left: 16px;
  margin-top: 8px;
}

dt {
   margin-top: 16px;
}

dl {
  margin-bottom: 12px;
}

/* Little bit of shadow underneath our white menu text so they still stand
   out against a light background */
   
#mainNav ul a {
  text-shadow: 0px 0px 2px #222;
  color: rgba(255,255,255, .7);
}

/* Small next/previous post links (they're custom to our child theme, too.) */
.post-next-prev {
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 12px 0px;
  text-align: center;
  font-size: 80%;
}

/* Footnotes from Scrivener exports */
.footnote {
  /* http://stackoverflow.com/questions/501671/superscript-in-css-only */
  position: relative; 
  top: -0.5em; 
  font-size: 80%;
}

/* 
  Nice table styles from 
    http://johnsardine.com/freebies/dl-html-css/simple-little-tab/ 
*/
table a:link {
	color: #666;
	font-weight: bold;
	text-decoration:none;
}
table a:visited {
	color: #999999;
	font-weight:bold;
	text-decoration:none;
}
table a:active,
table a:hover {
	color: #bd5a35;
	text-decoration:underline;
}
table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	margin:20px;
	border:#ccc 1px solid;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}
table th {
	padding:21px 25px 22px 25px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;

	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child {
	text-align: left;
	padding-left:20px;
}
table tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table tr {
	text-align: center;
	padding-left:20px;
}
table td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
table td {
	padding:18px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;

	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td {
	border-bottom:0;
}
table tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
table tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}

/*
  Marginless images for blog posts where I want a column of seamless images, no gaps. 
*/
#content .marginless img.alignleft,
#content .marginless img.alignright,
#content .marginless img.aligncenter {
	margin-bottom: 0px;
}

small {
  font-size: 0.8em;
}