/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Initial styles, removes default browser padding/margins
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
html, body, form, fieldset {
   margin: 0;
   padding: 0;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
	margin: 0;
  	padding: 0;
}
form label {
	cursor: pointer;
}
fieldset {
	border: none;
}
input, select, textarea {
	font-size: 100%;
}
a img { border:none; }


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	General layout
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* for a reference on ems see http://www.clagnut.com/blog/348/ */
html { 
	_font-size: 101%; /* IE hack */  
	overflow: -moz-scrollbars-vertical;
}
body {
	font: 62.5% "Segoe UI", Arial, sans-serif; 
	background: #F6F6F6 url(../images/body-bg.gif) top left repeat-x;
	color: #222;
}
.container_top {	
	/*overflow: hidden;*/
	margin: 8em auto 0 auto;
	width: 918px;
	padding: 10px 10px 0 10px;
	background: #FFF url(../images/container_top-bg.gif) top left no-repeat;
	position: relative;
}
.container_bottom {
	float: left;
	width: 878px;
	padding: 20px 28px 30px 30px;
	margin-left: -10px;
	background: #FFF url(../images/container_bottom-bg.gif) bottom left no-repeat;
	
}
footer {
	font: 62.5% "Segoe UI", Arial, sans-serif; 
	text-align:center
}
div.footer { clear:both; text-align:center; position:relative; top:17px;}
		

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Universal CSS image replacement
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.container_top h1 {		
	background-position: top left;
	background-repeat: no-repeat;
	font-size: 0%;
	line-height: 0px;
	text-indent: -200em;
	white-space: nowrap;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	General styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
p {  /*font-size needs to be specified on the immediate element level, not on the containing element level!! */
	font-size: 11px;
	line-height: 16px;
}
a, a:visited {
	color: #0099FF;
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}
h2 {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 37px;
	font-weight: normal;
	line-height: 40px;
	padding-bottom: 10px;
}
h3 {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: #666;
}
h4 {
	font-size: 11px;
	font-weight: 700;
}
h5 {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 25px;
	font-weight: normal;
	color: #666;
}

br.clear_page {
	float: left;
	clear: both;
	margin-bottom: 75px;
}
br.clear_it {
	clear: both;
}
ul {
		float: right;
		width: 400px;
		font-size: 12px;
		line-height: 20px;
		margin: 15px 0;
		padding: 0; 
		list-style: none;
	}
		ul li {
			padding-left: 15px;
			background: transparent url(../images/ul-bullet.gif) 0 9px no-repeat;
		}
		
ul.index {
	 float:left;
	 width:325px;
}
div.feature a.index { 
	float:right; 
	margin-right:183px; 
	margin-top:8px; 
	font-size:14px;
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Header layout & styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.container_top a h1 { cursor:pointer; }
.container_top h1 {
	position: absolute;
	width: 540px;
	height: 55px;
	top: -55px;
	left: 0;
	background-image: url(../images/h1-meshpack.gif);
}
a.rss {
	position: absolute;
	top: -122px;
	right: 5px;
	display: block;
	background: transparent url(../images/icon-rss.gif) center left no-repeat;
	color: #A0A0A0;
	padding: 0 0 0 20px;
	line-height: 14px;
	font-family: Verdana, Arial, sans-serif;
}
	a.rss:hover {
		color: #FB9F3C;
		text-decoration: none;
	}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Button Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
a.btn_large {
	display: block;
	float: left;
	height: 41px;
	background: transparent url(../images/btn_large-bg.gif) top left no-repeat;
	padding-left: 18px;
	color: #FFF;
	font-size: 14px;
	line-height: 20px;
	margin: -6px; /* remember to compensate for this when spacing instances of these buttons elsewhere */
}
	a.btn_large span {
		display: block;
		height: 32px;
		background: transparent url(../images/btn_large-bg.gif) top right no-repeat;
		padding-right: 18px;
		padding-top: 9px;
		cursor: pointer;
	}
	/*
	a.btn_large:hover { 
		background-position: 0 -41px;
		text-decoration: none;
	}
	a.btn_large:hover span { 
		background-position: 100% -41px;
	}
	*/

a.btn_small {
	display: block;
	float: left;
	height: 37px;
	background: transparent url(../images/btn_small-bg.gif) top left no-repeat;
	padding-left: 15px;
	color: #FFF;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	margin: -6px; /* remember to compensate for this when spacing instances of these buttons elsewhere */
}
	a.btn_small span {
		display: block;
		height: 27px;
		background: transparent url(../images/btn_small-bg.gif) top right no-repeat;
		padding-right: 15px;
		padding-top: 10px;
		cursor: pointer;
	}
	a.btn_small:hover { 
		/*background-position: 0 -37px;*/
		text-decoration: none;
	}
	/*
	a.btn_small:hover span { 
		background-position: 100% -37px;
	}*/
	

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Login Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
div.login {
	text-align:center;
}
	div.login img.banner {
		
	}
	div.login fieldset {
		text-align:center;
		padding:0;
		margin:0;
		font-size:160%;
	}
		div.login fieldset label {
			display:block;
			padding-bottom:28px;
			font-weight:bold;
			color:#636363;
		}
		div.login fieldset input.text {
			width:308px;
			margin-left:80px;
		}
		div.login fieldset input.submit {
			width:115px;
			height:39px;
			vertical-align:middle;
			margin-top:-3px;
		}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Homepage Content Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
div.feature {
	float: left;
	padding: 0 0 30px 0;
	border-bottom: solid 1px #CCC;
	width:100%;
}
	div.feature img.hero {
		float: left;
		width: 380px;
		height: 237px;
		margin: 0 50px 0 0;
	}
	div.feature h2 {
		float: left;
		width: 325px;
		margin: 15px 0 5px 0;	
	}
	div.feature p {
		float: left;
		width: 325px;
		font-size: 12px;
		line-height: 20px;
	}
	div.feature a {
		margin-top: 16px;
	}

div.four_up {
	float: left;
	width: 150px;
	padding: 25px 30px 10px 35px;
}
	div.four_up .icon {
		height:	120px;
		margin: 0 auto;
	}
		.icon img {	
			display: block;
			margin: 0 auto;
		}
	div.four_up h3 {
		margin: 0 0 10px 0;
		text-align:center;
		width: 100%;
		line-height: 100%;
	}
	div.four_up h4 {
		margin-bottom: 4px;
		text-align:center;
	}
	div.four_up p {
		margin-bottom: 19px;
		text-align:center;
		margin: 0 auto;

	}
	div.four_up p.learn_more {
		width: 60%;
		margin: auto;
		margin-top: 16px;
	}
	div.home_meshlist {
	}
		div.home_meshlist img {
			width: 138px;
			height: 116px;
		}
		div.home_meshlist h3 {
			width: 100%;
			height: 41px;
			text-align:center;
		}
	div.home_crossword {
	}
		div.home_crossword img {
			width: 126px;
			height: 120px;
		}
				div.home_crossword h3 {
			width: 100%;
			height: 41px;
			text-align:center;
		}

	div.home_corkboard {
	}
		div.home_corkboard img {
			width: 121px;
			height: 118px;
		}
				div.home_corkboard h3 {
			width: 100%;
			height: 41px;
			text-align:center;
		}

	div.home_crowdvote {
	}
		div.home_crowdvote img {
			width: 140px;
			height: 120px;
		}
				div.home_crowdvote h3 {
			width: 100%;
			height: 41px;
			text-align:center;
		}

		

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Subpage Content Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
ul.breadcrumb {
	float: left;
	list-style: none;
	margin: -15px 0 0 0;
	font-size: 11px;
}
	ul.breadcrumb li {
		float: left;
		margin-right: 5px;
		padding-left:0;
		background:none;
	}

div.app_feature {
	float: left;
	position: relative;
	width: 100%;
	min-height: 283px;
}
	div.app_feature img.app_logo {
		float: left;
		width: 415px;
		height: 105px;
		margin: 0 0 0 -15px;
	}
		div.app_feature img.app_logohome {
		float: right;
		width: 415px;
		height: 105px;
		margin: 0 0 0 -15px;
	}
	div.app_feature img.app_hero {
		position: absolute;
		top: 0;
		right: 0;
	}
	div.app_feature p {
		float: left;
		clear: both;
		width: 400px;
		font-size: 12px;
		line-height: 20px;
	}
	div.app_feature ul {
		float: left;
		clear: both;
		width: 400px;
		font-size: 12px;
		line-height: 20px;
		margin: 15px 0;
		padding: 0; 
		list-style: none;
	}
		div.app_feature ul li {
			padding-left: 15px;
			background: transparent url(../images/ul-bullet.gif) 0 9px no-repeat;
		}
	div.app_feature .callout {
		position: absolute;
		width: 385px;
		height: 283px;
		top: 310px;
		right: 0;
		margin: 0;
		padding: 25px;
		background: transparent url(../images/callout-bg.gif) top left no-repeat;
		}
	div.app_feature .feedback {
		position: absolute;
		width: 385px;
		height: 30px;
		top: 420px;
		right: 0;
		margin: 0;
		padding: 25px;
	}
		div.app_feature .callout h2 {
			font-size: 16px;
			font-weight: bold;
			line-height: 100%;
			padding-bottom: 6px;
			color: #333;
		}
		div.app_feature .callout p {
			width: 420px;
		}

#other_apps {
	position: relative;
	top: 17px;
	clear: both;
	margin: 0 auto;
	width: 938px;
	min-height: 153px;
	background: transparent url(../images/other_apps-bg.gif) 0 5px repeat-x;
}
	#other_apps .container_top {
		background-color: transparent;
		margin: 0;
		clear: both;
	}
	#other_apps .container_bottom {
		background-color: transparent;
		padding: 15px 30px 16px 30px;
		width: 878px;
	}
	#other_apps h2 {
		font-size: 16px;
		font-weight: bold;
		line-height: 100%;
		padding-bottom: 18px;
		color: #333;
	}
	#other_apps .app {
		float: left;
		width: 280px;
		padding-top: 18px;
		margin-top: -18px;
		min-height: 77px;
	}
		#other_apps .app .biglink {
			display: block;	
			position: relative;
			float: left;
			margin: 0 16px 0 0;	
			height: 50px;
			cursor: pointer;
		}
			#other_apps .app .biglink div {
				float: left;
				overflow: hidden;
			}
				#other_apps .app .biglink:hover div img {
					margin-left: 0;
				}				
			#other_apps .app .biglink img {
				border: none;
			}
			#other_apps .app .biglink span {
				position: absolute;
				top: 44px;
				margin-left: 16px;
				width: auto;
				font-size: 11px;
				white-space: nowrap;
			}
		#other_apps .app h3 {
			font-size: 18px;
			margin: 0 0 2px 0;
		}
		#other_apps .app p {
			font-weight: bold;
		}
		#other_apps .meshlists div {
			margin: -5px 0 0 -5px;
			width: 102px;
			height: 74px;
		}	
			#other_apps .meshlists .biglink img {
				width: 204px;
				height: 74px;
				margin-left: -102px;
			}					
		#other_apps .crowdvote div {
			margin: -5px 0 0 -5px;
			width: 102px;
			height: 74px;
		}	
			#other_apps .crowdvote .biglink img {
				width: 204px;
				height: 74px;
				margin-left: -102px;
			}	
		#other_apps .crossword,
		#other_apps .live_mesh {
			width: 230px;
			margin-left: 10px;
			margin-right: 25px;
			padding-left: 21px;
			padding-right: 10px;
			/*border-left: solid 1px #CCC;
			border-right: solid 1px #CCC;*/
		}
		#other_apps .crossword div {
			margin: -5px 0 0 -4px;
			width: 87px;
			height: 86px;
		}		
			#other_apps .crossword .biglink img {
				width: 174px;
				height: 86px;
				margin-left: -87px;
			}		
		#other_apps .live_mesh div {
			margin: -14px 0 0 -3px;
			width: 90px;
			height: 89px;
		}
			#other_apps .live_mesh .biglink {
				margin-left: -4px;
			}
			#other_apps .live_mesh img {
				width: 180px; 
				height: 89px;
				margin-left: -90px;
			}
		#other_apps .corkboard {
			width: 239px;
		}
		#other_apps .corkboard div {
			margin: -5px 0 0 -4px;
			width: 84px;
			height: 84px;
		}
			#other_apps .corkboard img {
				width: 168px; 
				height: 84px;
				margin-left: -84px;
			}