@charset "UTF-8";

/* =============== Apps page only ============ */

#column2 #generic_text {
	margin: 0;
	padding: 0;
	height: 230px;
}

#column2 #generic_text .center {
	text-align: center;
	text-indent: 0;
	color: #00ABBD;
}

#column2 .app_icons_div {
	margin-top: 25px;
}

#column2 .app_text {
	margin: 0;
	padding: 0;
	height: 230px;
	width: 586px;
}

/* #app1 refers to the first row of icons, #app2 refers to the second row of icons, #app3 refers to the third row of icons. If a 4th row ever exists, a new set of css instructions for #app4 must be created. In this css document, the measurements are the same for #app1, #app2, etc., but the need to separate them exists in order to fix problems in IE7 and IE6. IE8 works fine without the extra changes. NOTE: No such changes are necessary on the css file for the apps2.html page. It works properly in IE browsers.*/

#column2 a #app1, #column2 a #app2, #column2 a #app3 {
	display: none;
}

#column2 a:hover #app1, #column2 a:hover #app2, #column2 a:hover #app3 {
	display: block;
	background-color: white;
	position: absolute;
	top: 220px;
	width: 584px;
	width: 574px;
	margin-left: 3px;
	padding: 5px;
}

#column2 .app_text p, #column2 .app_text h1 {
	padding-left: 0;
	/*padding-left: 23px;*/
	padding-left: 16px;
	line-height: 1.4em;
}

#column2 .app_text h1.apps_top {
	padding-top: 28px;
}

#column2 .app_text h1.apps_top_2liner {
	padding-top: 12px;
	line-height: 1.1em;
}

#column2 .app_text .box {
	overflow: hidden;
}

#column2 .app_icons_div p.instruction {
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: red;
	text-align: left;
	padding-left: 18px;
}

#column2 .app_text p.soon {
	font-size: 36px;
	padding-top: 15px;
}

#column2 .app_icons_div .app_text .box {
	border: 2px red solid;
	height: 100%;
}

#column2 .app_icons_div img.app_icons {
	margin: 0;
	padding: 0;
	border: none;
	float: left;
	margin: 5px 14px 5px 0;
}

#column2 .app_icons_div #app1_icon, #column2 .app_icons_div #app11_icon, #column2 .app_icons_div #app21_icon {
	margin-left: 25px;
}

#column2 .app_icons_div a {
	text-decoration: none;
}

#column2 .app_icons_div a:hover img {
	opacity: 0.5;
	/* filter:alpha(opacity=50); */ /* for IE */
}

#column2 a:hover #app1 img, #column2 a:hover #app2 img, #column2 a:hover #app3 img {
	border: none;
	padding: 0;
	margin: 0;
	float: left;
	position: relative;
	padding: 5px 16px;
	background-color: #FFF;
	opacity: 1;
}