/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
    height: 100%;
    font-size:100%;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
section, header, nav
{
    display: block;
}

@media screen and (max-width: 1220px)
{
    .inner_wrapper
    {
        width:100%;
        display:block;
    }
    .inner_header
    {
        width:100%;
        display:block;
    }
    .main_contents
    {
        width:100%;
        display:block;
    }
    .main_contents .inner
    {
        width:98%;
        padding:0 1%;
    }
    .left_panel
    {
        width:23%;
        margin:3% 1% 3% 0;
    }
    .left_panel ul li a
    {
        width:100%;
    }
    .right_panel
    {
        width:75%;
        margin:3% 0;
    }
    .form_header
    {
        width:96%;
        padding:3% 2%;
    }
    .form_header h1
    {

        font-size:2em;
        width:30%;
    }
    .search_part
    {
        width:54%;
    }
    .search
    {
        margin-top: 1%;
        width: 65%;
    }
    input.s_textbox
    {
        width:85%;
        padding-left:1%;
    }
    input.s_button
    {
        width:15%;
    }
    a.add_employee
    {
        width:27%;
        margin-top:4px;
        padding:0 2%;
    }
    a.add_employee img
    {
        margin-left:0px;
    }
    a.add_employee span
    {
        left:2px;
    }
    .form_detail
    {
        width:100%;
        display:block;
    }
    .form_detail table
    {
        width:100%;
        display:block;
    }
    .footer_main
    {
        width:100%;
        display:block;
    }
    .footer
    {
        width:96%;
        padding:2%;
    }
}
@media screen and (max-width: 1100px)
{
    .search_part
    {
        width:70%;
    }
}
@media screen and (max-width: 826px)
{
    .search_part {
        width: 53%;
    }
    .search {
        width: 86%;
    }
    a.add_employee
    {
        width:7%;
        margin-top:4px;
        padding:0 2%;
        border:none;
    }
    a.add_employee img
    {
        margin-left:0px;
    }
    a.add_employee span
    {
        display:none;
    }
    .footer p.copyright
    {
        display:block;
        text-align:center;
        width:100%;
    }
    a.need_help
    {
        display:block;
        text-align:center;
        width:100%;
    }
}
@media screen and (max-width: 642px)
{
    .left_panel
    {
        width:100%;
        margin:3% 0 3% 0;
    }
    .right_panel
    {
        width:100%;
        display:block;
    }
}
@media screen and (max-width: 392px)
{
    div.wrapper
    {
        width:96%;
        margin:2%;
        display:block;
    }
    div.white_part
    {
        width:92%;
        padding:4%;
        display:block;
    }
    img.logo 
    {
        width:98%;
        margin-left:1%;
        margin-right:1%;
    }
    div.username, div.password
    {
        width:100%;
    }
    div.username img, div.password img
    {
        padding:3%;
        width:20%;
        height:20%;
        background:none;
    }
    div.username input, div.password input
    {
        width:80%;
        padding-left:2%;
        font-size:1em;
    }
    input.login_button
    {
        font-size: 1.5em;
        margin: 8% 0;
        padding: 3% 0;
        width: 100%;
    }
    .forgot
    {
        width:100%;
        display:block;
    }
    .for_pass a
    {
        width:48%;
    }
    .reg_now a
    {
        width:50%;
    }
    div.grey_part
    {
        width:100%;
        padding:5% 0;
    }
}
@media screen and (max-width:767px){
    .mytable .wrapper_div{
        width: 100%;
    }
    .mytable .wrapper_div .section{
        width: 100%;
        display: block;
        padding: 0;
    }
    .mytable .wrapper_div .section select{
        height: 250px;
    }

    .mytable .wrapper_div .section:first-child{
        padding: 0 10px;
    }

    .mytable .wrapper_div .section:last-child{
        padding: 0 10px;
    }
    .mytable .wrapper_div .section:last-child > div{
        margin-top: 10px;
        margin-bottom:10px;
    } 
    .mytable .wrapper_div .section select.text-field{
        height:250px !important;
    }
    .mytable .wrapper_div .section textarea.text-field{
        height:250px !important;
    }
    .mytable .wrapper_div .section .text-field{
        padding:0;
        width: 90%;
    }
    .mytable .btn_section {
        margin-top: 15px;
    }
}