@import url('reset.css');

/*
COLORS
Define main colors used in a site here for easy reference

Blue = 0066cc
Lt Blue = CFF7FF
Dk Blue = 00849F

*/

html {
	height: 100%;
}

body {
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	background-color: #fff;
	color: #010101;
}

/* ----------------
	DEFAULTS
    ------------- */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #00b2d9;
	border: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #00b2d9;
} 

h1, h2 { 
	font-family: helvetica; 
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #00b2d9;
	line-height: 1em;
	margin-bottom: 0.5em;
}

h1 { font-size: 3.2em; }

h2, p.follow { 
	font-size: 30px; 
	margin-bottom: 10px; 
	background-color: #00b2d9; 
	color: #fff; 
	padding: 0 5px; 
	display: -moz-inline-block;
	display: inline-block;
}
	h2 a:link,
	h2 a:visited {
	    color: #fff;
	}
	
	p.follow a:link,
	p.follow a:visited {
	    color: #fff;
		border-bottom: 1px solid #fff;
	}
	
	p.follow {
		padding-top: -2px;
		padding: 0 1px 3px 1px;
		margin-bottom: 50px;
		font-size: 14px;
		text-transform: uppercase;
	}

h3 {
    font-family: helvetica; 
    font-size: 1.4em;
    letter-spacing: -0.02em;
    color: #00b2d9;
    display: -moz-inline-block;
	display: inline-block;
    margin-bottom: 0.5em;
}
h4 {
    font-size: 1em;
    font-weight: bold;
    display: -moz-inline-block;
	display: inline-block;
    color: #00b2d9; 
    margin-bottom:10px
}
h5 { font-size: 1.2em; }
h6 { font-size: 1em; } 


 
a,
a:link,
a:visited { 
	color: #010101; 
	text-decoration: none;
}
a:hover,
a:active {
    color: #010101;
	border-bottom: 1px dotted #010101;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

p { 
	line-height: 1.5em; 
	margin-bottom: 1em;
	font-size: 1.2em;
}

ul, ol {
}

ol {
}
	ol ul,
	ol ol {
	}

blockquote, q {
    margin: 1em 2em;
    padding: 1em;
    border-left: 1px solid #dcd6c6;
    font-style: italic; 
    font-size: 1.2em;   
    color: #666; 
}   

small,
.small { font-size: .8em; }

/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
	
	html, body, page, wrapper, and footer rules are designed to fix footer's at the bottom of the page.
	Wrapping the site in the page div also allows for double background images.
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	text-align: center;
	padding: 0;
	font-size: 1.2em; /* Render type approximately 12px in size across all browsers */
	background: transparent;
	z-index: 2;
}

#wrapper {
	position: relative;
	min-height: 100%;
	min-width: 996px;
	margin: 0 0 auto 25px;	
	padding-bottom: 80px;
	text-align: left;
	background: transparent;
	z-index: 2;
}

#header {
	position: relative;
	height: 55px;
}

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-top: 0;
	height: 80px;
	width: 100%;
	background: url(../images/design/bg_white_fade_bottom.png) 0 0 repeat-x;
	z-index: 2;
}
	#footer_inner {
		height: 45px;
		padding-top: 35px;
		padding-left: 220px;
		position: relative;
	}
		#footer #mpls_lakes {
			display: block;
			width: 120px;
			height: 45px;
			position: absolute;
			top: 10px;
			left: 45px;
			text-indent: -9999px;
			background: url(../images/design/logo_mpls_lakes.png) 0 0 no-repeat;
		}

#content {
	position: relative;
	padding: 0 0 0 15px;
}
	#col_main,
	#col_sub {
		float: left;
		padding-top: 50px;
	}
	
	#flash,
	#flash_wrapper {
		z-index: 1;
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		min-height: 100%;
	}


/*div, body, html {
	border: 1px dotted red;
}*/

/* ----------------
	PAGE STRUCTURE VARIENTS
    ------------- */
body#learn #content,
body#pledge #content {
	width: 900px;
}
	body#learn #content {
		padding-top: 335px;
	}
	
body#pledge #footer {
	background-color: #fff;
}

body#downloads #content {
	width: 1024px;
}
	body#downloads #col_main {
		width: 470px;
	}
	body#downloads #col_sub {
		width: 362px;
		float: right;
	}

/* ----------------
	PAGE STRUCTURE ELEMENTS
    ------------- */
