/*
Theme Name: CooperType
Theme URI: http://coopertype.org/
Author: Hannes Famira
Version: 2.0
*/

@charset "UTF-8";

/*
/*---------- reset styles --------------------

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
	{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
	{
	display: block;
	}

body
	{
	line-height: 1;
	}

ol, ul
	{
	list-style: none;
	}

blockquote, q
	{
	quotes: none;
	}

blockquote:before, blockquote:after,
q:before, q:after
	{
	content: '';
	content: none;
	}

table
	{
	border-collapse: collapse;
	border-spacing: 0;
	}

/*---------- end reset styles --------------------
*/


/*---------- importing web fonts --------------------

For Bureau Grot Extra Compressed Bold:

font-family: "Bureau Grot Extra Compressed";
font-style: normal;
font-weight: 700;

For Bureau Grot Wide Ultra Black:

font-family: "Bureau Grot Wide";
font-style: normal;
font-weight: 900;

*/

/*---------- layout elements --------------------
*/


body
	{
	font-family: "Benton Sans RE", Verdana, Arial, sans-serif;
	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	}

	@media only screen and (max-device-width: 480px)
		{
		body
			{
			 -webkit-text-size-adjust: none;}
			}

.navBar
	{
	display: block;
	clear: both;
	width: 92%;
	max-width: 1004px;
	min-height: 2em;
	overflow: hidden;
	padding: 0px;
	margin: 0 auto 0 auto;
	padding-bottom: 5em;
	font-size: 1em;
	line-height: 1.6em;
	color: black;
	text-align: left;
	}

.navBarLogo
	{
	float: left;
	width: 212px;
	hight: 40px;
	overflow: hidden;
	margin: 2.2em 1em 0 0;
	}

.greyLine
	{
	display: block;
	width: 100%;
	height: 1px;
	background-color: #cccccc;
	margin-top: -5em;
	}

#branding
	{
	display: block;
	color: #999;
	margin: 3.8em 1.5em 0 0;
	}

#branding a
	{
	color: #000;
	font-weight: bold;
	}

#access
	{
	font-family: "Benton Sans", Arial, sans-serif;
	overflow: hidden;
	clear: both;
	font-weight: normal;
	font-size: 1.3em;
	margin: 0.9em 0 0 0;
	padding: 0;
	line-height: 1em;
	color: #F2F2F2;
    text-align: justify;
	}

#access *
	{
  display: inline;
	}

#access a
	{
    display: inline-block;
    white-space: nowrap;
	-webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
	}

	@media screen and (max-width: 1041px)
		{
		#access a
			{
			width: 30%;
			line-height: 1.4em;
			}
		}

	@media screen and (max-width: 670px)
		{
		#access a
			{
			width: 40%;
			line-height: 1.4em;
			}
		}

	@media screen and (max-width: 480px)
		{
		#access a
			{
			width: 80%;
			}
		}

.main
	{
	display: block;
	clear: both;
	width: 92%;
	max-width: 1004px;
	min-height: 2em;
	overflow: hidden;
	padding: 0px;
	margin: 0 auto 0 auto;
	padding-bottom: 5em;
	font-size: 0.8em;
	line-height: 1.7em;
	color: black;
	text-align: left;
	}

	@media screen and (max-width: 480px)
		{
		.main
			{
			font-size: 0.9em;
			line-height: 1.55em;
			}
		}

.horizontalRow
	{
	display: inline-block;
	width: 100%;
	clear: both;
	margin: 0em;
	padding: 0%;
	}

.contentsItem
	{
	position: relative;
	float: left;
	display: block;
	width: 100%;
	clear: both;
	margin: 0em 0em 2em 0em;
	}

hr
	{
	width: 100%;
	clear: both;
	height: 5px;
	border-style: none;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: left, right, left;
	background-image: url(../../../images/hr-blue_bg.png), url(../../../images/hr-blue_bg.png), url(../../../images/hr-red_bg.png);
	overflow: visible;
	}

.deck
	{
	font-family: "Benton Sans", Arial, sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.35em;
	margin: 0em 0em 1.7em 0em;
	text-decoration: none;
	}

	@media screen and (max-width: 759px)
		{
		.deck
			{
			font-size: 1.5em;
			line-height: 1.35em;
			}
		}

	@media screen and (max-width: 480px)
		{
		.deck
			{
			font-size: 1.5em;
			line-height: 1.35em;
			}
		}

.eventBanner
	{
	width: 100%;
	margin: 4.4em auto 0em 0;
	display: block;
	overflow: hidden;
	clear: both;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	}

	@media screen and (max-width: 800px)
		{
		.eventBanner
			{
			width: 100%;
			margin: 3em auto 0 auto;
			}
		}

.fourcolumn
	{
	position: relative;
	width: 65%;
	overflow: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	#background-color: red;
	}

	@media screen and (max-width: 800px)
		{
		.fourcolumn
			{
			width: 100%;
			display: block;
			clear: both;
			margin: 0 auto 0 auto;
			}
		}

.twocolumn
	{
	position: relative;
	width: 32%;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	#background-color: green;
	}

	@media screen and (max-width: 800px)
		{
		.twocolumn
			{
			width: 100%;
			display: block;
			overflow: hidden;
			clear: both;
			margin: 0 auto 0 auto;
			}
		}

