/* =============================================================================
   Generic Box controls
   ========================================================================== */
.contained {
	margin: 1em auto;
	width: 90%;
	max-width: 960px;
	position: relative;
}

.box {
    display: inline-block; zoom: 1; *display: inline;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.world { position: relative; }

/* =============================================================================
   Standard positioning for boxes
   ========================================================================== */
/* Boxes using tables - for equal-height boxes */
.is-table { display: table; }
.is-table-row { display: table-row; }
.is-table-cell { display: block; }

.left { 
	float: none; 
	margin-right: 0%;
}
.right { 
	float: none; 
	margin-left: 0%;
}

.whole { width: 100%; }
.nine-tenths { width: auto; }
.four-fifths { width: auto; }
.three-quarters { width: auto; }
.two-thirds { width: auto; }
.three-fifths { width: auto; }
.half { width: auto; }
.two-fifths { width: auto; }
.third { width: auto; }
.quarter { width: auto; }
.fifth { width: auto; }
.tenth { width: auto; }
.special-width { width: 100%; }
@media only screen and (min-width: 767px) {
.is-table-cell { display: table-cell; }

.left { 
	float: left; 
	margin-right: 4%;
}
.right { 
	float: right; 
	margin-left: 4%;
}

.whole { width: 100%; }
.nine-tenths { width: 90%; }
.four-fifths { width: 80%; }
.three-quarters { width: 75%; }
.two-thirds { width: 66.66%; }
.three-fifths { width: 60%; }
.half { width: 50%; }
.two-fifths { width: 40%; }
.third { width: 33.33%; }
.quarter { width: 25%; }
.fifth { width: 20%; }
.tenth { width: 10%; }

.special-width { width: 66.66%; }
}

.always-is-table-cell { display: table-cell; }

.always-left { 
	float: left; 
	margin-right: 4%;
}
.always-right { 
	float: right; 
	margin-left: 4%;
}

.always-whole { width: 100%; }
.always-nine-tenths { width: 90%; }
.always-four-fifths { width: 80%; }
.always-three-quarters { width: 75%; }
.always-two-thirds { width: 66.66%; }
.always-three-fifths { width: 60%; }
.always-half { width: 50%; }
.always-two-fifths { width: 40%; }
.always-third { width: 33.33%; }
.always-quarter { width: 25%; }
.always-fifth { width: 20%; }
.always-tenth { width: 10%; }

.top-align { vertical-align: top; }
.middle-align { vertical-align: middle; }
.bottom-align { vertical-align: bottom; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.elbow {   padding: 1em; }
.elbow-n { padding-top: 1em; }
.elbow-e { padding-right: 0em;  padding-bottom: 1em; }
.elbow-s { padding-bottom: 1em; }
.elbow-w { padding-left: 0em; }
@media only screen and (min-width: 767px) {
.elbow {   padding: 1em; }
.elbow-n { padding-top: 1em; }
.elbow-e { padding-right: 1em; }
.elbow-s { padding-bottom: 1em; }
.elbow-w { padding-left: 1em; }
}

.always-elbow {   padding: 1em; }
.always-elbow-n { padding-top: 1em; }
.always-elbow-e { padding-right: 1em; }
.always-elbow-s { padding-bottom: 1em; }
.always-elbow-w { padding-left: 1em; }


/* =============================================================================
   General embelishments
   ========================================================================== */
.lorem { border: 1px solid hotpink; }
a.has-image { display: block; }
.lower {
	text-transform: lowercase;
	letter-spacing: 0.2em;
	font-family: "OpenSans Semibold", Arial, sans-serif;
}
.upper { text-transform: uppercase; }
.loud { 
	font-family: "OpenSans Semibold", Arial, sans-serif; 
	font-size: 2em;
	color: #666666;
}
.subdued {
	font-size: 0.53em;
	letter-spacing: 0.4em;
}

.image-frame {
	padding: 5px;
	border: 1px solid #ccc;
}

.always-together { white-space: nowrap; }

/* =============================================================================
   Paper curl effect
   ========================================================================== */
.paper-bg {
	position: relative;
	display: block;
	border: 1px solid #ccc;
	padding: 0.75em 1em;
	background-color: white;
}

.paper-bg:before, .paper-bg:after {
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 2px;
	bottom: 5px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 9px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 9px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 9px 3px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.paper-bg:after {
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}
.paper-bg:hover {
	border-bottom: 1px solid #ccc; 
}

/* =============================================================================
   Automatic link icons
   ========================================================================== */
/* Inline */
a.link-icon[href^="http://"]:after {
	content: url(../images/icon_external.png);
	padding-left: 5px;
	white-space: nowrap;
}
/*
a[href^="mailto:"]:after {
	content: url(../images/icon_email.gif);
	padding-left: 5px;
	white-space: nowrap;
	position: relative;
	top: 5px;
}
*/
/*
a[href$=".pdf"]:after {
	content: url(../images/icon_pdf.gif);
	padding-left: 5px;
	white-space: nowrap;
}
*/

/* In a list */
/*
li a[href^="http://"] {
	display: inline-block;
	line-height: 16px;
	padding: 1px 0px 0px 20px;
	background-image: url(../images/icon_external.png);
	background-repeat: no-repeat;
	background-position: left top;
}
li a[href^="http://"]:after { content: inherit; }

li a[href^="mailto:"] {
	display: inline-block;
	line-height: 16px;
	padding: 1px 0px 0px 20px;
	background-image: url(../images/icon_email.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
li a[href^="mailto:"]:after { content: inherit; }

li a[href$=".pdf"] {
	display: inline-block;
	line-height: 16px;
	padding: 1px 0px 0px 20px;
	background-image: url(../images/icon_pdf.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
li a[href$=".pdf"]:after { content: inherit; }
*/

/* ==========================================================================
   Good ol' clearfix
   ========================================================================== */
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}