/*
 * (c) T-Mobile USA, 2002-2011
 * Smartphone Mobile Hotspot
 * Rules exclusive to mobile browser
 *
 * @author Peter.Sylwester@T-Mobile.com
 * @version 1.00, 2011/10/26
 * @requires reset.css (or equivalent)
 *
 */

html,body
{
	width: 100%;
	height: 100%;
	background-color: #EEE;
}

body
{
	font-family: sans-serif;
	font-size: 1em;
	line-height: 1.5;
	border-top: 4px solid rgb(235,10,142);
}

.mbody
{
	font-family: sans-serif;
	font-size: 1em;
	line-height: 1.5;
	border-top: 4px solid #F9702A;
}

/*	FUNDAMENTALS */

#header
{
	text-align: left;
	background-color: #FFF;
}

#header h1,
#header h2
{
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	white-space: nowrap;
	font-weight: normal;
	color: rgba(0,0,0,0);
	margin: 10px 18px;
	display: inline-block;
	overflow: hidden;
}

#header h1
{
	position: relative;
	width: 152px;
	height: 26px;
	background-image: url(../assets/TMO_logo_124x26.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#header h2
{
	position: absolute;
	top: 2px;
	right: 0;
	width: 26px;
	height: 26px;
	background-image: url(../assets/HotSpot_icon_26x26.png);
	background-repeat: no-repeat;
	background-position: top left;

	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-image: url(../assets/HotSpot_icon_80x80.png);
	background-repeat: no-repeat;
	background-position: top left;
	z-index: 999;
}

/* metro style starts */

#mpcs h1,
#mpcs h2
{
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	white-space: nowrap;
	font-weight: normal;
	color: rgba(0,0,0,0);
	margin: 10px 18px;
	display: inline-block;
	overflow: hidden;
	text-align: left;
	/*background-color: #FFF;*/
}

#mpcs h1
{
	position: relative;
	width: 152px;
	height: 26px;
	background-image: url(../assets/MetroPCS-logo-small.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#mpcs h2
{
	position: absolute;
	top: 2px;
	right: 0;
	width: 26px;
	height: 26px;
	background-image: url(../assets/mpcs_icon_36x36.png);
	background-repeat: no-repeat;
	background-position: top left;

	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-image: url(../assets/mpcs_icon_72x72.png);
	background-repeat: no-repeat;
	background-position: top left;
	z-index: 999;
}

/* metro style ends */

#article
{
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 1em;
	background-color: #FFF;
}

#article .title
{
	background-color: #008CA8;
	background: -moz-linear-gradient(top, #42AFC4, #00778C);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#42AFC4), to(#00778C));
	background: linear-gradient(top, #42AFC4, #00778C);
	padding: 12px 18px;
}

#article .mtitle
{
	background-color: #008CA8;
	background: -moz-linear-gradient(top, #151449, #151449);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#151449), to(#151449));
	background: linear-gradient(top, #151449, #151449);
	padding: 12px 18px;
}

#article .title > h1
{
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	color: #FFF;
	overflow: hidden;
	white-space: nowrap;

/*	IMAGE SUBSTITUTION */
	font-size: 0;
	color: rgba(0,0,0,0);
	top: 0;
	right: 0;
	width: 240px;
	height: 64px;
	background-image: url(../assets/HotSpot_type2.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#article .mtitle > h1
{
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	color: #FFF;
	overflow: hidden;
	white-space: nowrap;

/*	IMAGE SUBSTITUTION */
	font-size: 0;
	color: rgba(0,0,0,0);
	top: 0;
	right: 0;
	width: 240px;
	height: 64px;
	background-image: url(../assets/4GMobile-Hotspot-logo-small.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#article .section
{
	margin: 0;
	padding: 0;
	color: #689;
	line-height: 1.3;
	display: none;
}

#article .section.show
{
	display: block;
}

#article .section > h2
{
	margin: 20px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: bold;
	font-style: normal;
}

#article .section p
{
	margin: 20px;
}

#article .section p.center
{
	text-align: left;
}

#article .section p.hot
{
	color: #9C0058;
}

#article p.tail
{
	font-size: smaller;
	color: #9C0058;
	margin: 2em;
	text-align: left;
}

#footer
{
	border-top: 1px solid silver;
}

#footer p
{
	font-size: smaller;
	text-align: left;
	padding: 1em 2em;
	color: #888;
}

#footer p:after
{
	content: ".";
	color: rgba(0,0,0,0);
	display: block;
}

/*	DISCLAIMERS */

#footer p.disclaimer
{
	display: block;
}

body.static #footer p.disclaimer.static,
body.faq #footer p.disclaimer.faq,
body.qualified #footer p.disclaimer.qualified,
body.unqualified #footer p.disclaimer.unqualified,
body.prepaid #footer p.disclaimer.prepaid,
body.flexpay #footer p.disclaimer.flexpay,
body.restricted #footer p.disclaimer.restricted
{
	display: block;
}

/* 	LEDGER-BOX */

fieldset
{
	margin: 0;
	padding: 0;
	border: none;
}

.ledger-box
{
	border: 1px solid silver;
	padding: 0 16px;
	margin: 0 16px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBF0F5), color-stop(0.15, #FCFEFD), color-stop(0.85, #FCFEFD), to(#EBF0F5));
	background: -moz-linear-gradient(top, #EBF0F5, #FCFEFD, #FCFEFD, #FCFEFD, #FCFEFD, #EBF0F5);
	background: linear-gradient(top, #EBF0F5, #FCFEFD, #FCFEFD, #FCFEFD, #FCFEFD, #EBF0F5);
	text-align: center;
}

.ledger-box hr
{
	color: #FFF;
	background-color: #FFF;
	border: 2px dotted #DDD;
	border-style: none none solid;
	margin: 0.5em 1em;
}

.ledger-box h3 {
    background-color: #484848;
    color: #FFFFFF;
    font-size: 1.2em;
    padding: 0.2em 0 0.2em 18px
}

.ledger-box table
{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid silver;
	position: relative;
}
.ledger-box td
{
	text-align: left;
	vertical-align: top;
	color: #689;
}
.ledger-box tr.spacer
{
	font-size: 4px;
}
.ledger-box tr.heading
{
	background-color: #EEF3F7;
	background: -moz-linear-gradient(top, #FFFFFF, #EBF0F5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EBF0F5));
}
.ledger-box tr.heading td
{
	border-top: 1px solid silver;
}

.ledger-box .normaltext,
.detail-box .normaltext
{
	font-family: "Swiss721-Light","Lucida Grande","Trebuchet MS",Lucida,sans-serif;
	font-size: 15px;
	color: #777777;
}
.ledger-box td .normaltext
{
	font-size: 100%;
	color: #777777;
}


/*	INPUT ELEMENTS */

input[type="checkbox"]
{
	/*
	display: none;
	background-image: url(../assets/checkbox_checked.png); /* for preload */
	*/
}

input[type="checkbox"]+label
{
	display: inline-block;
	padding: 1em 1em 2em 58px;
	min-height: 2em;
	/*
	background-image: url(../assets/checkbox.png);
	background-position: 10px 10px;
	background-repeat: no-repeat;
	*/
	font-size: smaller;	
	background-color: #EBF0F5;
}

input[type="checkbox"]:checked+label
{
	/*background-image: url(../assets/checkbox_checked.png);*/
}

input[type="button"]
{
	display: inline-block;
	position: relative;
	padding: 10px 15px;
	margin: 1em 0 0 0;
	font-weight: bold;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 9px;
	font-size: larger;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
	-moz-box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
	box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
}

input[type="button"]:active
{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

input[type="button"].submitor
{
	color: white;
	background-color: #75B948;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86D252), color-stop(0.5, #75B948), to(#6AA741));
	background: -moz-linear-gradient(top, #86D252, #75B948, #6AA741);
	background: linear-gradient(top, #86D252, #75B948, #6AA741);
}

/* adding this section for solving the double click */
input[type="button"].submitor:active 
{
	background: #558634; 
	color: #AAA;
}
/* */

input[type="submit"]
{
	display: inline-block;
	position: relative;
	padding: 10px 10px;
	margin: 1em 0 0 0;
	font-weight: bold;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 9px;
	font-size: larger;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
	-moz-box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
	box-shadow: 0px 2px 8px rgba(64, 96, 128, 0.3);
}

input[type="submit"]:active
{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

input[type="submit"].submit-button
{
	color: white;
	background-color: #75B948;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86D252), color-stop(0.5, #75B948), to(#6AA741));
	background: -moz-linear-gradient(top, #86D252, #75B948, #6AA741);
	background: linear-gradient(top, #86D252, #75B948, #6AA741);
	/*margin-left: 72px;*/
    	margin-top: 10px;
}


p.clause
{
	font-size: smaller;
	margin-top: 0;
}

p.terms
{
	display: none;
}

span.termslink
{
	cursor: pointer;
	background-color: transparent;
	text-decoration: underline;
	color: #008CA8;
}
span.termslink:hover
{
	text-decoration: underline;
	color: #444;
}

span.termslink:after
{
	content: ".";
}


/* 	FAQ */

#faq
{
	background-color: #FFF;
}

#faq dl
{
	margin: 0;
	padding: 0;
	cursor: pointer;
	border-bottom: 1px solid #689;
}

#faq dl dt
{
	margin: 0;
	padding: 12px 20px 12px 36px;
	background-color: #D9E2E6;
	background: -moz-linear-gradient(top, rgb(236,241,243), rgb(255,255,255), rgb(236,241,243), rgb(217,226,230));
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236,241,243)), color-stop(0.3, rgb(255,255,255)), to(rgb(217,226,230)));
	background: linear-gradient(top, rgb(236,241,243), rgb(255,255,255), rgb(236,241,243), rgb(217,226,230));
	color: #000;
}

#faq dl dt:before
{
	content: url(../assets/arrow_right.gif);
	margin-left: -16px;
}

#faq dl.hot dt:before
{
	content: url(../assets/arrow_down.gif);
	margin-left: -16px;
}

#faq dl dd
{
	display: none;
	margin: 1em;
	padding: 0;
}

#faq dl.hot dd
{
	display: block;
}

#faq dl.hot dt
{
	color: white;
	background: #008Ca8;
}

/*	UTILITY RULES */
.normaltext
{
	font-size: larger;
	color: #EB0A8E;
}
.hot { color: #9C0058; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.normal { font-weight: normal; }
.none { display: none; }
.price
{
	font-size: larger;
	color: rgb(235,10,142) !important;
}

hr.divider
{
	color: #FFF;
	background-color: #FFF;
	border: 2px dotted #DDD;
	border-style: none none dotted;
	margin: 1em 0;
}

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	width: 100%;
	clear: both;
	float: none;
	visibility: hidden;
}

.nobr,
a.tel
{
	white-space: nowrap;
}

/*	DEFAULT T-MOBILE STYLES */

a, a:link, a:visited
{
	cursor: pointer;
	background-color: transparent;
	text-decoration: underline;
	color: #008CA8;
}
a:hover, a:active
{
	text-decoration: underline;
	color: #444;
}
a img
{
	border: none;
}
.ledger-box.list-item,
{
	display: block; 
	margin: 0;
	padding: 0.5em 0 0.5em 18px;
	min-height: 1.3em;
	line-height: 1.3em;
	font-size: 1.3em;
	position: relative;
	vertical-align: middle; 
	border-width: 0 0 1px 0;
	border-color: #dae2e7;
	border-style: solid;
	background-color: #fcfcfc; 
}
.list-item a:after
{
	content: url(../assets/arrow_right.gif);
	float: right;
	position: relative;
	right: 18px;
	top: 0;
}

.ledger-box..list-item a:after,
.ledger-box..list-item li a:after 
{
	top: 7px;
}
.list-item a
{
	color: #000000;
	text-decoration: none; 
	position: relative;
	font-size: 1.5em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	 display:block; width:100%; height:100%;
}