#logo {
	width: 217px;
	height: 30px;
	display: block;
	background: url(../images/design/logo_tapmpls.png) 0 0 no-repeat;
	position: absolute;
	top: 19px;
	left: 0;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
	#logo a {
		width: 217px;
		height: 30px;
		display: block;
		text-indent: -9999px;
		border: 0;
	}

	
.module {
	float: left;
	width: 275px;
	margin-left: 15px;
}
	.modules .first-child {
		margin-left: 0px;
	}
	.modules img {
		float: left;
		margin: 0 1em 0 -50px;
	}


.handles {
	position: absolute;
	right: 0;
	min-height: 100%;
	z-index: 100;
	width: 28px;
	background-color: #cceff7;
}
	.handles .handle {
		display: block;
		width: 28px;
		height: 125px;
		padding: 25px 0;
		text-indent: -9999px;
		cursor: pointer;
	}
		.handles #latest {
			background: url(../images/design/btn_the_latest.gif) 50% 50% no-repeat;
		}
		.handles #videos {
			position: absolute;
			bottom: 50px;
			left: 0;
			background: url(../images/design/btn_the_videos.gif) 50% 50% no-repeat;
		}

.side_bars {
	position: absolute;
	right: 0;
	min-height: 100%;
	z-index: 100;
}

.side_bar {
	position: absolute;
	top: 0;
	right: 28px;
	min-height: 100%;
}
body.narrow .side_bars {
	right: inherit;
	left: 1024px;
}
	.side_bar .content {
		position: absolute;
		right: 0;
		width: 0;
		display: none;
		overflow: hidden;
		background: url(../images/design/bg_transparent_white.png);
	}
	.side_bar .content_inner {
		position: relative;
		width: 230px;
		padding: 0 15px;
		margin-right: 28px;
	}
		.side_bar #flash_tapcommitments {
			display: block;
			position: absolute;
			text-align: center;
			bottom: 0;
			left: -15px;
			padding-left: 15px;
			width: 245px;
			height: 280px;
			margin: 0 15px;
			z-index: 99;
			background: url(../images/design/bg_white_fade_bottom.png) 0 -20px repeat-x;
		}
	
	
.bottom_panel {
	position: absolute;
	bottom: 80px;
	left: 0;
	width: 100%;
	display: block;
	padding: 0;
	text-align: left;
	background-color: #fff;
	z-index: 50;
}
	.bottom_panel .inner {
		padding: 0 68px 0 40px;
	}
	.bottom_panel .intro {
		max-width: 1000px;
		margin-bottom: 0;
	}

	.bottom_panel .content {
		display: none; /* defined height is requird in slideBox plugin if display: none. Prevents flash of content */
	}
	.bottom_panel .slide_button {
		color: #363636;
		font-size: 1em;
		position: absolute;
		display: -moz-inline-block;
		display: inline-block;
		padding: 5px;
		top: 13px;
		right: 63px;
		cursor: pointer;
		text-transform: uppercase;
	}
		#bottom_panel_success .slide_button {
			display: none;
		}
	.bottom_panel hr {
		height: 1px;
		color: #b0afaf;
		background-color: #b0afaf;
		border: 0;
		margin: 0 0 10px 0;
	}
	.bottom_panel .form {
		float: left;
		width: 830px;
	}

div.event ul {
    margin-left:25px;
    list-style-type:square;
}

div.event ol {
    margin-left:25px;
    list-style-type: decimal;
}

/* ----------------
	NAVIGATION
    ------------- */
#nav_main {
	position: absolute;
	top: 0;
	left: 272px;
	width: 713px;
	height: 48px;
	background: url(../images/design/nav_main.png) 0 0 no-repeat;
}
	#nav_main li {
		position: relative;
		height: 48px;
		width: 136px;
		float: left;
		margin-left: 8px;
	}
		#nav_main li.first-child {
			margin-left: 0;
		}
		#nav_main li a {
			position: relative;
			display: block;
			height: 48px;
			border: none;
			text-indent: -9999px;
		}
		#nav_main li div.hover {
			display: block;
			width: 100%;
			height: 0;
			position: absolute;
			bottom: 23px;
			left: 0;
		}
			#nav_main li.active div.hover { height: 30px; }
			#nav_main li.blue div.hover { background-image: url(../images/design/bg_transparent_blue.png); }
			#nav_main li.green div.hover { background-image: url(../images/design/bg_transparent_green.png); }
			#nav_main li.yellow div.hover { background-image: url(../images/design/bg_transparent_yellow.png); }
			#nav_main li.orange div.hover { background-image: url(../images/design/bg_transparent_orange.png); }
			#nav_main li.magento div.hover { background-image: url(../images/design/bg_transparent_magento.png); }
		

