/**
 * @project     OTRS (http://www.otrs.org) - Customer Frontend
 * @copyright   OTRS AG
 * @license     AGPL (http://www.gnu.org/licenses/agpl.txt)
 */

/**
 * @package     OTRS Framework - Skin "Default"
 * @section     Customer
 */

@media screen,projection,tv,handheld {

/**
 * @subsection  Navigation
 */
#Navigation {
    height: 23px;
    width: 100%;
    position: relative;
    background: #d3d5d5;
    background: -moz-linear-gradient(top,  #d3d5d5 0%, #c3c5c5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d5d5), color-stop(100%,#c3c5c5));
    background: -webkit-linear-gradient(top,  #d3d5d5 0%,#c3c5c5 100%);
    background: -o-linear-gradient(top,  #d3d5d5 0%,#c3c5c5 100%);
    background: -ms-linear-gradient(top,  #d3d5d5 0%,#c3c5c5 100%);
    background: linear-gradient(to bottom,  #d3d5d5 0%,#c3c5c5 100%);
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #979999;
    clear: both;
}

#Navigation > ul {
    float: left;
}

.RTL #Navigation > ul {
    float: right;
}

#Navigation > ul > li > ul {
    position: absolute;
    top: 24px;
    left: 1px;
    min-width: 140px;
    display: none;
    -webkit-box-shadow: 0 1px 2px #DDD inset, 0 1px 0 #E8E8E8;
    box-shadow: 0 1px 2px #DDD inset, 0 1px 0 #E8E8E8;
    border: 1px solid #bbb;
    border-top: 1px solid #999;
    border-radius: 0px 0px 5px 5px;
}

.RTL #Navigation > ul > li > ul {
    right: 1px;
}

#Navigation > ul > li:hover ul, 
#Navigation > ul > li a:focus + ul,
#Navigation > ul > li ul.Expanded {
    display: block;
    z-index: 1000;
}

#Navigation .Individual {
    float: right;
}

.RTL #Navigation .Individual {
    float: left;
}

#Navigation > ul > li {
    margin-left: -2px;
    float: left;
    position: relative;
}

.RTL #Navigation > ul > li {
    float: right;
    margin: -1px -2px 0 0;
}

#Navigation > ul > li > a {
    padding: 5px 11px;
    color: #111;
    font-size: 11px;
    background: url(../img/controlrow_isolator.png) no-repeat right 2px;
    display: block;
    outline: none;
    text-shadow: 0 1px 0 #EAEEEE;
}

#Navigation > ul > li > ul a, #Navigation > ul > li > ul .Footer {
    color: #222;
    font-size: 11px;
    padding: 4px 6px;
    display: block;
    background-color: #C4C6C6;
    text-shadow: 0 1px 0 #EAEEEE;
    border-top: 1px solid #aaa;
}

#Navigation > ul > li > ul .Footer {
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding-bottom: 0px;
    padding-top: 2px;
    background-color: #aaa;
}

#Navigation > ul > li > ul a:hover, 
#Navigation > ul > li > ul a:focus, 
#Navigation > ul > li > ul a.SubSelected {
    background-color: #ddd;
}

.RTL #Navigation li:first-child a,
#Navigation .Last a {
    background-image: none;
}

