/*
 reset
*/

*{ margin:0px; padding:0px; }

html, body{ width:100%; font-size:12px; }

html{
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

ul{ list-style:none; }
img{ border:none; }

/* clearfix */
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0;font-size:1px;}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; font-size:1px; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/* end of clearfix */

input, img, select{ vertical-align:middle; }
input[type="text"],
input[type="password"],
textarea{ border:1px solid #ccc; }

input[type="checkbox"],
input[type="radio"]{ cursor:pointer; }

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{ border:1px solid #333; }

label{ cursor:pointer; }

hr{ margin:10px 0px; border:1px solid #ccc; border-width:1px 0px 0px 0px;}

/* for debug */
.e{ background-color:#FFF0F0; }

/* `Positioning
----------------------------------------------------------------------------------------------------*/
.left{ float:left; }
.right{ float:right; }
.center{ margin-left:auto; margin-right:auto; }
.clear{ clear:both; }

.top{ vertical-align:top; }
.middle{ vertical-align:middle; }
.bottom{ vertical-align:bottom; }

.absolute{ position:absolute; }
.relative{ position:relative; }
.fixed{ position:fixed; }

/* `Alignments
----------------------------------------------------------------------------------------------------*/
.inline{ display:inline; }
.block{ display:block; }

.tleft{ text-align:left !important; }
.tright{ text-align:right !important; }
.tcenter{ text-align:center !important; }

table tr.tright th,
table tr.tright td{ text-align:right; }

table tr.tleft th,
table tr.tleft td{ text-align:left; }

table tr.tcenter th,
table tr.tcenter td{ text-align:center; }

/* `Visibility
----------------------------------------------------------------------------------------------------*/
.hide{ display:none; }
.show{ display:inherit; }

/* `Margin
----------------------------------------------------------------------------------------------------*/
.m0{ margin:0px !important; }
.m5{ margin:5px !important; }
.m10{ margin:10px !important; }
.m20{ margin:20px !important; }

.mt0{ margin-top:0px !important; }
.mt5{ margin-top:5px !important; }
.mt10{ margin-top:10px !important; }
.mt20{ margin-top:20px !important; }

.mb0{ margin-bottom:0px !important; }
.mb5{ margin-bottom:5px !important; }
.mb10{ margin-bottom:10px !important; }
.mb20{ margin-bottom:20px !important; }

.ml0{ margin-left:0px !important; }
.ml5{ margin-left:5px !important; }
.ml10{ margin-left:10px !important; }
.ml20{ margin-left:20px !important; }

.mr0{ margin-right:0px !important; }
.mr5{ margin-right:5px !important; }
.mr10{ margin-right:10px !important; }
.mr20{ margin-right:20px !important; }

/* `Padding
----------------------------------------------------------------------------------------------------*/
.p0{ padding:0px; }
.p5{ padding:5px; }
.p10{ padding:10px; }
.p20{ padding:20px; }

table.p0 td,
table.p0 th{ padding:0px; }
table.p5 td,
table.p5 th{ padding:5px; }
table.p10 td,
table.p10 th{ padding:10px; }
table.p20 td,
table.p20 th{ padding:20px; }

.pt0{ padding-top:0px; }
.pt5{ padding-top:5px; }
.pt10{ padding-top:10px; }
.pt20{ padding-top:20px; }

.pt0{ padding-bottom:0px; }
.pb5{ padding-bottom:5px; }
.pb10{ padding-bottom:10px; }
.pb20{ padding-bottom:20px; }

.pl0{ padding-left:0px; }
.pl5{ padding-left:5px; }
.pl10{ padding-left:10px; }
.pl20{ padding-left:20px; }

.pr0{ padding-right:0px; }
.pr5{ padding-right:5px; }
.pr10{ padding-right:10px; }
.pr20{ padding-right:20px; }


/* `Utilities
----------------------------------------------------------------------------------------------------*/

.stretch{ width:100%; height:100%; }
.stretch-x{ width:100%; }
.stretch-y{ height:100%; }


.b{ font-weight:bolder; }
.b0{ border:none; }
.ub{ font-weight:normal; }

.pointer{ cursor:pointer; }

/* `Fonts
----------------------------------------------------------------------------------------------------*/
.f11{ font-size:11px; }
.f12{ font-size:12px; }
.f13{ font-size:13px; }

.caret{
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: top;
	border-top: 4px solid #000000;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "\2191";	
}

.caret.reverse{
	border-top: 0;
	border-bottom: 4px solid #000000;	
}

