@charset "utf-8";

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 _____   _ __   ___ _____   __   _  __  _  __   _ __   _    ___     ___   ___
/_  _/  /// /  / _//_  _/  / /  / |/ / | |/,'  /// / ,' \  / o |  ,' _/  / _/
 / /   / ` /  / _/  / /   / /  / || /  | ,'   / ` / / o | /  ,'  _\ `.  / _/ 
/_/   /_n_/  /___/ /_/   /_/  /_/|_/  /_/    /_n_/  |_,' /_/`_\ /___,' /___/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

ul, dl {
    list-style:none;
    width:100%;
}

a, a:visited {
	color: #323232;
	text-decoration:none;
	background: none;
}

a:hover { color: #EACF42; }

html,body {margin:0;padding:0;} 

.clearer {
	clear: both;
}

/* ~~~~~~~~~~~~~~ Responsive Resets  ~~~~~~~~~~~~~~ */ 

@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img,
audio,
video,
canvas {
  max-width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

thetinyhorse.com
Designer: Jay Roberts
Developers: Jay Roberts
Grid System developed by: Shaun Fox & Brendan Pittman

Yellow #EACF42
Black #323232

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


body {
	background-color: #FFFFFF;
	color: #888888;
	font-family: "ff-tisa-web-pro",serif; 	
	font-weight: 400;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
}

.container {
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0 12px;
}

p {
	font-size: .875em; /* 14/16 */
	font-family: "ff-tisa-web-pro",serif; 	
	line-height: 22px;
}


@font-face {
    font-family: 'DINCondMediumRegular';
    src: url('../fonts/din_condensed_medium.eot');
    src: url('../fonts/din_condensed_medium.eot') format('embedded-opentype'),
         url('../fonts/din_condensed_medium.woff') format('woff'),
         url('../fonts/din_condensed_medium.ttf') format('truetype'),
         url('../fonts/din_condensed_medium.svg#DINCondMediumRegular') format('svg');
}


h1, h2, h3, h4 {
	font-weight: 400;
	font-family: 'DINCondMediumRegular', "din-condensed-web" ,sans-serif;
	text-transform: uppercase;
	color: #323232;
}

h5, h6 { font-weight: 400; }

h1 { font-size: 2.25em; } /* 36/16 */

h2 { font-size: 2em; } /* 32/16 */

h3 { font-size: 1.5625em; } /* 25/16 */

h4 { font-size: 1.125em; } /* 18/16 */

h5 { font-size: .875em; } /* 14/16 */

h6 { font-size: .75em; } /* 12/16 */

a {
 
}

a:hover {

}

img {
    max-width:100%;
    height: auto;  
}




/* ~~~~~~~~~~~~~~ Selection  ~~~~~~~~~~~~~~ */

::-moz-selection 
{
	color: #bfbfbf;
}

::selection 
{
	color: #bfbfbf;
}

::-webkit-selection 
{
	color: #bfbfbf;
}

/* ~~~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~ */

header {
	text-align: center;
	margin: 20px 0 20px 0;
	z-index: 3; 
	border-bottom: 1px solid #DBD9D4;	
}

a.logo {
    width: 75px;
    height: 71px;
    background: url(../images/tth.gif) ;
    background-size: 75px 71px;
    display: block;
    text-indent: -9999px;
    margin: 0 auto;
}

a.logo {}

nav.menu {
	padding-bottom: 20px;
}

nav.menu ul {
	text-align: center;
}

nav.menu ul li {
	display: inline;
	padding: 0 8px;
}

nav.menu ul li a {
	font: 400 1.0625em 'DINCondMediumRegular', "din-condensed-web" ,sans-serif; /* 17/16 */
	text-transform: uppercase;
	color: #323232;
}

nav.menu ul li a:hover {
	color: #888888;
}


nav.menu ul li a.active {
	border-bottom: 2px solid #eacf42;
	color: #323232;
}


/* ~~~~~~~~~~~~~~ Footer ~~~~~~~~~~~~~~ */


footer {
	text-align: center;
	margin-top:10px;
	margin-bottom: 30px;
	border-top: 1px solid #DBD9D4;
	padding-top: 20px;
}

footer ul {
	text-align: center;
}

footer p {
    margin: 0px;
}

footer ul li {
	display: inline;
	padding: 0 8px;
}

footer ul li a {
	font-size: .8125em; /* 13/16 */
}


/*~~~~~~~~~~~ Project List ~~~~~~~~~~~~~~*/


/* ~~ project list active state, title ~ */
nav.projects ul li a.active {

}

nav.projects {
	-webkit-column-count: 2;
	-moz-column-count: 2;
}


nav.projects ul li {
	padding: 10px 0 10px 0;
	text-align: center;
}


/* ~~~~~~~~~~~~~~ Projects  ~~~~~~~~~~~~~~ */ 

.project-nav {
	border-top: 1px solid #DBD9D4;
	padding: 15px 0;
}

.gallery {
	text-align: center;
}

a.buy {
	color: #888888;
	background: url(../images/cursor.png) no-repeat;
	background-position: right top;
	background-size: 20px 40px;
	height: 20px;
	display: inline-block;
	padding-right: 30px;
}

a.buy:hover {
	color: #323232;
	background-position: bottom right;
}


.fourcol.fixed {
	position: relative;
}





/* ~~~~~~~~~~~~~~ Blog  ~~~~~~~~~~~~~~ */ 


.blog article, .blogarticle article {
	max-width: 700px;
	margin: 0 auto;
}

.blog article, .blogarticle article {
	margin-bottom: 100px;
}

.blog p, .blogarticle p {
	font-size: 1em; /* 16/16 */
	line-height: 27px;	
}

blockquote {
	font-size: 1.375em; /* 30/16 */
	color: #888888;
	font-weight: 400;
	text-align: left;
	border-left: 2px solid #EACF42;
	margin: 40px 0px;
	padding-left: 25px;
}

.blog blockquote p, .blogarticle blockquote p { line-height: 30px; }

.blog h3 a:hover {
	color: #888888;
}


.blog h5, .blogarticle h5 {
	color: #BBBBBB;
}

.blog article img, .blogarticle article img {
	display: block;
	margin-left: auto;
	margin-right: auto
}

article ul {
	list-style: circle;
	padding-left: 22px;
}

article ol {
	padding-left: 22px;
}

.pagination {
	padding-bottom: 20px;
}

.prev {
	float: left;
	background: url(../images/prev.png) no-repeat ;
	background-position: left center;
	background-size: 13px 13px;
	padding-left: 22px;
}

.next {
	float: right;
	background: url(../images/next.png) no-repeat;
	background-position: right center;
	background-size: 13px 13px;
	padding-right: 22px;
}

a.next, a.prev {
	font-family: "proxima-nova",sans-serif;
	font-size: .6875em;
	color:#323232;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 800;
}

a.next:hover, a.prev:hover {
	color: #888888;
}


/* ~~~~~~~~~~~~~~ About  ~~~~~~~~~~~~~~ */ 


.about { text-align: center; }

.about p, .about h3 { text-align: left; }

.message { margin: 0 auto; padding: 40px 0 20px 0; max-width: 730px;} 


/* ~~~~~~~~~~~~~~ 404  ~~~~~~~~~~~~~~ */ 

.message {
	text-align: center;
}


/* ~~~~~~~~~~~~~~ Shop  ~~~~~~~~~~~~~~ */ 


ul.products li {
	margin: 60px 0;
}

.shop img, .blogarticle article img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.shop img {
	max-width: 600px;
	width: 100%;
}

.cart-counter {
	display: none;
}


a.cartt {
	background: url(../images/cart.png) no-repeat ;
	background-position: left top;
	background-size: 20px 34px;
	height: 17px;
	display: inline-block;
	padding: 0 0 0 25px;
}

a.cartt:hover {
	color: #323232;
	background-position: left bottom;
}

.product-price { font-size: 1em; }  /* 18/16 */

.shipping-info {
	padding-top: 20px;
}

button#product-addtocart, button.checkout-btn {
	background: #FFFFFF;
	border-top: 2px solid #323232;
	border-left: 2px solid #323232;
	border-right: 2px solid #323232;
	border-bottom: 2px solid #323232;
	color: #323232;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 800;
	padding: 6px 14px;
	margin: 10px 0;
}

button.checkout-btn {
	float: right;
}

button#product-addtocart:hover, button.checkout-btn:hover {
	border-top: 2px solid #7f7f7f;
	border-left: 2px solid #7f7f7f;
	border-right: 2px solid #7f7f7f;
	border-bottom: 2px solid #7f7f7f;
	color: #7f7f7f;
	cursor: pointer;
}