#Navigation li:active {
    margin-top: -2px;
    background: #949494;
    background: -moz-linear-gradient(top,  #949494 0%, #c4c4c4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(100%,#c4c4c4));
    background: -webkit-linear-gradient(top,  #949494 0%,#c4c4c4 100%);
    background: -o-linear-gradient(top,  #949494 0%,#c4c4c4 100%);
    background: -ms-linear-gradient(top,  #949494 0%,#c4c4c4 100%);
    background: linear-gradient(to bottom,  #949494 0%,#c4c4c4 100%);
    border-top: 1px solid #727272;
    border-left: 1px solid #727272;
}

#Navigation .Selected + li {
    margin-left: -1px;
}

#Navigation .Selected + li a {
    padding-left: 10px;
}

#Navigation li:active > a {
    padding-top: 7px;
    padding-bottom: 3px;
    color: #222;
    text-shadow: 0 1px 0 #DADDDD;
}

#Navigation .Selected,
#Navigation .Selected:active {
    margin-top: -1px;
    background: #343435;
    background: -moz-linear-gradient(top,  #343435 0%, #565656 50%, #333333 50%, #333333 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#343435), color-stop(50%,#565656), color-stop(50%,#333333), color-stop(100%,#333333));
    background: -webkit-linear-gradient(top,  #343435 0%,#565656 50%,#333333 50%,#333333 100%);
    background: -o-linear-gradient(top,  #343435 0%,#565656 50%,#333333 50%,#333333 100%);
    background: -ms-linear-gradient(top,  #343435 0%,#565656 50%,#333333 50%,#333333 100%);
    background: linear-gradient(to bottom,  #343435 0%,#565656 50%,#333333 50%,#333333 100%);
    border-bottom: 1px solid #666;
}

#Navigation .Selected:active {
    margin-top: -2px;
}

#Navigation .Selected > a {
    margin-right: -1px;
    padding: 6px 10px 4px 11px;
    color: #FFF;
    background: none;
    text-shadow: 0 -1px 0 #000;
}

.RTL #Navigation .Selected a,
.RTL #Navigation .Selected a:active {
    padding: 6px 11px 4px 10px;
}

#Navigation .Selected a:active {
    padding: 6px 10px 4px 11px;
    color: #FFF;
    text-shadow: 0 1px 0 #000;
}

/**
 * @subsection  Action Row / MessageBox (Notification)
 */

.MessageBox,
.ActionRow {
    font-size: 11px;
    background: #f0f2f2;
    background: -moz-linear-gradient(top,  #f0f2f2 0%, #e6e7e7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f2f2), color-stop(100%,#e6e7e7));
    background: -webkit-linear-gradient(top,  #f0f2f2 0%,#e6e7e7 100%);
    background: -o-linear-gradient(top,  #f0f2f2 0%,#e6e7e7 100%);
    background: -ms-linear-gradient(top,  #f0f2f2 0%,#e6e7e7 100%);
    background: linear-gradient(to bottom,  #f0f2f2 0%,#e6e7e7 100%);
    border-top: 1px solid #F0F2F2;
    border-bottom: 1px solid #B8BBBB;
    overflow: hidden;
    text-shadow: 0 1px 0 #F6F9F9;
    clear: both;
}

.MessageBox p {
    margin: 5px 7px;
    padding: 1px 0 1px 20px;
    background-position: left;
}

.RTL .MessageBox p {
    padding: 1px 20px 1px 0;
    background-position: right;
}

.MessageBox a {
    display: none;
}

.MessageBox.Notice p {
    background: url(../img/accept.png) no-repeat;
}

.MessageBox.Error p {
    background: url(../img/decline.png) no-repeat;
}

#BottomActionRow {
    padding: 5px 9px;
    background: #f4f4f4;
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #dedfdf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#dedfdf));
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#dedfdf 100%);
    background: -o-linear-gradient(top,  #f4f4f4 0%,#dedfdf 100%);
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#dedfdf 100%);
    background: linear-gradient(to bottom,  #f4f4f4 0%,#dedfdf 100%);
    border: 1px solid #B8BBBB;
    border-radius: 3px;
}

.TicketView #BottomActionRow,
.RTL .TicketView #BottomActionRow {
    padding: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

#BottomActionRow span {
    padding: 0 5px;
}

.RTL #BottomActionRow span {
    padding-left: 0;
    padding-right: 5px;
}

.Filter {
    padding: 0 !important;
}

.Filter a {
    padding: 5px 9px;
    background: url(../img/actionrow_divider.png) no-repeat right 7px;
    text-shadow: 0 1px 0 #ECF0F0;
    display: block;
}

.RTL .Filter a {
    background-position: left;
}

.Tabs {
    padding: 5px 9px;
    float: left;
}

.RTL .Tabs {
    float: right;
}

.Tabs li {
    float: left;
}

.RTL .Tabs li {
    float: right;
}

.Tabs a {
    color: #777;
}

.Tabs a:hover {
    color: #444;
}

.Tabs .Selected {
    font-weight: bold;
    color: #444;
}

.Pagination {
    float: right;
}

.RTL .Pagination {
    float: left;
}

.Pagination a {
    padding-left: 3px;
    background: none;
    text-shadow: none;
}

.ActionRow .Last a,
.Filter .Last a {
    background: none;
}

.RTL .ActionRow .Last a {
    padding-right: 3px;
    padding-left: 0;
}

.Sortable .ActionRow {
    padding-bottom: 8px;
    border-bottom: none;
}

.Sortable #BottomActionRow {
    padding-bottom: 0;
    border-bottom: 1px solid #B8BBBB;
}

/**
 * @subsection  SerachTerms
 */

.SearchTerms {
    padding: 4px 7px;
}

.SearchTerms h2 {
    margin: 0;
    color: #222;
    font-size: 15px;
    display: inline;
    text-shadow: 0 1px 0 #EEE;
}

.SearchTerms span {
    padding: 1px 8px 0;
    margin: 0 3px;
    color: #666;
    background: #FFF;
    border: 1px solid #BBB;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 2px #DDD inset, 0 1px 0 #E8E8E8;
    box-shadow: 0 1px 2px #DDD inset, 0 1px 0 #E8E8E8;
}

.SearchTerms span a {
    font-size: 13px;
    vertical-align: bottom;
}

} /* end @media */