/*
File:			custom.css
Description:	Custom styles for Thesis
More Info:		http://diythemes.com/thesis/rtfm/custom-css/
*/

.my-grid .row {width:100%; clear:both}
.my-grid .row div {margin: 0 10px; padding: 10px 0; display:inline-block; float: left;}
.my-grid .row div.full-width {width:856px}
.my-grid .row div.two-thirds {width:570.66px}
.my-grid .row div.one-third {width:285.33px}
.my-grid .row div.one-half {width:428px}
.my-grid .row div img { }

@media screen and (max-width: 1113px) {
.my-grid .row div.full-width {width:572px}
.my-grid .row div.one-third {width:190.66px}
.my-grid .row div.two-thirds {width:381.33px}
.my-grid .row div.one-half {width:286px}
}

@media screen and (max-width: 695.6px) {
.my-grid .row div img {width:100%; max-width:100%}
.my-grid .row div {margin:0;}
.my-grid .row div.full-width {width:100%}
.my-grid .row div.one-third {width:100%}
.my-grid .row div.two-thirds {width:100%}
.my-grid .row div.one-half {width:100%}
}





/* --- Homepage Heading Box --- 
.my-grid-heading {text-align: center}
.my-grid-heading h1,
.format_text .fancy-heading-1,
.custom .format_text h2 {
color: #212121;
font-size: 1.4em;
line-height: 1.75em;
font-family: Cantarell, Candara, Verdana, sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom:0.4em;
font-weight: normal;
}
.my-grid-heading p {
font-family: 'Quattrocento', serif;
color: #888;
font-size: 21px;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 34px;	
margin-bottom:2em;
}*/

/* keep letter spacing more reasonable for more h2's */
.custom .format_text h2 { letter-spacing: 0.07em; }






/* dun remember what this is for 
#sandbox .row {width:100%; clear:both}
#sandbox .row div {margin: 0 10px; padding: 10px 0; display:inline-block; float: left; line-height: 0;}
#sandbox .row div.two-thirds {width:570.66px}
#sandbox .row div.one-third {width:285.33px}
#sandbox .row div.one-half {width:428px}
#sandbox .row div img { }



@media screen and (max-width: 1113px) {
#sandbox .row div.one-third {width:190.66px}
#sandbox .row div.two-thirds {width:381.33px}
#sandbox .row div.one-half {width:286px}
}

@media screen and (max-width: 695.6px) {
#sandbox .row div {text-align:center}
#sandbox .row div.one-third {width:100%}
#sandbox .row div.two-thirds {width:100%}
#sandbox .row div.one-half {width:100%}
}
*/


/******************************************************************************************************/





.custom .textwidget img {
  float:left;
  padding: 0;
  margin: 0 10px 10px 0;
}


.custom .message-box {
  width: 40%;
  float: right;
  color: #48310E;
  font-family: Georgia, serif;
  font-size: 16px;
  font-style: italic;
  background-color: #F9F2D6;
  border: 1px solid #EADA9C;
  padding: 15px 25px 0 25px;
  margin: 0 0 1.571em 1.571em;
  overflow: auto;
  line-height: 1.571em;
}


/* FORMS */
input, textarea {
	font-size: 1em;
	color: #444;
	background: #FBFBFB;
	border: 1px solid #EEE;
	border-right-color: #DDD;
	border-bottom-color: #DDD;
}


/* Random custom stuff */
#logo { font-weight:normal;}
#logo { font-family: 'Cookie', cursive !important; }

/* Custom Background Image 
body.custom { background: url('http://alexvermeer.com/wp-content/uploads/exclusive_paper.png') repeat; } */