button#product-addtocart:active, button.checkout-btn:active {
	position: relative;
	top: 1px;
} 

button#product-addtocart:focus, button.checkout-btn:focus, #cart-footer .update-btn {
	outline: 0;
}

a.back {
	font-family: "proxima-nova",sans-serif;
	font-size: .6875em;
	color:#9F9F9F;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 800;
	background: url(../images/prev.png) no-repeat ;
	background-position: left center;
	background-size: 13px 13px;
	padding-left: 22px;		
}

a.back:hover {
	color: #888888;
}

ul.product li {
	margin-bottom: 30px;
}

.back {
	font-size: ; 
}

/* cart */

#cart-content {
	max-width: 700px;
	margin: 40px auto;
}

#cart-table {
	width: 100%;
	text-align: center;
}

#cart-head th {
	border-bottom: 1px solid #DBD9D4;
	padding: 10px 0;
	font-size: .75em; /* 12/16 */
	font-weight: 400;
}


table.cart tbody td {
	border-left: 1px solid #DBD9D4;
}

#cart-body th {
	padding: 8px 0;
}

table.cart tbody input {
	width: 30px;
	height: 25px;
	background: white;
	border: 1px solid #DBD9D4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	color: #101010;
	text-align: center;	
}



a.remove {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(../images/remove.png) no-repeat ;
	background-position: right top;
	background-size: 10px 20px;
	font-size: 0;
	text-indent: 101%;
	white-space: nowrap;
	padding: 0px 3px;
	vertical-align: middle;
}

