@import "main-mobile.css";
body {
    background: #ffffff;
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    margin: 0;
    padding: 0;
}

.inputWithText{
    vertical-align: top;
}
.no-background
{
	background-image: none !important;

}
.inputWithText span{
    display: inline;
}
.inputWithText font{
    display: block;
    height: 1px;
}
#jsSelectBox{
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    cursor: pointer;
    padding: 2px 0 2px 2px;
    appearance:menulist;
    -moz-appearance:menulist; /* Firefox */
    -webkit-appearance:menulist; /* Safari and Chrome */
}
#jsSelectOuter{
    position: relative;
    width: 85%;
    display: inline-block;
}
#jsSelect{
    display: none;
    padding: 0;
    padding-left: 2px;
    position: absolute;
    z-index: 99;
    background-color: #ffffff;
    border: 1px solid #a8a8a8;
    list-style: none;
    width: 100%;
    top: 6px;
    color: #000000;
}

#faq section{
    width: 49%;
    display: inline-block;
}

#faq .faq-row * {
    vertical-align: top;
}
#faq .faq-row{
    padding-top: 10px;
}

 #faq .groupTitle, #faq .question{
    padding: 5px;
}

#faq .question{
    font-size: 130%;
}
#faq .question:hover{
    cursor: pointer;
    text-decoration: underline;
}
#faq .answer{
    display: none;
    padding: 0 5px 10px 5px;
}

#jsSelect ul{
     list-style: none;
     padding: 0;
 }
#jsSelect .jsSelectGroup{
    font-weight: bold;
}
#jsSelect .jsSelectOption{
    padding-left: 4px;
}
#jsSelect .jsSelectOption:hover{
    background-color: #cecece;
}