/*.custom #header_area .page #header {display: inline;}*/
.custom .menu .current a, .menu .current-cat a, .menu .current-menu-item a { border-bottom-color: #FFFFFF; }

.custom #header_area .page .menu-main-container ul#menu-main li a {border-top-width: 0; border-left-width: 0; border-right-width: 0;}
.custom #header_area .page .menu-main-container ul#menu-main li a:hover { border-bottom-color: #F2F2F2; }



/* custom menu styling */
.custom #header {float:left; padding-top: 0;}
.custom .menu-main-container {float:right; margin-top: 1em;}

/*@import url(http://fonts.googleapis.com/css?family=Oswald);
.custom #header_area .page .menu-main-container ul#menu-main li a,
.custom #header_area .page #header #logo /*,
.custom #header_area .page #header #tagline
   {font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
*/



/* Custom Poster Sales Page Styling
 *
 */
.custom.procrastination-poster .full_width .page { width: 822px;}
.custom.procrastination-poster div#content .headline_area h1 { text-align:center; font-size: 4em;}
.custom.procrastination-poster div#content .headline_area h2 { font-size: 2em; margin: 0.4em 0 0.611em 0; }
.custom.procrastination-poster div#content blockquote, div.simplesocialbuttons {
	color: #48310E;
	font-family: Georgia, serif;
	font-size: 16px;
	font-style: italic;
	background-color: #F9F2D6;
	border: 1px solid #EADA9C;
	padding: 15px 25px 15px 25px;
	margin: 0 1.571em 1.571em 1.571em;
	overflow: auto;
}
.custom.procrastination-poster div#content blockquote p { margin-bottom: 0;}

div.simplesocialbuttons { overflow: hidden; }




.custom .sidebar h3 { text-transform:uppercase }
/* Footer CSS styling
 * taken and modified from http://diythemes.com/thesis/rtfm/widgetized-fat-footer-three-columns/
 */

.custom #footer {padding:0}
.custom #footer-widget-block { text-align:left; overflow:hidden; background-color:transparent; color:#D6D6D6;}
.custom .footer-widgets { width:33%; float:left; }
.custom .my-footer-one { width:33%; }
.custom .my-footer-two { width:33%; }
.custom .my-footer-three { width:33%; }
.custom #footer_area { background-color:white; }
.custom #footer_area .page  { background-color: transparent; padding-bottom:1em}
.custom #footer_area h3 { color:#333;}
.custom #footer a { color: #777; }
.custom #footer a { border-bottom: 0px; }
.custom #footer p { font-size: 1em; line-height: 1.667em; color: #777 }


