/*
    ---------   General html5 css and class tools
*/

body{
    width: 100%;
    min-width: 1000px;
    margin: 0 auto 0 auto;
}
.after:after{
    content: '.';
    height:0;
    line-height: 0;
    display:block;
    clear:both;
    visibility:hidden;
}
br, .clear{
    clear:both;
}
.block{
    display:block;
}
.dispNone{
    display:none;
}
.floatl{
    display:block;
    float:left
}
.floatr{
    display:block;
    float:right;
}
.padd0{
    padding: 0px;
}
.padd5{
    padding:5px;
}
.padd10{
    padding: 10px;
}
.padd15{
    padding: 15px;
}
.mar0{
    margin: 0px;
}
.mar5{
    margin: 5px;
}
.mar10{
    margin:10px;
}
.mar15{
    margin: 15px;
}
.absolute{
    position: absolute;
}
.abstop{
    top: 0;
}
.absleft{
    left: 0;
}
.absright{
    right: 0;
}
.absbottom{
    bottom: 0;
}
.relative{
    position: relative;
}
.rad5
{
    border-radius: 5px;
}
.rad10
{
    border-radius: 10px;
}
.rad15
{
    border-radius: 15px;
}
.ul-disc{
    list-style-type: disc;
    padding: 5px;
}
/*
    this section contains visual rules.
*/

.width50{
    width: 50px;
}
.width100{
    width: 100px;
}
.width150{
    width: 150px;
}
.width200{
    width: 200px;
}
.width250{
    width: 250px;
}
.width300{
    width: 300px;
}
.width350{
    width: 350px;
}
.width400{
    width: 400px;
}
.width450{
    width: 450px;
}
.width500{
    width: 500px;
}
.width550{
    width: 550px;
}
.width600{
    width: 600px;
}
.width650{
    width: 650px;
}
.width700{
    width: 700px;
}
.width750{
    width: 750px;
}
.width800{
    width: 800px;
}
.width850{
    width: 850px;
}
.width900{
    width: 900px;
}
.width950{
    width: 950px;
}
.width1000{
    width: 1000px;
}
strong, .strong, .bold{
    font-weight: bold;
}
i, .italic{
    font-style: italic;
}
.textcenter{
    text-align: center;
}
.underline{
    text-decoration: underline;
}
.border5{
    border-radius: 5px;
}
.border10{
    border-radius: 10px;
}
.border15{
    border-radius: 15px;
}
.shadow-sm{
    box-shadow: 0px 0px 10px 2px #000;
}
.shadow-med{
    box-shadow: 0px 0px 12px 5px #000;
}
.pie, .border5, .border10, .border15, .shadow-sm, .shadow-med{
    behavior: url("/html/pie/PIE.htc");
}
/*
    ---------   POPUP CSS
*/
		
.reveal-modal-bg { 
    position: fixed; 
    height: 100%;
    width: 100%;
    background: transparent url('/html/js/modal/modal-bg.png');
    z-index: 100;
    display: none;
    top: 0;
    left: 0;
    behavior: url("/html/pie/PIE.htc");
}

.reveal-modal {
    visibility: hidden;
    top: 100px; 
    left: 50%;
    margin-left: -300px;
    width: 520px;
    background: #eee;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000;
    behavior: url("/html/pie/PIE.htc");
}

.reveal-modal.small     { width: 200px; margin-left: -140px;}
.reveal-modal.medium 	{ width: 400px; margin-left: -240px;}
.reveal-modal.large 	{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 	{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
    font-size: 22px;
    line-height: .5;
    position: absolute;
    top: 8px;
    right: 11px;
    color: #aaa;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
}