html {
    height: 100%;
}
body
{
    /*background:  #D7C69A url(../image/bg-body.jpg) repeat left bottom;	 	background: #ffffff url(../image/bg-body.png) repeat;*/ /*background: #ffffff url(../PHED/bg-body.png) repeat;*/
    font-family: "Times New Roman" , Times, serif;    
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: linear-gradient(#FDF9F0, #F2DCAE) no-repeat;
    background-color: #F2DCAE;
    margin: 0;
    min-height: 670px;    
    height: 100%;
}
#background
{
    /*background: url(../image/bg-pattern.jpg) repeat-x center top; 	background: #ffffff url(../image/bk1.png) repeat;*/ /*background: #e4e4e4 none repeat scroll 0 0;*/ /*background: #ffffff url(../PHED/bg-body.png) repeat;*/
    min-height: 650px;    
}

#page
{
    width: 1320px;
    margin: 0 auto;
}
img
{
    border: 0;
}
/*------------------------------ Sprites ------------------------------
#navigation li, #navigation li a:hover, #navigation li.selected a {
	background-image: url(../image/bg-menu.png);
	background-repeat: repeat-x;
}

/*
#contents div.box, #contents div.box > div, #contents div.body {
	background-image: url(../image/content-box.png);
	background-repeat: no-repeat;
}

#main div.box, 
#main div.box > div, #main div.box > div > div {
	background-image: url(../image/bg-box.png);
	background-repeat: no-repeat;
}*/
/*------------------------------ HEADER ------------------------------*/
#header
{
    margin-bottom: 20px; /*	padding-top: 20px;*/
    padding-top: 1px;
}
/** Logo **/
#logo
{
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
/** Navigation **/
#navigation
{
    /*background: url(../image/bg-navigation.png) no-repeat;*/
    clear: both;
    height: 50px;
    width: 860px;
    margin: 0 auto;
    padding: 1px;
}
#navigation ul
{
    display: inline-block;
    width: 860px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li
{
    float: left;
    background-position: 0 -118px;
    background-repeat: no-repeat;
    height: 49px;
    width: 122px;
    margin: 0;
    padding-left: 1px;
    text-align: center;
}
#navigation li:first-child
{
    background: none;
    margin-left: 0;
    padding-left: 0;
}
#navigation li a
{
    color: #fff;
    display: block;
    font: bold 14px/48px Arial, Helvetica, sans-serif;
    height: 49px;
    text-decoration: none;
    text-transform: uppercase;
}
#navigation li a:hover
{
    background-position: 0 -59px;
    color: #6d6157;
}
#navigation li.selected a
{
    background-position: 0 0;
    color: #e4e1bd;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents
{
    display: inline-block; /*width: 865px;*/
    width: 100%; /*padding: 0 47px;*/
}
#contents h1
{
    /*color: #2abde9;*/
    color: maroon;
    font: 22px/20px "Times New Roman" , Times, serif;
    margin: 18px 0 1px;
    padding-left: 2px;
    padding-top: 5%;
    text-transform: uppercase;
}
#contents div.body h1, #contents h2
{
    color: #316e66;
    font: 30px/30px "Times New Roman" , Times, serif;
    margin: 0 0 18px;
    text-transform: uppercase;
}
#contents h2
{
    font-size: 22px;
    margin: 0 0 30px;
}
#contents h2 a
{
    color: #2c9688;
    text-decoration: none;
}
#contents p
{
    color: #5a4535;
    font-size: 15px;
    line-height: 30px;
    margin: 0;
    padding: 0 0 24px 2px;
}
#contents p a
{
    color: #5a4535;
}
#contents p a:hover, #news div.sidebar ul li a:hover
{
    color: #917157;
}
/** box-shadow **/
#contents div.box
{
    background-position: left bottom;
    margin-bottom: 20px;
    margin-left: 1px;
    padding: 0 0 6px;
}
#contents div.box > div
{
    background-position: -1745px top;
    padding: 6px 0 0;
}
#contents div.body
{
    background-position: -871px top;
    background-repeat: repeat-y;
    min-height: 980px;
    padding: 30px 40px 0;
}
/** Adbox **/
#adbox
{
    /*background: url(../image/bg-adbox.png) no-repeat left top;*/
    width: 852px;
    margin: 0 auto;
    padding: 4px 5px 18px;
}
#adbox p
{
    font-size: 16px;
}
.ads
{
    float: right;
    width: 220px;
    border-left: 1px solid #bbbbbb;
    margin-left: 20px;
    padding-left: 20px;
}
hr
{
    border: 0;
    border-top: 1px solid #ffffff;
    margin-bottom: 10px;
}
/** MAIN **/
#main
{
    float: left;
    min-height: 100px; /*	width: 566px;*/
    width: 100%;
}
#main div.box
{
    background-position: left bottom;
    margin-bottom: 1px;
    padding: 0 0 1px;
}
#main div.box > div
{
    /*	background-position: -1145px top;*/
    padding: 2px 0 0;
}
#main div.box > div > div
{
    background-position: -572px top;
    background-repeat: repeat-y;
    padding: 17px;
}
#main div.box h3
{
    color: #316e66;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom: 1px dotted #9c8964;
    margin: 0;
    padding: 0 0 12px;
    text-transform: uppercase;
}
#main div.box h4
{
    font: 22px/24px "Times New Roman" , Times, serif;
    font-weight: normal;
    margin: 6px 0 0;
}
#main div.box h4 a
{
    color: #5a4535;
    text-decoration: none;
}
#main div.box ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
#main div.box ul li
{
    border-bottom: 1px dotted #9c8964;
}
#main div.box ul li span
{
    color: #5a4535;
    display: block;
    font-size: 14px;
    margin-bottom: 12px;
}
#main div.box ul li p
{
    line-height: 24px;
    padding: 0 0 3px;
}


/*------------------------------ FOOTER ------------------------------*/
#footer
{
    /*	color: #594334;     color: #594334;*/
    color: maroon;
    font-size: 14px !important; /*line-height: 48px;*/
    line-height: 20px;
    margin: -38px 0 2px;
    padding-top: 20px;
    text-transform: uppercase;
}
#footer > div
{
    /*	background-color: #ac9e94;     background-color:#FFEDD5;     background-color:#FDE9CA;     background-color:#364045;     background-color:#9BD9E8;     width: 960px;*/
    background-color: #89DBF8;
    height: 60px;
    width: 1320px;
    border-bottom: 1px solid #72675f;
    border-top: 1px solid #cdbeb2;
    margin: 0 auto; /*padding: 0 20px;*/
    text-align: right;
}
#footer ul.navigation
{
    float: left;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer ul.navigation li
{
    float: left;
    margin-right: 10px;
}
#footer ul.navigation li a
{
    color: #594334;
    padding: 0 5px;
    text-decoration: none;
}
#footer ul.navigation li:first-child a
{
    border-left: 0;
    padding-left: 0;
}
#footer ul.navigation li a:hover
{
    color: #eee7c3;
}
#footer ul.navigation li.active a
{
    color: #fff;
}
#footer p
{
    margin: 0;
    text-align: center;
    text-transform: none;
    font-size: 14px;
}

/******************************************************************/

.login-form
{
    /*  background: #eee;*/
    background: #fff;
    width: 26%;
    margin: 5% auto 4% auto;
    position: relative;
    -webkit-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -webkit-animation-name: bounceIn;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: bounceIn;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    animation-name: bounceIn;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.head
{
    position: absolute; /*top: -15%;     left: 36%;*/
    top: -12%;
    left: 37%;
}
.head img
{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 6px solid rgba(221, 218, 215, 0.23);
}
.main
{
    position: relative;
}
.main h1
{
    font-size: 25px;
    color: #316e66;
    font-family: 'Open Sans' , sans-serif;
    font-weight: 400;
    padding-top: 19%;
    text-align: center;
}
.main form
{
    width: 80%;
    margin: 0 auto;
    padding: 6% 0 9% 0;
}
.main p
{
    text-align: center;
}
.main form p a
{
    color: #888;
    font-family: 'Open Sans' , sans-serif;
}
form p a:hover
{
    color: #21A957;
}
input[type="text"], input[type="password"]
{
    text-align: left;
    position: relative;
    width: 85%;
    padding: 2%; /*	background:#D3D3D3;*/
    background: #FFFFFF;
    margin-bottom: 2%;
    margin-left: 4%;
    font-family: 'Open Sans' , sans-serif;
    color: #676767;
    font-weight: 600;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 5px;
    border: 1px solid #DED6D6;
    -webkit-appearance: none;
}

input[type="text"]:focus, input[type="password"]:focus
{
    border: 1px solid #80BDFF;
    transition: 0.5s;    
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}

select
{
    text-align: left;
    position: relative;
    width: 90%;
    padding: 2%;
    background: #FFFFFF;
    margin-bottom: 2%;
    margin-left: 4%;
    font-family: 'Open Sans' , sans-serif;
    color: #676767;
    font-weight: 600;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 5px;
    border: 1px solid #DED6D6;
    -webkit-appearance: none;
    -ms-animation-name:none;
}

span
{
    text-align: left;
    position: relative;
    padding: 3%;
    margin-left: 2%;
    font-family: 'Open Sans' , sans-serif;
    font-weight: 600;
    font-size: 15px;
    outline: none;
    border: none; /*  color: #316e66;*/
    color: maroon; /*color: #2abde9;*/
    -ms-animation-name:none;
}

span b
{
    text-align: left;
    position: relative;
    font-family: "Times New Roman" , Times, serif;
    font-size: 15px;
    outline: none;
    color: #000080;
}

input[type="text"]:hover, input[type="password"]:hover
{
    border: 1px solid #80BDFF;
    transition: 0.5s;    
}

input[type="submit"]
{
    width: 91%;
    padding: 2%;
    margin-bottom: 8%; /*background-color: #5cb85c;     border-color: #4cae4c;*/
    background-color: #2abde9;
    border-color: #46b8da;
    color: #fff;
    -webkit-appearance: none;    
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    -ms-animation-name:none;
}

input[type="submit"]:hover
{
    /*background: #FFA0A0;     background: #FF8080;     color: #000000;*/
    color: #fff; /*  background-color: #449d44;     border-color: #398439;*/ /*background-color: #32b1d8;     border-color: #269abc;*/
    background-color: #28a745;
    border-color: #28a745;
}

input[type="submit"]:disabled
{
    color: #fff;
    background-color: #2abde9;
    border-color: #46b8da;
    opacity: .65;
    cursor: not-allowed;
}


/****************/
.copy-right
{
    position: absolute;
    bottom: -19%;
    left: 43.7%;
}
.copy-right p
{
    color: #fff;
    font-size: 1em;
    font-family: 'Open Sans' , sans-serif;
    font-weight: 600;
}
.copy-right p a
{
    font-family: 'Open Sans' , sans-serif;
    font-size: 1em;
    color: #21A957;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.copy-right p a:hover
{
    color: #fff;
}

.btn
{
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


.btn-success
{
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled]
{
    color: #ffffff;
    background-color: #51a351; /*background-color: #499249;*/
}

.btn-success:active, .btn-success.active
{
    background-color: #408140;
}


.btn-info
{
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info.focus, .btn-info:focus
{
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}
.btn-info:hover
{
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info.active, .btn-info:active
{
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover
{
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}
.btn-info.active, .btn-info:active
{
    background-image: none;
}






/*-----start-responsive-design------*/
@media (max-width:1440px)
{
    .login-form
    {
        width: 25%;
        margin: 3% auto 4% auto;
    }
    .main h1
    {
        padding-top: 5%;
    }
    .copy-right
    {
        bottom: -26%;
    }
}
@media (max-width:1366px)
{
    .login-form
    {
        width: 25%;
        margin: 3% auto 4% auto;
    }
    #contents h1
    {
        padding-top: 5%;
    }
}
@media (max-width:1280px)
{
    .login-form
    {
        margin: 3% auto 4% auto;
        width: 25%;
    }
    #contents h1
    {
        padding-top: 5%;
    }
    #page
    {
        width: 1024px;
        margin: 0 auto;
    }
    #footer > div
    {
        width: 1024px;
    }
    .head
    {
        position: absolute; /*top: -15%;     left: 36%;*/
        top: -13%;
        left: 33%;
    }
}
@media (max-width:1024px)
{
    .login-form
    {
        margin: 3% auto 4% auto;
        width: 25%;
    }
    #page
    {
        width: 900px;
        margin: 0 auto;
    }
    #footer > div
    {
        width: 900px;
    }
    .head
    {
        position: absolute; /*top: -15%;     left: 36%;*/
        top: -12%;
        left: 33%;
    }
}
@media (max-width:768px)
{
    .login-form
    {
        margin: 8% auto 0;
        width: 28%;
    }
    #page
    {
        width: 600px;
        margin: 0 auto;
    }
    #footer > div
    {
        width: 600px;
    }
     .head
    {
        position: absolute; /*top: -15%;     left: 36%;*/
        top: -13%;
        left: 33%;
    }
    .head img
    {
        height: 70px;
    }
}
@media (max-width:640px)
{
    .login-form
    {
        margin: 32% auto 0;
        width: 63%;
    }
    #page
    {
        width: 500px;
        margin: 0 auto;
    }
    #footer > div
    {
        width: 500px;
    }
     .head
    {
        position: absolute; /*top: -15%;     left: 36%;*/
        top: -13%;
        left: 33%;
    }
    .head img
    {
        height: 70px;
    }
}
@media (max-width:480px)
{
    .login-form
    {
        margin: 28% auto 0;
        width: 74%;
    }

    .main h1
    {
        font-size: 22px;
    }
    .head img
    {
        width: 78%;
    }
    .head
    {
        top: -15%;
        left: 34%;
    }
    input[type="text"], input[type="password"], input[type="submit"]
    {
        font-weight: 600;
        margin-bottom: 4%;
    }

}

@media (max-width:320px)
{
    .login-form
    {
        margin: 20% auto 0;
        width: 85%;
    }
    .main h1
    {
        padding-top: 20%;
        font-size: 20px;
    }
    .head img
    {
        width: 60%;
        border: 5px solid rgba(221, 218, 215, 0.23);
    }
    .head
    {
        top: -15%;
        left: 36%;
    }
    input[type="text"], input[type="password"], input[type="submit"]
    {
        font-weight: 600;
        font-size: 15px;
    }
    .main form p a
    {
        font-size: 15px;
    }
    input[type="submit"]
    {
        padding: 4%;
    }

}