/* attempt to unuse the ID */
.custom .footer-widget-block { text-align:left; overflow:hidden; background-color:transparent; color:#D6D6D6;}


/* --- Second footer --- */
.custom #footer_area_2 { background-color:#eee; padding:2em 0; }
.custom #footer_area_2 .page  { background-color: transparent; }
.custom #footer_area_2 h3 { color:#999;	font-size: 1.2em;  display:inline; margin: 0 0.6em;}
.custom #footer_area_2 h3 a:link,
.custom #footer_area_2 h3 a:visited { color: inherit; text-decoration: inherit }
.custom #footer_area_2 h3 a:hover { color: #3D9BB8; }
.custom #footer_2 {}

@media screen and (max-width: 695.6px) {
.custom #header { text-align:center; float:none}
.custom .menu-main-container { float:none; text-align:center }
.custom #menu-main li { float: none; display: inline-block;}
.custom .my-footer-one,
.custom .my-footer-two,
.custom .my-footer-three { width:100%; }
}



.custom .remove-bottom {margin-bottom:0 !important; padding-bottom:0 !important}
.custom .remove-top {margin-top:0 !important; padding-top:0 !important}
.custom #comments {margin:0}
.custom ul.compact p {margin-bottom:0.2em}








/************************************************
	
	Optin Widget CSS
	by Alex Mangini (kolakube.com)
	
	Paste the following CSS code into your
	custom.css file.

************************************************/

.widget.optin .social_proof { background: url(images/quote.png) no-repeat top left; font: normal 15px/23px Georgia, "Times New Roman", Georgia, serif; margin: 0; text-align: center }
	.widget.optin .social_proof cite { color: #666; display: block; margin-top: 10px }
	.widget.optin input[type="text"] {
		background: #fff;
		border: 1px solid #b6b6b6;
		display: block;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px
	}
		.widget.optin input[type="text"].name { background: #fff url(images/name.png) no-repeat 10px center; padding-left: 35px }
		.widget.optin input[type="text"].email { background: #fff url(images/email.png) no-repeat 10px center; padding-left: 35px }
		.widget.optin input[type="text"]:focus { background-color: #fafafa }
	.widget.optin input[type="submit"] {
		border: 1px solid rgba(0, 0, 0, .25);
		color: #fff;
		cursor: pointer;
		display: block;
		font-size: 17px;
		margin-bottom: 22px;
		padding: 8px 0;
		width: 100%;
		text-shadow: 1px -1px 0 rgba(0, 0, 0, .4);
		box-shadow: 0 1px 2px #b6b6b6;
		-moz-box-shadow: 0 1px 2px #b6b6b6;
		-webkit-box-shadow: 0 1px 2px #b6b6b6
	}
		.widget.optin input[type="submit"].green { background: #248334 url(images/green.png) repeat-x top }
		.widget.optin input[type="submit"].red { background: #ad2121 url(images/red.png) repeat-x top }
		.widget.optin input[type="submit"].orange { background: #ff6a06 url(images/orange.png) repeat-x top }
		.widget.optin input[type="submit"].blue { background: #316ca4 url(images/blue.png) repeat-x top }
		.widget.optin input[type="submit"].gray { background: #c0c0c0 url(images/gray.png) repeat-x top }
		.widget.optin input[type="submit"].dark { background: #343434 url(images/dark.png) repeat-x top }
		.widget.optin input[type="submit"]:hover { opacity: .7 }


/*
	Paste any of the code below into custom.css
	Each of the button CSS has been split, so if
	you don't plan on using certain buttons on your
	site, you can exclude the additional CSS
*/

/* Standard Buttons */

.format_text a.standard {
	border: 1px solid rgba(0, 0, 0, .2);
	color: #fff;
	display: inline-block;
	padding: .5em .8em;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3)
}
	.format_text .standard.red {
		background: #c60000;
		background: linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));
		background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%)
	}
	.format_text .standard.orange {
		background: #f99015;
		background: linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));
		background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%)
	}
	.format_text .standard.green {
		background: #30a146;
		background: linear-gradient(top, #30a146 0%, #249334 100%);
		background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
		background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%)
	}
	.format_text .standard.blue {
		background: #16a4c8;
		background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));
		background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%)
	}
	.format_text .standard.gray {
		background: #c2c2c2;
		background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));
		background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%)
	}
	.format_text .standard.dark {
		background: #464646;
		background: linear-gradient(top, #464646 0%, #343434 100%);
		background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));
		background: -webkit-linear-gradient(top, #464646 0%, #343434 100%)
	}
	.format_text a.standard:hover { color: #fff; opacity: .5 }


/* Arrow Buttons */

.format_text a.arrow {
	/*background: url(https://i44.tinypic.com/6tmsu8.png) repeat-x top;*/
	border: 4px solid rgba(0, 0, 0, .1);
	color: #fff;
	display: inline-block;
	font-size: 1.1em;
	font-weight: bold;
	padding: .6em 1.2em;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
	a.arrow.red { background-color: #b20000 }
	a.arrow.orange { background-color: #f76c0f }
	a.arrow.green { background-color: #248334 }
	a.arrow.blue { background-color: #1086b6 }
	a.arrow.gray { background-color: #aeaeae }
	a.arrow.dark { background-color: #343434 }
	.format_text a.arrow:hover { color: #fff; opacity: .5 }


/* Bevel Buttons */

.format_text a.bevel {
	border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2);
	border-style: solid;
	border-width: 3px;
	color: #fff;
	display: inline-block;
	padding: .5em .8em;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
	a.bevel.red { background: #b20000 }
	a.bevel { background: #f76c0f }
	a.bevel.green { background: #248334 }
	a.bevel.blue { background: #1086b6 }
	a.bevel.gray { background: #aeaeae }
	a.bevel.dark { background: #343434 }
	.format_text .bevel:hover { color: #fff; opacity: .5 }


/* Engraved Buttons */

.engraved {
	background: rgba(0, 0, 0, .08);
	display: inline-block;
	padding: 5px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px
}
	.format_text .engraved a {
		color: #fff;
		border: 1px solid rgba(0, 0, 0, .3);
		display: inline-block;
		padding: .6em 1.2em;
		position: relative;
		text-decoration: none;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
		border-radius: 30px;
		-moz-border-radius: 30px;
		-webkit-border-radius: 30px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4)
	}
		.engraved a.red {
			background: #c60000;
			background: linear-gradient(top, #c60000 0%, #b20000 100%);
			background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));
			background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%)
		}
		.engraved a.orange {
			background: #f99015;
			background: linear-gradient(top, #f99015 0%, #f76c0f 100%);
			background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));
			background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%)
		}
		.engraved a.green {
			background: #30a146;
			background: linear-gradient(top, #30a146 0%, #249334 100%);
			background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
			background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%)
		}
		.engraved a.blue {
			background: #16a4c8;
			background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);
			background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));
			background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%)
		}
		.engraved a.gray {
			background: #c2c2c2;
			background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
			background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));
			background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%)
		}
		.engraved a.dark {
			background: #464646;
			background: linear-gradient(top, #464646 0%, #343434 100%);
			background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));
			background: -webkit-linear-gradient(top, #464646 0%, #343434 100%)
		}
	.custom .engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }


/* Icon Buttons */

.format_text a.icon {
	border: 1px solid rgba(0, 0, 0, .2);
	color: #fff;
	display: inline-block;
	padding: .5em 1.2em;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3)
}
	a.icon.red {
		background: #c60000;
		background: linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));
		background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%)
	}
	a.icon.orange {
		background: #f99015;
		background: linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));
		background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%)
	}
	a.icon.green {
		background: #30a146;
		background: linear-gradient(top, #30a146 0%, #249334 100%);
		background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
		background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%)
	}
	a.icon.blue {
		background: #16a4c8;
		background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));
		background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%)
	}
	a.icon.gray {
		background: #c2c2c2;
		background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));
		background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%)
	}
	a.icon.dark {
		background: #464646;
		background: linear-gradient(top, #464646 0%, #343434 100%);
		background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));
		background: -webkit-linear-gradient(top, #464646 0%, #343434 100%)
	}
	.icon span { font-family: 'WebSymbolsRegular', cursive; margin-right: 8px }
	.format_text .icon:hover { color: #fff; opacity: .5 }


/* Web Symbolds Typeface */

@font-face {
    font-family: 'WebSymbolsRegular';
    font-style: normal;
    font-weight: normal;
	src: url('fonts/websymbols-regular-webfont.eot');
	src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/websymbols-regular-webfont.woff') format('woff'),
		url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
		url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg')
}



/*---:[ responsive resets ]:---*/

.format_text img,
.format_teaser img,
.format_text iframe,
.format_text object {
	max-width: 100%
}

.format_text img,
.format_teaser img {
	height: auto
}


.post_image {
    border: solid 0px #f5f5f5; /* was 8  --Mar 2013 -Alex */
}

/*
body {
  font-family:"adobe-garamond-pro", Garamond, garamond, serif;
}

.format_text {
font-size: 1.8em;
line-height: 1.6em;
}*/


li.widget {
	margin-bottom: 1.8em;
}

/* Clarity Project page styling */
h3.clarity-list {
	color: red;
	margin-top: 0;
	margin-top: 0.6em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid #ddd;
	color: #CC0000;	
}
h3.clarity-list a  {
	color: #CC0000;
	text-decoration: none;
}
h3.clarity-list a:hover {
	text-decoration: underline;
}


.grey {color:grey}


hr {
	height: 1px;
	border: 0;
	border-top: 1px solid #ECECEC;
	margin-bottom: 1em;
}


/* 
 * Continuous ordered list styling, originally created for the /tangibles page
 * 
 * based on http://stackoverflow.com/questions/4615500/how-to-start-a-new-list-continuing-the-numbering-from-the-previous-list
 */
ol.start { counter-reset: mycounter; }
ol.split { list-style-type: none; }
ol.split li:before
{
  counter-increment: mycounter;
  content: counter(mycounter) ".\00A0\00A0";
}
ol.split li
{
  text-indent: -1.3em;
}
ol.continue { margin-left:2.5em }



/* clearfix from bootstrap */

/* micro clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}


.custom #comments {display:none}

/* some custom share button styling */
.cta-share {
  margin: 0 auto;
  width: 100px;
  margin-top: 10px;
  margin-bottom: 50px;
}


.yarpp-related ol li a {
  text-decoration: none !important;
  font-weight: normal !important;
}


.fancy-and {
  font-family: 'Adobe Caslon Pro', 'Palatino Linotype', Palatino, Georgia;
  font-style: italic;
}








/* --- Homepage Heading Box --- */
.custom .grid-heading { text-align: center }
.custom .grid-heading h1,
.custom .format_text h2 {
color: #212121;
font-size: 1.4em;
line-height: 1.5em;
font-family: Cantarell, Candara, Verdana, sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom:0.4em;
font-weight: normal;
}
.custom .grid-heading p {
font-family: 'Quattrocento', serif;
color: #888;
font-size: 21px;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 34px;	
margin-bottom:2em;
}




/* This grid inspired by http://studionudge.com/ (their site is amazing!) */

/* Table of Contents
==================================================
    #Base 1200 Grid
	#Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */


/* #Base 1200 Grid
================================================== */

    .grid                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 12px; margin-right: 12px; /*line-height: 0;*/ }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

	.column, .columns 							{ padding-bottom: 24px; }
	
    /* Base Grid */
    .grid .one.column                      { width: 76px;  }
    .grid .two.columns                     { width: 176px; }
    .grid .three.columns                   { width: 276px; }
    .grid .four.columns                    { width: 376px; }
    .grid .five.columns                    { width: 476px; }
    .grid .six.columns                     { width: 576px; }
    .grid .seven.columns                   { width: 676px; }
    .grid .eight.columns                   { width: 776px; }
    .grid .nine.columns                    { width: 876px; }
    .grid .ten.columns                     { width: 976px; }
    .grid .eleven.columns                  { width: 1076px; }
    .grid .twelve.columns                  { width: 1176px; }

    .grid .one-third.column                { width: 376px; }
    .grid .two-thirds.column               { width: 776px; }

    /* Offsets */
    .grid .offset-by-one                   { padding-left: 100px;  }
    .grid .offset-by-two                   { padding-left: 200px; }
    .grid .offset-by-three                 { padding-left: 300px; }
    .grid .offset-by-four                  { padding-left: 400px; }
    .grid .offset-by-five                  { padding-left: 500px; }
    .grid .offset-by-six                   { padding-left: 600px; }
    .grid .offset-by-seven                 { padding-left: 700px; }
    .grid .offset-by-eight                 { padding-left: 800px; }
    .grid .offset-by-nine                  { padding-left: 900px; }
    .grid .offset-by-ten                   { padding-left: 1000px; }
    .grid .offset-by-eleven                { padding-left: 1100px; }

	.grid .landscape, .grid .portrait, .grid .square { position: relative; overflow: hidden; text-align: center; line-height: 0; }


	/* customization...*/

  .grid .bookcover { position: relative; overflow: hidden; text-align: center; line-height: 0; }


    @media only screen and (min-width: 1251px) {
		.grid { left: -117px; }
	}