#nav_top {
}

#nav_footer li {
	float: left;
	margin: 0 40px 0 0;
	text-transform: uppercase;
	color: #363636;
	font-size: 0.8em;
	font-weight: bold;
}
	#nav_footer li a {
		color: #363636;
	}	
		#nav_footer li.sound {
/*			margin-left: 40px;*/
			display: none;
		}
			body#index #nav_footer li.sound {
				display: block;
			}
		#nav_footer li.sound .icon_sound,
		#nav_footer li.sound .icon_sound.on {
			display: -moz-inline-block;
			display: inline-block;
			width: 12px;
			height: 15px;
			margin: 0 5px;
			background: url(../images/design/icon_sound_on.png) 50% 50% no-repeat;
			vertical-align: -4px;
		}
			#nav_footer li.sound .icon_sound.off {
				background: none;
			}
		#nav_footer li.sound a,
		#nav_footer li.sound span { color: #cccccc; }
		#nav_footer li.sound a.active { color: #363636; }
		
		#nav_footer li.email a {
			padding-left: 30px;
			background: url(../images/design/icon_email.gif) 0 50% no-repeat;
		}

/* ----------------
	TYPEOGRAPHY
    ------------- */
#footer a,
#at16pf a /* id from add this pop-up div */ {
	border: none;
}

.modules p {
	font-size: 1em;
    margin-right: 20px;
}

body#downloads h2 { background-color: #f7931e; }
body#pledge h2 { background-color: #f1e731; }

body#downloads h3,
body#downloads b { color: #f7931e; }

h3.success {
	display: block;
	padding: 2em;
	text-align: center;
}

.total_pledges {
	height: 44px;
	padding: 25px 70px 0 0;
	display: -moz-inline-block;
	display: inline-block;
	background: url(../images/design/bg_arrows.png) 100% 0 no-repeat;
}

#content ul {
	margin-top: 1em;
}
#content ul li {
	margin-bottom: 1em;
}


.preview_download {
	width: 362px;
	height: 216px;
	background: url(../images/design/download_default.jpg) 50% 50% no-repeat;
}
	.preview_download img {
		display: none;
	}

#content .list_download {
	margin: 0;
	border-top: 2px solid #f7931e;
}
	#content .list_download b {
		text-transform: uppercase;
		font-size: 1.3em;
	}
	#content .list_download li {
		margin: 0;
		padding: 1em 0;
		border-bottom: 1px solid #f7931e;
	}
		#content .list_download ul {
			margin: 0.5em 0 0 0;
			padding: 0;
		}
		#content .list_download li ul li {
			float: left;
			border: 0;
			padding: 0;
/*			margin-right: 1em;*/
		}
			#content .list_download li ul li a {
				display: block;
				font-size: 1.3em;
				font-weight: bold;
				padding: 0;
				padding-right: 1em;
			}
				#content .list_download li ul li a:hover {
					border: 0;
					color: #333;
				}

.instructions {
	display: -moz-inline-block;
	display: inline-block;
	color: #363636;
	text-transform: uppercase;
	font-size: 12px;
	background-color: #f1e731;
	padding: 4px 10px 5px;
}

.intro {
	margin-bottom: 2em;
}
	.intro p {
		color: #010101;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 22px;
		line-height: 20px;
		margin-bottom: 10px;
	}

.side_bar .content_inner {
	text-align: left;
	font-size: 0.8em;
}

.twitter_feed {
	padding: 2em;
}

	.twitter_feed li {
		padding-top: 1em;
		border-bottom: 1px dashed #000;
	}

	.twitter_feed .date {
		font-family: "Times New Roman", serif;
		font-style: italic;
	}
	
	.twitter_feed p.text {
		margin-bottom: 0;
	}
	
	.twitter_feed a,
	.twitter_feed a:link,
	.twitter_feed a:visited { 
		color: #ee3897; 
		text-decoration: none;
	}
	.twitter_feed a:hover,
	.twitter_feed a:active {
	    color: #ee3897;
		border-bottom: 1px dotted #ee3897;
	}
	