@viewport {
    width: device-width;
}
@media (min-device-width: 801px) and (min-width: 801px) {

    body {
        text-align: center;
    }

    table input {
        width: auto;
        height: auto;
    }

    img, fieldset {
        border: None;
    }

    fieldset {
        clear: both;
        margin: 0;
        padding: 2px 0 2px 0;
    }

    .btn, .btn a {
        display: block;
        width: 134px !important;
        height: 27px;
        border: none;
        font-family: arial, helvetica, sans-serif !important;
        line-height: 27px !important;
        background: url(../images/button.jpg) top left no-repeat;
        text-align: center;
        color: #ffffff !important;
        font-weight: bold;
        text-decoration: none;
        padding: 0;
        margin: 0;
        float: left;
    }

    form .btn {
        padding-bottom: 4px;
    }

    h1, h2, h3 {
        font-weight: normal;
        margin: 0;
        padding: 0;
    }

    th {
        font-weight: bold;
        text-align: left;
        padding-left: 3.5px;
    }

    #hamburgerNav {
        display: none;
    }

    #container {
        width: 800px;
        margin: 5px auto 0 auto;
        border: 1px solid;
        text-align: left;
    }

    #header {
        padding: 0 10px 0 0;
        height: 80px;
        border-bottom: 1px solid;
        overflow: none;
    }

    #footer {
        height: 24px;
        line-height: 24px;
        border-top: 1px solid;
        border-bottom: 1px solid;
        text-align: center;
        overflow: none;
    }

    #logo {
        width: 240px;
        height: 80px;
        display: block;
        float: left;
    }

    #header p {
        width: 500px;
        float: right;
        font-size: 10px;
        line-height: 10px;
        height: 10px;
        text-transform: uppercase;
        text-align: right;
        padding-bottom: 5px;
    }

    #nav {
        clear: both !important;
        display: block;
    }

    #nav {
        clear: both;
        margin: 0;
        padding: 0 40px 0 0;
        height: 24px;
        border-bottom: 1px solid;
    }

    #nav li {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
    }

    #nav li a {
        height: 24px;
        line-height: 24px;
        display: block;
        float: left;
        padding-left: 25px;
        margin: 0 10px 0 10px;
        text-decoration: none;
        font-weight: bold;
        float: right;
    }

    #nav a.home {
        background: url(../images/home.gif) 0 5px no-repeat;
    }

    #nav a.faq {
        background: url(../images/faq.gif) 0 5px no-repeat;
    }

    #nav a.new_ticket {
        background: url(../images/new_ticket.gif) 0 5px no-repeat;
    }

    #nav a.my_tickets {
        background: url(../images/my_tickets.gif) 0 5px no-repeat;
    }

    #nav a.ticket_status {
        background: url(../images/ticket_status.gif) 0 5px no-repeat;
    }

    #nav a.log_out {
        background: url(../images/logout.gif) 0 5px no-repeat;
    }

    #nav a.forum {
        background: url(../images/forum.png) 0 5px no-repeat;
    }

    #content {
        clear: both;
        padding: 2px 10px 10px 10px;
        line-height: 14pt;
        margin: 5px auto 5px auto;
    }

    #content select {
        width: 85%
    }

    #content form {
        margin: 0;
        padding: 0;
    }

    #content form.status_form fieldset {
        clear: none;
    }

    #content form label {
        display: block;
        width: 60px;
        padding-right: 10px;
        text-align: right;
        float: left;
        font-weight: bold;
    }

    #content #index form input {
        width: 175px;
        float: left;
    }

    #content #bar {
        width: 21px;
        height: auto;
        display: block;
        float: left;
    }

    #ticketform {
        padding: 20px 20px 50px 20px;
        width: 600px;
        margin: 20px auto 20px auto;
        border: 1px solid;
    }

    #loginform {
        padding: 20px 20px 50px 20px;
        width: 400px;
        margin: 20px auto 20px auto;
        border: 1px solid;
    }

    #ticketform input, #ticketform select {
        width: 300px;
        float: left;
    }

    #loginform input {
        width: 160px;
        float: left;
    }

    #ticketform label {
        width: 130px;
        text-align: right;
        display: block;
        float: left;
        padding-right: 10px;
    }

    #loginform label {
        width: 130px;
        text-align: right;
        display: block;
        float: left;
        padding-right: 10px;
    }

    #ticketform textarea {
        width: 400px;
    }

    #ticketform .ticketsubmit {
        margin-left: 410px;
    }

    #loginform .ticketsubmit {
        margin-left: 170px;
    }

    #powered_by {
        clear: both;
        display: block;
        width: 126px;
        height: 23px;
    }

    .error {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-decoration: none;
        border: none;
        font-weight: bold;
    }

    .msg {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13.5px;
        text-decoration: none;
        font-weight: bold;
    }

    #infomessage, #warnmessage, #errormessage {
        margin-bottom: 1.5em;
        padding: 0.3em;
        font-weight: bold;
        border-top: 1px solid;
        border-bottom: 1px solid;
    }

    /* Buttons  */
    .button, .button2 {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        margin: 5px;
    }

    .button {
        border: 1px solid;
    }

    /* Generic CSS based Icons. use=> <tag class="Icon iconname">text</tag> */
    .Icon {

        width: auto;
        padding-left: 20px;
        background-position: left center;
        background-repeat: no-repeat;
        color: #006699;
        text-decoration: none;
    }

    a.Icon {
    }

    a.Icon:hover {
        text-decoration: underline;
    }

    .Icon.Ticket {
        background: url(../images/icons/ticket.gif) 0 0 no-repeat;
    }

    .Icon.webTicket {
        background: url(../images/icons/ticket_source_web.gif) 0 0 no-repeat;
    }

    .Icon.emailTicket {
        background: url(../images/icons/ticket_source_email.gif) 0 0 no-repeat;
    }

    .Icon.phoneTicket {
        background: url(../images/icons/ticket_source_phone.gif) 0 0 no-repeat;
    }

    .Icon.otherTicket {
        background: url(../images/icons/ticket_source_other.gif) 0 0 no-repeat;
    }

    .Icon.attachment {
        background-image: url(../images/icons/attachment.gif);
    }

    .Icon.file {
        background-image: url(../images/icons/attachment.gif);
    }

    .Icon.refresh {
        background-image: url(../images/icons/refresh.png);
    }

    .Icon.thread {
        font-weight: bold;
        font-size: 1em;
        background-image: url(../images/icons/thread.png);
    }

    /* Ticket view (Messages and Responses) */
    #ticketthread table.message {
        margin: 10px 0 5px 0;
    }

    #ticketthread table.response {
        margin-bottom: 5px;
    }

    table.message, table.response {
        border: 1px solid;
        border-bottom: none;
    }

    table.message td, table.message th, table.response td, table.response th {
        border-bottom: 1px solid;
        padding: 5px;
    }

    table.message tr.header td, table.response tr.header td {
        padding: 1px;
        padding-left: 5px;
    }

    table.message th, table.response th {
        line-height: 24px;
        font-size: 10pt;
        padding: 1px;
        padding-left: 5px;
        font-weight: bold;
    }

    /* Index page */
    #index {
        padding: 15px 0px 20px 0px;
    }

    #index h1 {
        font-size: 15pt;
    }

    .big {
        font-size: 13pt;
        line-height: 1.4em;
    }

    .lcol {
        width: 350px;
        float: left;
    }

    .rcol {
        width: 350px;
        float: right;
    }

    .clear {
        clear: both;
    }

    .lcol h3, .rcol h3 {
        font-size: 12pt;
        font-weight: bold;
        color: #ff8100;
    }

    .lcol .btn, .lcol .btn a, .rcol .btn, .rcol .btn a {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        margin: 5px;
        border: 1px solid;
    }

    #countries_child {
        height: 500px
    }

}