/* #Base 960
================================================== */

    /* Note: Design for a width of 960px */

    @media only screen and (min-width: 1088px) and (max-width: 1250px) {  /* was 960 --2014-07-22; was 980 --2014-07-22*/

        .grid                                  { width: 960px; }
        .grid .column,
        .grid .columns                         { margin-left: 12px; margin-right: 12px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 12px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 12px; }

        .grid .one.column                      { width: 56px; }
        .grid .two.columns                     { width: 136px; }
        .grid .three.columns                   { width: 216px; }
        .grid .four.columns                    { width: 296px; }
        .grid .five.columns                    { width: 376px; }
        .grid .six.columns                     { width: 456px; }
        .grid .seven.columns                   { width: 536px; }
        .grid .eight.columns                   { width: 616px; }
        .grid .nine.columns                    { width: 696px; }
        .grid .ten.columns                     { width: 776px; }
        .grid .eleven.columns                  { width: 856px; }
        .grid .twelve.columns                  { width: 936px; }

        .grid .one-third.column                { width: 296px; }
        .grid .two-thirds.column               { width: 616px; }

        /* Offsets */
        .grid .offset-by-one                   { padding-left: 80px; }
        .grid .offset-by-two                   { padding-left: 160px; }
        .grid .offset-by-three                 { padding-left: 240px; }
        .grid .offset-by-four                  { padding-left: 320px; }
        .grid .offset-by-five                  { padding-left: 400px; }
        .grid .offset-by-six                   { padding-left: 480px; }
        .grid .offset-by-seven                 { padding-left: 560px; }
        .grid .offset-by-eight                 { padding-left: 640px; }
        .grid .offset-by-nine                  { padding-left: 720px; }
        .grid .offset-by-ten                   { padding-left: 800px; }
        .grid .offset-by-eleven                { padding-left: 880px; }
		
		.grid .five.columns .portrait,
		.grid .seven.columns .landscape		{ height: 355px; }
		
		.grid .six.columns	.landscape			{ height: 294px; }
		
		.grid .eight.columns .landscape,
		.grid .four.columns .portrait			{ height: 395px; }
		
		.grid .four.columns .landscape			{ height: 186px; }
		
		.grid .four.columns .square             { height: 296px }
    }
	

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 832px) and (max-width: 1087px) { /* was 768,788 and 959,979 --2014-07-22*/

        .grid                                  { width: 768px; }
        .grid .column,
        .grid .columns                         { margin-left: 12px; margin-right: 12px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 12px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 12px; }

        .grid .one.column                      { width: 40px; }
        .grid .two.columns                     { width: 104px; }
        .grid .three.columns                   { width: 168px; }
        .grid .four.columns                    { width: 232px; }
        .grid .five.columns                    { width: 296px; }
        .grid .six.columns                     { width: 360px; }
        .grid .seven.columns                   { width: 424px; }
        .grid .eight.columns                   { width: 488px; }
        .grid .nine.columns                    { width: 552px; }
        .grid .ten.columns                     { width: 616px; }
        .grid .eleven.columns                  { width: 680px; }
        .grid .twelve.columns                  { width: 744px; }

        .grid .one-third.column                { width: 232px; }
        .grid .two-thirds.column               { width: 488px; }

        /* Offsets */
        .grid .offset-by-one                   { padding-left: 64px; }
        .grid .offset-by-two                   { padding-left: 128px; }
        .grid .offset-by-three                 { padding-left: 192px; }
        .grid .offset-by-four                  { padding-left: 256px; }
        .grid .offset-by-five                  { padding-left: 320px; }
        .grid .offset-by-six                   { padding-left: 384px; }
        .grid .offset-by-seven                 { padding-left: 448px; }
        .grid .offset-by-eight                 { padding-left: 512px; }
        .grid .offset-by-nine                  { padding-left: 576px; }
        .grid .offset-by-ten                   { padding-left: 640px; }
        .grid .offset-by-eleven                { padding-left: 704px; }
		
		.grid .five.columns .portrait,
		.grid .seven.columns .landscape		{ height: 280px; }
		
		.grid .six.columns	.landscape			{ height: 230px; }
		
		.grid .eight.columns .landscape,
		.grid .four.columns .portrait			{ height: 308px; }
		
		.grid .four.columns .landscape			{ height: 142px; }
		
		.grid .four.columns .square             { height: 232px }
    }
	

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 831px) { /* was 767, 787 --2014-07-22*/
        .grid { width: 300px; }
        .columns, .column { margin: 0; padding-bottom: 12px; }

        .grid .one.column,
        .grid .two.columns,
        .grid .three.columns,
        .grid .four.columns,
        .grid .five.columns,
        .grid .six.columns,
        .grid .seven.columns,
        .grid .eight.columns,
        .grid .nine.columns,
        .grid .ten.columns,
        .grid .eleven.columns,
        .grid .twelve.columns,
        .grid .thirteen.columns,
        .grid .fourteen.columns,
        .grid .fifteen.columns,
        .grid .sixteen.columns,
        .grid .one-third.column,
        .grid .two-thirds.column  { width: 300px; }

        /* Offsets */
        .grid .offset-by-one,
        .grid .offset-by-two,
        .grid .offset-by-three,
        .grid .offset-by-four,
        .grid .offset-by-five,
        .grid .offset-by-six,
        .grid .offset-by-seven,
        .grid .offset-by-eight,
        .grid .offset-by-nine,
        .grid .offset-by-ten,
        .grid .offset-by-eleven,
        .grid .offset-by-twelve,
        .grid .offset-by-thirteen,
        .grid .offset-by-fourteen,
        .grid .offset-by-fifteen { padding-left: 0; }

		.grid .work-grid { height: 190px; }

		/*custom
		.full_width .page {width:90%}*/
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 831px) { /* was 767, 787 --2014-07-22*/
        .grid { width: 420px; }
        .columns, .column { margin: 0; padding-bottom: 12px; }

        .grid .one.column,
        .grid .two.columns,
        .grid .three.columns,
        .grid .four.columns,
        .grid .five.columns,
        .grid .six.columns,
        .grid .seven.columns,
        .grid .eight.columns,
        .grid .nine.columns,
        .grid .ten.columns,
        .grid .eleven.columns,
        .grid .twelve.columns,
        .grid .thirteen.columns,
        .grid .fourteen.columns,
        .grid .fifteen.columns,
        .grid .sixteen.columns,
        .grid .one-third.column,
        .grid .two-thirds.column { width: 420px; }
		
		.grid .work-grid { height: 238px; width: 376px; margin: 0 auto; }
		.four.columns .portrait img { width: 420px; height: auto; }
		
    }

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .grid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }



	/* Hovers */
	
	#hover {
		transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		opacity: 0;
	}
	
	#hover {
		background-color: #fff;
		position: absolute;
		text-align: center;
	}
	
	.four.columns .portrait #hover { height: 90.4%; left: 6.38%; top: 4.8%; width: 87.24%; }
	.eight.columns .landscape #hover { height: 90.4%; left: 3.09%; top: 4.8%; width: 93.82%; }
	
	.six.columns .landscape #hover { height: 87.24%; left: 4.17%; top: 6.38%; width: 91.7%; }
	.six.columns .portrait #hover { height: 93.8%; left: 4.17%; top: 3.1%; width: 91.7%; }
	
	.four.columns .landscape #hover { height: 79.83%; left: 6.38%; top: 10.08%; width: 87.24%; }
	
	/*customizations*/
	.columns .square #hover { height: 90%; left: 5%; top: 5%; width: 90%; }


	.three.columns .portrait #hover { height: 90.4%; left: 6.38%; top: 4.8%; width: 87.24%; }