.video_links {
	width: 230px;
    margin-top: 3em;
	text-align: center;
    color: #939393;
    text-transform: uppercase;
}
	.video_link a {
		display: block;
		border-top: 1px solid #d3d3d3; 
		margin-top: 5px;
		padding: 2px;
		padding-bottom: 0;
		text-align: left;
	}
	
	.video_link a:hover,
	.video_link a:active,
	.video_link:hover a {
	    color: #00b2d9;
		border-bottom: none;
		border-color: #00b2d9;
	}
		.video_link {
		    background-color: #ebebeb;
		    border-bottom: 1px solid #dedede;
		 	margin: 0 auto 5px auto;
		    width: 115px; 
		    padding: 5px 5px 0 5px;
		}
		.video_links .video_link div {
			background-position: 0 -64px;
		}

		.video_links .video_link:hover {
			cursor: pointer;
		}
		.video_links .video_link:hover div {
		    background-position: 0 0;
		}
			.video_link div {
			    height: 64px; 
			    margin: 0 auto;
			    background-repeat: no-repeat; 
			    background-position: 0 0;
			}

.side_bar h3 {
	margin: 1em 0 0 0;
	width: 118px;
	height: 73px;
	text-indent: -9999px;
}

h3.twitter { background: url(../images/design/twitter_feed.png) 0 0 no-repeat; }
h3.videos {	background: url(../images/design/videos.png) 0 0 no-repeat; }


/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
.bear-form {
	position: relative;
}
	.bear-form label,
	.bear-form fieldset legend {
		font-weight: bold;
	}
		.bear-form .element-content label,
		.bear-form fieldset ol label {
			font-weight: normal;
		}
	.bear-form .element-wrapper {
		width: 215px;
	}

	.bear-form #element-question_2,
	.bear-form #element-question_3,
	.bear-form #element-question_4,
	.bear-form #element-name,
	.bear-form #element-avatar {
		float: left;
		margin-bottom: 1em;
	}
		.bear-form #element-question_2 { clear: left; }
		
		.bear-form #element-question_3,
		.bear-form #element-question_4 {
			margin-top: -4em;
		}
		
		.bear-form #element-avatar {
			float: none;
			position: absolute;
			right: 0;
			top: -3.3em;
			width: 120px;
		}
			.bear-form #element-avatar .element-content .input-type-file {
				margin-top: 3px;
			}
			.bear-form #element-avatar label {
				display: none;
			}

	.bear-form #element-submit {
		position: absolute;
		top: 130px;
		right: 0;
		width: 120px;
		text-align: center;
	}
	
.form-errors {
	max-width: 600px;
	margin-bottom: 1em;
	padding: 1em;
	background-color: #FFFCCF;
	border: 1px solid #EFEAA4;
}
	.form-errors li {
		margin-bottom: 0.5em;
	}
	.form-errors b {
		color: #5F1212;
	}
	
/* hide messages for each form field */
.element-content .errors { display: none !important; }

/* ----------------
	SPONSORS
    ------------- */

body#sponsors h2 {
	background-color: #ed3f96;
}

body#sponsors .intro {
	width: 465px;
	margin-bottom: 54px;
}

#content .sponsor_list ul {
	margin-top: 0;
}

#content .sponsor_list li {
	margin-bottom: 0;
	float: left;
	margin-bottom: 20px;
	margin-right: 66px;
	height: 62px;
}

#content .sponsor_list li a:hover {
	border-bottom: none !important;
}

#content .sponsor_list li img {
	vertical-align: bottom;
	max-height: 62px; /* In cases when an image is taller that 62px won't break the layout */
}

/* ----------------
	MISC
    ------------- */
.float_left {float: left;}
.float_right {float: right;}
.align_left {text-align: left;}
.align_right {text-align: right;}
.align_center {text-align: center;}
.clear {clear: both;}


.w_05 { width: 5%; }
.w_10 { width: 10%; }
.w_20 { width: 20%; }
.w_25 { width: 25%; }
.w_33 { width: 33%; }
.w_40 { width: 40%; }
.w_50 { width: 50%; }
.w_60 { width: 60%; }
.w_66 { width: 66%; }
.w_80 { width: 80%; }
.w_100 { width: 100%; }


/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared, or add the element's class or id to the declaration below
    ------------- */ 
.clear_fix:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}