a.remove:hover {
	background-position: right bottom;
}

#cart-footer { text-align: left; padding-top: 20px; }


.options {
	font-family: "ff-tisa-web-pro",serif; 	
	font-weight: 400;
	font-size: .75em; /* 12/16 */
}

.options a { color: #888888; }
.options a:hover { color: #EACF42 }	

#cart-footer .update-btn {
	cursor: pointer;
	text-align: left;
	line-height: 19px;
	border: none;
	background-color: #fff;
	padding: 10px 0 10px 0;
	color: #888888;
	font-family: "ff-tisa-web-pro",serif;
	font-weight: 400;
	margin-left: 10px;
	-webkit-font-smoothing: antialiased; 	
}

#cart-footer .update-btn:hover {
	color: #EACF42;
}



.shipping {
	font-size: .75em;
}

#cart-footer .cart-total {
	text-align: right;
}

.discovery h2 {
	padding: 50px 0;
}

.discoveryy {
	max-width: 600px;
	margin: 0 auto;
	text-align: center
}




/*~~~~~~~~~~~ Columns ~~~~~~~~~~~~~~*/


.onecol, .twocol, .threecol, .threecol-2, .fourcol, .fourcol-3, .fivecol, .fivecol-2, .fivecol-3, .fivecol-4, .sixcol {	
	width: 97.916666666667%;
	float: left;
	margin: 0 1.041666666667%;
	height: auto;	
	display: block;
	overflow: hidden;
}


/* ~~~~~~~~~ 480 + ~~~~~~~~~ */


@media screen and (min-width: 480px) {
.twocol {
	width: 47.916666666667%; /*460/960 */	
}

.threecol {
    width: 31.25%; /* 300/960 */
}

.threecol-2 {
    width: 64.583333333333%; /* 620/960 */
}

nav.menu ul li a {
	font: 400 1.25em 'DINCondMediumRegular', "din-condensed-web", sans-serif; /* 20/16 */ 
}

nav.projects {
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
}		



}/* 480 + */


/* ~~~~~~~~~ 768 + ~~~~~~~~~ */
@media screen and (min-width: 768px) {
.fourcol {
    width: 22.916666666667%; /* 220/960 */
}

.fourcol-3 {
    width: 72.916666666667%; /* 700/960 */
}

		nav.projects {
			-webkit-column-count: 4;
			-moz-column-count: 4;
			z-index: 2; 
			background-color: #FFFFFF;
			position: relative;
		}		

}/* 768 + */




/* ~~~~~~~~~ 960 + ~~~~~~~~~ */


@media screen and (min-width: 960px) {
.fivecol {
    width: 17.916666666667%; /* 172/960 */
}

.fivecol-2 {
    width: 37.916666666667%; /* 364/960 */
}

.fivecol-3 {
    width: 57.916666666667%; /* 556/960 */
}

.fivecol-4 {
    width: 77.916666666667%; /* 748/960 */
}

.sixcol {
    width: 14.583333333333%; /* 140/960 */
}


body {
	margin-top: 145px;
}
		/* ~~~~~~~~~~~~~~ header ~~~~~~~~~~~~~~ */
		
		header {
			height: 105px;
			background: url(../images/head.png) no-repeat center;
			background-color: #FFFFFF;
			background-position: center bottom;
			background-size: 960px 105px;
			padding-top: 20px;
			position: fixed;
			width: 960px;
			top: 0;	
			margin: 0;
			border-bottom: 0;
		}
		
		a.logo {
			width: 290px;
			height: 71px;
			background: url(../images/thetinyhorse.gif) ;
			background-size: 290px 71px;
			float: left;
			margin: 17px 0 0 25px;
		}
		
		a.logo:hover {
			opacity:0.80;
			filter:alpha(opacity=80); 
		}
		
		nav.menu {
			float: right;
			padding: 40px 135px 0 0;
		}
		
		nav.menu ul li {
			padding: 0 10px;
			display: block;
			float: left;
		}
		
		/* ~~~~~~~~~~~~~~ footer ~~~~~~~~~~~~~~ */
		
		footer {
			text-align: left;
			height: 49px;
			padding: 8px 0 8px 0;
			background: #FFFFFF url(../images/foot.png) no-repeat center ;
			background-size: 960px 65px;
			border-top: 0;
			z-index: 3;
			position: relative;
		}
				
		footer ul li {
			padding: 0 8px 0 0;
			display: block;
			float: left;
		}
		
		footer p, footer ul {
			padding-left: 10px;
		}
		
		.fourcol.fixed {
			position: fixed;
			width: 220px;
			float: right;
			left: 50%;
			margin: 0 0 0 250px;
			z-index: 1; 
		}
		
		.cart-counter {
			height: 24px;
			width: 40px;
			position: fixed;
			top:125px;
			left: 50%;
			margin-left: 435px;
			background: #FFFFFF;
			display: block;
			text-align: right;
			padding-top: 5px;
		}
		
		.cart-counter a {color: #888888; line-height: 17px; font-size: .875em; /* 14/16 */ }		

		
}/* 960 + */