/* experimental */
	.bookcover #hover { height: 90.4%; left: 6.38%; top: 4.8%; width: 87.24%; }

	
	
	#hover:hover { opacity: 0.95; }
	
	.custom .link-text {
		position: absolute;
		text-align: center;
		top: 5%;
		width: 90%;
		left:5%;
	}
	
	.custom .link-text h2 { color:#212121; font-size: 18px; font-weight: 400; margin-bottom: 1.5em; margin-top:0; line-height: 1.5em; }
	.custom .link-text h4 { 
	  color:#212121;
	  font-size: 14px; 
	  font-weight: 400; 
	  margin-bottom: 1.5em; 
	  margin-top:0; 
	  line-height: 1.5em;
	  font-family: Cantarell, Candara, Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
	.custom .link-text p  { color:#212121; line-height: 1.5em; }
	h3.desc { 
		color: #212121;
		font-size: 18px;
		font-weight: 300;
		letter-spacing: 0.03em;
		line-height: 26px;
		margin-bottom: 24px;
		text-align: center;
		text-transform: none;
	 }



/* My custom attempt to fix stupid thesis responsive stuff */
/*---:[ responsive resets ]:---
@media screen and (max-width: 1417px) {
	.full_width > .page, #container, #page, #column_wrap, #content, #sidebars, #sidebar_1, #sidebar_2 { width: 1200px; }
}

@media only screen and (min-width: 960px) and (max-width: 1250px) {
	.full_width > .page, #container, #page, #column_wrap, #content, #sidebars, #sidebar_1, #sidebar_2 { width: 960px; }
}
*/



.full_width .page {
  padding-right: 0;
  padding-left: 0;
}




.text-center { text-align: center !important }