.marginright
	{
	margin-right: 3%;
	}

.floatleft
	{
	float: left;
	}

.floatright
	{
	float: right;
	}

.instructors
	{
	position: relative;
	float: left;
	width: 100%;
	line-height: 2.2em;
	margin: 1em 0 1.7em 0;
	white-space: nowrap;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	}

	@media screen and (max-width: 800px)
		{
		.instructors
			{
			margin: 1em 0 -1em 0;
			}
		}

.portrait
	{
	position: relative;
	display: block;
	overflow: hidden;
	float: right;
	width: 25%;
	margin: 0.2em 0 2em 3%;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	}

	@media screen and (max-width: 580px)
		{
		.portrait
			{
			width: 50%;
			margin: 0.8em auto 2em auto;
			float: left;
			}
		}

.bioText
	{
	width: 72%;
	position: relative;
	float: left;
	margin: 0 0 3em 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}

	@media screen and (max-width: 580px)
		{
		.bioText
			{
			width: 100%;
			margin: 0 0 2em 0;
			}
		}

#sponsorLogoRow
	{
	display: table;
	width: 100%;
	margin: 0em auto 2.4em auto;
}

#sponsorLogoRow a
	{
	display: table-cell;
	text-align: center;
	width: 16%;
	}

#sponsorLogoRow img
	{
	max-width: 10em;
	vertical-align: middle;
	margin: 1.5em auto 0em auto;
	}

.footer
	{
	margin: 4em 0em 0em 0em;
	padding: 2.3em 4.5% 2em 3.5%;
	width: 100%;
	background-color: #f2f2f2;
	-webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
	word-wrap: initial;
	}

.center
	{
	display: block;
	overflow: hidden;
	clear: both;
	max-width: 1004px;
	margin: 0 auto 0 auto;
	}

#footerColumn
	{
	position: relative;
	float: left;
	margin-right: 2.2em;
	margin-bottom: 2em;
	text-align: left;
    white-space: nowrap;
	}

.footerLogo
	{
	float: left;
	clear: both;
	height: 3.2em;
	border: 0;
	}

	@media screen and (max-width:400px)
		{
		.footerLogo
			{
			display: block;
			overflow: hidden;
			width: 93%;
			margin: 0 auto 0 auto;
			}
		}

.mainNYC-WESTarrows
	{
	position: absolute;
	width: 100%;
	height: 3em;
	margin-top: -49%;
	z-index: 2;
	}

	@media screen and (max-width: 490px)
		{
		.mainNYC-WESTarrows
			{
			margin-top: -3em;
			height: 2em;
			}
		}

/* 
Tool Tips
---------------------------------- 
*/

.tooltip, .tooltip:hover
	{
	position: relative;
	display: inline-block;
	color: #0091e2;
	text-decoration: none;
	cursor: pointer;
	}

	
.tooltip .tooltiptext
	{
	visibility: hidden;
	width: 17em;
	text-align: center;
	padding: 5px 0;
	border: 1px solid #cecece;
	border-radius: 6px;
	background-color: white;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 2em;
	left: 50%; 
	margin-left: -8.6em; /* Use half of the width (120/2 = 60), to center the tooltip */
	}

.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #cecece transparent;
	}

.tooltip:hover .tooltiptext 
	{
	visibility: visible;
	color: black;
	}
	
/*---------- text styles --------------------
*/

h1
	{
	text-transform: uppercase;
	font-size: 36px;
	}

h2
	{
	text-align: left;
	font-family: 'Bureau Grot Extra Compressed', 'Benton Sans Cond';
	font-style: normal;
	font-weight: 900;
	font-size: 13.94em;
	line-height: 0.87em;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	word-spacing: 0em;
	letter-spacing: 0em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0.25em 0 0.4em 0;
	}

h3
	{
	font-family: 'Benton Sans', Georgia, 'Times New Roman', Times, serif;
	font-weight: bold;
	font-size: 3em;
	line-height: 1.05em;
	margin: 0.2em 0 0.6em 0;
	-webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
	}

h4
	{
	font-weight: bold;
	font-size: 1.05em;
	line-height: 1.4em;
	margin: 1em 0 0 0;
	}

ul
	{
	display: block;
	overflow: hidden;
	clear: both;
	list-style-type: disc;
	}

li
	{
	width: 80%;
	margin: 0.5em 0 0.5em 10%;
	}

	@media screen and (max-width: 480px)
		{
		li
			{
			width: 90%;
			margin: 0.5em 0 0.5em 10%;
			#background-color: red;
			}
		}

.grey
	{
	color: #999;
	}

small
	{
	font-size: 0.75em;
	line-height: 1.8em;
	}

strong
	{
	font-weight: bold;
	}

a:hover
	{
	text-decoration: underline;
	}

a:active
	{
	position: relative;
	top: 1px;
	right: -1px;
	}

a.current
	{
	font-weight: bold;
	}

a img
	{
	border: 0;
	}

.hiddenPic
	{
	display: none;
	}

.clear
	{
	clear: both;
	}