/* 
 *     Document   : style
 *         Created on : 2012/10/11, 銝�� 07:13:12
 *             Author     : 982002
 *                 Description:
 *                         Purpose of the stylesheet follows.
 *                         */

 root { 
    display: block;
}
html, body { height: 100%; }
body{
    margin: 0;
    background: rgb(247, 247, 247);
    color: gray;
/*	overflow:hidden; */
	padding:0;
	border:0;
	display: block;
}
#error_msg{
    color: red;
    margin-left:28px;
}
#header{
    height: 60px;
    width: 100%;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffa200;
    padding: 3px 4px;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #ffffff 50%,
        #d6d6d6);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#ffffff),
        color-stop(0.50, #ffffff),
        to(#d6d6d6));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d6d6d6');
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 0px solid #ffbf00;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.1),
        0px 1px 0px rgba(255,255,255,1);
		z-index:10;
}
p{
color:grey;
font-weight: bold;
margin-left:-15px;
}
#footer{
text-align: center;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 15px;
height:14px;
//height:44px;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #ffffff 50%,
        #d6d6d6);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#d6d6d6),
        color-stop(0.50, #ffffff),
        to(#ffffff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6d6d6', endColorstr='#ffffff');
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    border: 0px solid #ffbf00;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 3px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.1),
        0px 1px 0px rgba(255,255,255,1);
    color: gray;
    margin-top: -47px; /* negative value of footer height */
	z-index:50;
   
}
ul{
-webkit-margin-before: 0px;
-webkit-margin-after:0px; 
}
#ntustimage{
    width:40px;
    margin-left: 20px;
    margin-top: 8px;
    z-index: 0;

}
#ntusttext{
/*    height: 68px; */
    margin-top: 5px;
    z-index: 0;
}
#help {
    width: 28px;
    z-index: 0;
}
#nav a:link {
    color: gray;
    font-weight: bold;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}
#nav a:hover{
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}
#nav a:visited {
    color: gray;
    font-weight: bold;
}
#nav a:active {
    color: gray;
    font-weight: bold;
}
#nav a {text-decoration: none;}
#nav2 a:link { font-weight: normal;}
#nav2 a {text-decoration: none;}
#nav{
width:100%;
    display:block;
    margin-right: 20px;
    float: right;
    text-align: center;
    z-index: 6;
	
  position: fixed;
  margin-top:5px;
}

#nav ul {
    float: right;
    list-style:none;
    height:50px;
}
#nav ul li {
    float: right;
    margin-right:20px;
}

		#tabs-2 ul li{
margin-top:20px;
}
#nav2{
    display:block;
    margin-left: -50px;
    margin-top: 20px;
    float: right;
    text-align: center;
    z-index: 150;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: black;
    font-weight: normal;
	white-space:normal;

}
#login_showname {
  font-size:20px; 
}
#nav2 ul {
    float: left;
    list-style:none;
    height:50px;
}
#nav2 ul li {
    float: left;
    margin-top: -10px;
    margin-left:20px;
    width: 100px;
}

#container{
    float: left;
    width: 360px;
    text-align: left;
}
#container2{
    margin-top: -20px;
    margin-left: -20px;
    float: left;
    width: 518px;
    text-align: left;
}

#container3{
    width: 400px;
    text-align: left;
}
#status{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align:left;
    margin-left:80px;
    margin-top:10px;
    color:#FF9291;
    font-weight:bolder;

}
#ipstatus{
    margin-left:82%;
	margin-top:10px;
	position:absolute;
}
#icon{
    width: 50px;
    z-index: 0;
}
a img{
    border: 0;
}
#connectani{
    margin-left: 20px;
}
#connectani-ok{
    margin-left: 20px;
}
form{
    text-align: left;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #050505;
    padding: 10px 20px;

    /*   -moz-border-radius: 10px;
 *          -webkit-border-radius:10px;
 *                 border-radius: 10px;
 *                        border: 1px solid #ada8ad;
 *                               -moz-box-shadow:
 *                                          0px 1px 3px rgba(107,80,107,0),
 *                                                     inset 0px 0px 1px rgba(186,180,186,1);
 *                                                            -webkit-box-shadow:
 *                                                                       0px 1px 3px rgba(107,80,107,0),
 *                                                                                  inset 0px 0px 1px rgba(186,180,186,1);
 *                                                                                         box-shadow:
 *                                                                                                    0px 1px 3px rgba(107,80,107,0),
 *                                                                                                               inset 0px 0px 1px rgba(186,180,186,1);*/

}
#wrapper {
    min-height: 87%;
}
#login{
    top: 0px;
    padding: 18px 6% 60px 6%;
    margin: 0 10px 35px 0;
    background: rgb(247, 247, 247);
    /*  border: 1px solid rgba(147, 184, 189,0.8);
 *        box-shadow: 
 *                  0pt 2px 5px rgba(105, 108, 109,  0.7),  
 *                            0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
 *                                  border-radius: 5px;*/
}
.main { overflow:auto; padding-bottom:44px; } /* must be same height as the footer */
#login{
    z-index: 22;
}
/**** general text styling ****/
#wrapper h1{
    color: gray;
    padding: 2px 0 10px 0;
    font-weight: bold;
    padding-bottom: 30px;
    text-align: left;
}

/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #050505;
    padding: 10px 0px 0px 20px;

}
#wrapper h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;

}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  { 
    color: rgb(190, 188, 188); 
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
    color: rgb(190, 188, 188);
    font-style: italic;
} 
input {
    outline: none;
}
/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
    width: 180px;
    margin-top: 4px;
    padding: 5px 5px 5px 5px;    
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);   
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 
.captcha{ width: 60px !important; }
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/fontomas-webfont.woff') format('woff'),
        url('fonts/fontomas-webfont.ttf') format('truetype'),
        url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** the magic icon trick ! **/
#wrapper p.button input{
    width: 100px;
    margin-top: -5px;
  //  margin-left:80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #050505;
    padding: 5px 20px 5px 12px;
    background: -moz-linear-gradient(
        top,
        #e8e8dc 0%,
        #ffffff 5%,
        #ffffff 18%,
        #e3e1dc);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#e8e8dc),
        color-stop(0.5, #ffffff),
        color-stop(0.18, #ffffff),
        to(#e3e1dc));

    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;

    border: 1px solid #ada8ad;
    -moz-box-shadow:
        0px 1px 3px rgba(107,80,107,0),
        inset 0px 0px 1px rgba(186,180,186,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(107,80,107,0),
        inset 0px 0px 1px rgba(186,180,186,1);
    box-shadow:
        0px 1px 3px rgba(107,80,107,0),
        inset 0px 0px 1px rgba(186,180,186,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0.3);


}
#wrapper p.button input:hover{
    background: rgb(194, 189, 208);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(160, 157, 174);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);  
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    margin: 5px 0;
}
#te{
    font-size:  0.625em;
    color: gray;
    width: 510px;
    margin-top: 80px;
}