Responsive Navigations Menü mit JavaScript sortieren

Fonsi-Heizer

Mitglied
Hallo Community!

Ich habe ein responsive Menü nach gebaut und soweit funktioniert auch alles.

Jedoch habe ich ein Problem mit der Sortierung dieses Menüs!

menu_normal.png
mobilemenu.png

In der Desktop Ansicht reiht er das Menü so wie ich es dargestellt haben möchte, jedoch wenn ich in der mobilen Ansicht bin wird der letzte Menüpunkt als erstes dargestellt. Könnt Ihr mir bitte helfen dieses Menü so zu sortieren das Home und Startseite als erstes angezeigt werden in der mobilen Ansicht?

Nachfolgend die Codes

CSS:
Code:
body,form {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
}

header,footer,nav,section,aside,article,figure,figcaption {
    display: block;
}

body {
    font-size: 100.01%;
}

select,input,textarea {
    font-size: 99%;
}

#container,.inside {
    position: relative;
}

#main,#left,#right {
    float: left;
    position: relative;
}

#main {
    width: 100%;
}

#left {
    margin-left: -100%;
}

#right {
    margin-right: -100%;
}

#footer {
    clear: both;
}

@media (max-width:767px) {
    #wrapper {
        margin: 0;
        width: auto;
    }

    #container {
        padding-left: 0;
        padding-right: 0;
    }

    #main,#left,#right {
        float: none;
        width: auto;
    }

    #left {
        right: 0;
        margin-left: 0;
    }

    #right {
        margin-right: 0;
    };
}

#main .inside {
    min-height: 1px;
}

img {
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    width: auto\9;
}

.ce_gallery ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.ce_gallery li {
    float: left;
}

.ce_gallery li.col_first {
    clear: left;
}

.block {
    overflow: hidden;
}

.clear,#clear {
    height: .1px;
    font-size: .1px;
    line-height: .1px;
    clear: both;
}

.invisible {
    width: 0;
    height: 0;
    left: -1000px;
    top: -1000px;
    position: absolute;
    overflow: hidden;
    display: inline;
}

.custom {
    display: block;
}

#container:after,.custom:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#mbOverlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

#mbOverlay.mbOverlayFF {
    background: transparent url("../assets/mootools/mediabox/1.4.6/images/80.png") repeat;
}

#mbOverlay.mbOverlayIE {
    position: absolute;
}

#mbCenter {
    position: absolute;
    z-index: 9999;
    left: 50%;
    overflow: hidden;
    background-color: #000;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.50);
    -khtml-box-shadow: 0 5px 20px rgba(0,0,0,0.50);
    -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.50);
    box-shadow: 0 5px 20px rgba(0,0,0,0.50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=180,Color='#000000');
}

#mbCenter.mbLoading {
    background: #000 url("../assets/mootools/mediabox/1.4.6/images/loading.gif") no-repeat center;
    -webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#mbImage {
    position: relative;
    left: 0;
    top: 0;
    font-family: Myriad,Verdana,Arial,Helvetica,sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
}

#mbBottom {
    min-height: 20px;
    font-family: Myriad,Verdana,Arial,Helvetica,sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #999;
    text-align: left;
    padding: 0 10px 10px;
}

#mbTitle,#mbPrevLink,#mbNextLink,#mbCloseLink {
    display: inline;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    font-size: 12px;
}

#mbNumber {
    display: inline;
    color: #999;
    line-height: 14px;
    font-size: 10px;
    margin: auto 10px;
}

#mbCaption {
    display: block;
    color: #999;
    line-height: 14px;
    font-size: 10px;
}

#mbPrevLink,#mbNextLink,#mbCloseLink {
    float: right;
    outline: 0;
    margin: 0 0 0 10px;
    font-weight: normal;
}

#mbPrevLink b,#mbNextLink b,#mbCloseLink b {
    color: #eee;
    font-weight: bold;
    text-decoration: underline;
}

#mbPrevLink big,#mbNextLink big,#mbCloseLink big {
    color: #eee;
    font-size: 16px;
    line-height: 14px;
    font-weight: bold;
}

#mbBottom a,#mbBottom a:link,#mbBottom a:visited {
    text-decoration: none;
    color: #ddd;
}

#mbBottom a:hover,#mbBottom a:active {
    text-decoration: underline;
    color: #fff;
}

#mbError {
    position: relative;
    font-family: Myriad,Verdana,Arial,Helvetica,sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 10px solid #700;
    padding: 10px 10px 10px;
    margin: 20px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mbError a,#mbError a:link,#mbError a:visited,#mbError a:hover,#mbError a:active {
    color: #d00;
    font-weight: bold;
    text-decoration: underline;
}
/* Style sheet basic */
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,figure,code,ol,ul,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,th,td {
    text-align: left;
    vertical-align: top;
}

blockquote,q {
    quotes: none;
}

fieldset,img {
    border: 0;
}

li {
    list-style-type: none;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

del {
    text-decoration: line-through;
}

ins {
    text-decoration: none;
}

a {
    text-decoration: none;
    color: #FF0000;
}

a:hover {
    text-decoration: underline;
}

:focus {
    outline: 0;
}

body {
    font: 13px "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
    color: #444;
}

input,button,textarea,select {
    font-size: 99%;
    font-family: inherit;
    font-weight: inherit;
}

pre,code {
    font: 12px Monaco,monospace;
}

h1,h2,h3 {
    font: 100% Tahoma,Helvetica,Arial,sans-serif;
    font-weight: normal;
    color: #000;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

table {
    font-size: inherit;
}

caption,th {
    font-weight: bold;
}

abbr,acronym {
    border-bottom: 1px dotted #666;
    font-variant: normal;
    cursor: help;
}

h1,h2 {
    margin-top: 0.75em;
}

h3,h4,h5,h6,.mtop {
    margin-top: 1em;
}

h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form,.mbot {
    margin-bottom: 13px;
}

hr {
    height: 1px;
    margin-top: 18px;
    margin-bottom: 18px;
    background-color: #ccc;
    border: 0;
    color: #ccc;
}

.center {
    text-align: center;
}

.middle {
    vertical-align: middle;
}

.bc {
    margin-bottom: 6px;
}

.ce_text blockquote {
    margin-top: -1em;
    margin-left: 1em;
    quotes: "\201C" "\201D";
}

.ce_text blockquote p {
    display: inline;
    font-size: 12px;
}

.ce_text blockquote:before {
    left: 5px;
    top: 25px;
    position: relative;
    margin-top: -1em;
    margin-right: .25em;
    font-size: 4em;
    line-height: .1em;
    color: #ccc;
    content: open-quote;
}
/* Style sheet form */
label {
    font-weight: bold;
}

.checkbox_container label,.radio_container label {
    font-weight: normal;
}

.tableless label {
    display: block;
    margin-top: 1.5em;
    padding-bottom: 3px;
}

.tableless .checkbox_container label,.tableless .radio_container label {
    display: inline;
}

input[type="text"],input[type="search"],input[type="password"],textarea {
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #444;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

input[type="text"],input[type="search"],input[type="password"] {
    width: 75%;
}

.mod_search input[type="search"] {
    width: 40%;
    margin-right: 6px;
}

.mod_search fieldset {
    margin-left: 3px;
}

textarea {
    width: 95%;
    height: 140px;
}

input[type="text"]:focus,input[type="search"]:focus,input[type="password"]:focus,textarea:focus {
    background-color: #fdf7f0;
}

input[type="search"] {
    -webkit-appearance: none;
}

#search input.text {
    border-radius: 0;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

select {
    padding: 1px;
    border: 1px solid #ccc;
    color: #444;
}

.styled_select {
    margin-top: 0;
    padding-right: 3px;
    line-height: 20px !important;
}

.styled_select.focused {
    background-color: #fdf7f0;
}

.chzn-container-single .chzn-single {
    color: #444;
}

.chzn-container-single .chzn-single span {
    padding-top: 2px;
}

.styled_select,.chzn-container-single .chzn-single span {
    font: 13px "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
}

.checkbox_container span,.radio_container span {
    display: block;
}

.checkbox_container legend,.radio_container legend {
    padding-bottom: 3px;
}

.checkbox_container legend span,.radio_container legend span {
    display: inline;
}

.checkbox_container+br,.radio_container+br {
    display: none;
}

.checkbox_container label,.checkbox_container input {
    vertical-align: middle;
}

.tableless input[type="checkbox"],x:-moz-any-link {
    top: -2px;
    position: relative;
}

.submit_container {
    margin-top: 1em;
    margin-bottom: 1em;
}

.submit_container .submit {
    padding: 5px 12px 5px 13px;
    background-color: #eee;
    background: -moz-linear-gradient(,#eee 30%,#ccc);
    background: -webkit-linear-gradient(,#eee 30%,#ccc);
    background: -o-linear-gradient(,#eee 30%,#ccc);
    background: -ms-linear-gradient(,#eee 30%,#ccc);
    background: linear-gradient(top,#eee 30%,#ccc);
    -pie-background: linear-gradient(,#eee 30%,#ccc);
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 1;
    color: #555;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
    cursor: pointer;
    text-shadow: 1px 1px 0 #eee;
}

.firefox .submit_container .submit {
    padding: 2px 12px 3px 13px;
}

.submit_container .submit:focus,.submit_container .submit:hover {
    -webkit-box-shadow: 0 0 3px #aaa;
    box-shadow: 0 0 3px #aaa;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.submit_container .submit:active {
    -webkit-box-shadow: 0 0 6px #999;
    box-shadow: 0 0 6px #999;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

form table td {
    padding-top: 3px;
    padding-bottom: 3px;
}

form table td:first-child {
    width: 28%;
    padding-top: 6px;
    padding-right: 18px;
    padding-bottom: 0;
    text-align: right;
}

.tableform table {
    width: 99%;
    margin-top: 1.5em;
    margin-bottom: 0;
}

.tableform .formbody,.tableless .formbody {
    width: 94%;
    overflow: hidden;
    margin-top: 1em;
    margin-bottom: 2em;
    padding: 0.5em 1.8em 0.5em 1em;
    background-color: #f9f9f9;
    border-left: 2px solid #FF0000;
}

.tableless .formbody {
    padding-top: 0;
}

fieldset {
    margin-top: 1em;
    border-top: 1px dotted #ddd;
}

fieldset.radio_container,fieldset.checkbox_container {
    border: 0;
}

legend {
    padding-right: 6px;
    background-color: #f9f9f9;
    color: #FF0000;
}

fieldset table {
    width: 60%;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

fieldset table td:first-child {
    width: 140px;
    text-align: left;
}

span.mandatory {
    font-weight: bold;
    color: #c00;
}

p.confirm,p.tl_confirm {
    font-size: 16px;
    color: #629300;
}

p.error {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: bold;
    color: #c00;
}

input[type="text"].error,input[type="password"].error,textarea.error {
    background-color: #ffd;
    border-color: #c00 !important;
}

input.captcha {
    width: 48px;
    margin-right: 6px;
}

span.captcha_text {
    font-weight: normal;
    color: #444;
}

*:first-child+html span.captcha_text {
    top: -3px;
    position: relative;
}

form .service {
    margin-bottom: 1.5em;
}

form .service h3 {
    margin-top: 1.5em;
}

form .service p {
    text-align: left;
    line-height: 1.5;
}

form .service label {
    margin-top: 6px;
}
/* Style sheet layout */
body {
    margin-bottom: 18px;
    background: #ddd url("../files/images/layout/body.jpg") center top no-repeat;
}

#wrapper {
    background: url("../files/images/layout/wrapper.png") left top repeat-x;
}

#header {
    width: 970px;
    margin: 0 auto;
    background: url("../files/images/layout/header.jpg") center 132px no-repeat;
}

#header .inside {
    padding-right: 5px;
    padding-left: 5px;
    z-index: 999;
}

#container {
    width: 960px;
    margin: 0 auto;
    padding: 0 5px 18px;
    background-color: #eee;
}

.twocol #container {
    width: 720px;
    padding-right: 245px;
}

#main,#right {
    padding-top: 6px;
}

#right {
    background: url("../files/images/layout/right.jpg") left top no-repeat;
    min-height: 480px;
}

#right .inside {
    padding-right: 10px;
    padding-left: 10px;
}

#footer {
    width: 970px;
    margin: 0 auto;
    background: #eee url("../files/images/layout/footer.jpg") center top no-repeat;
}

#footer .inside {
    overflow: hidden;
    padding: 12px 5px;
    background: url("../files/images/layout/footer-inside.jpg") center bottom no-repeat;
}

.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
    float: left;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;
}

.g1 {
    width: 60px;
}

.g2 {
    width: 140px;
}

.g3 {
    width: 220px;
}

.g4 {
    width: 300px;
}

.g5 {
    width: 380px;
}

.g6 {
    width: 460px;
}

.g7 {
    width: 540px;
}

.g8 {
    width: 620px;
}

.g9 {
    width: 700px;
}

.g10 {
    width: 780px;
}

.g11 {
    width: 860px;
}

.g12 {
    width: 940px;
}

.mod_article>.block {
    margin-right: 10px;
    margin-left: 10px;
}

.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block {
    margin-right: 0;
    margin-left: 0;
}

.gr {
    margin-right: 20px !important;
}

#logo {
    top: 49px;
    position: absolute;
}

#search {
    right: 0;
    top: 6px;
    position: absolute;
    text-align: right;
}

#search input {
    vertical-align: top;
}

#search input.text {
    width: 164px;
    padding: 3px 0 3px 9px;
    background: url("../files/images/layout/search-field.png") left top no-repeat;
    border: 0;
    font-size: 11px;
}

#links {
    width: 400px;
    height: 280px;
    left: 505px;
    top: 179px;
    position: absolute;
    overflow: hidden;
}

.header_link {
    width: 400px;
    height: 280px;
    position: absolute;
    text-indent: -999em;
}

#see-in-action {
    background: url("../files/images/layout/typolight-trans.png") left top no-repeat;
}

#lufthansa {
    background: url("../files/images/layout/lufthansa-trans.png") left top no-repeat;
}

#mc-fit {
    background: url("../files/images/layout/mc-fit-trans.png") left top no-repeat;
}

#demba-ba {
    background: url("../files/images/layout/demba-ba-trans.png") left top no-repeat;
}

#footer h2 {
    padding-bottom: 3px;
    border-bottom: 1px dotted #999;
    font-size: 14px;
    color: #222;
}

#footer p,#footer li,#footer a {
    font-size: 11px;
    line-height: 1.5;
    color: #666;
}

#footer .news h2 {
    padding-top: 1px;
    padding-left: 21px;
    background: url("../files/images/icons/rss-trans.png") left center no-repeat;
}

#footer .network h2 {
    padding-top: 1px;
    padding-left: 21px;
    background: url("../files/images/icons/network-trans.png") left center no-repeat;
}

#footer .casestudy h2 {
    padding-top: 1px;
    padding-left: 21px;
    background: url("../files/images/icons/casestudy-trans.png") left center no-repeat;
}

#footer .blog h2 {
    padding-top: 1px;
    padding-left: 21px;
    background: url("../files/images/icons/blog-trans.png") left center no-repeat;
}

#copyright {
    margin-top: 30px;
    text-align: center;
}

#copyright,#copyright a {
    font-size: 11px;
    color: #666;
}

#icon-demo h2 {
    padding-left: 60px;
    background: url("../files/images/icons/demo-trans.png") left center no-repeat;
}

#icon-documentation h2 {
    padding-left: 60px;
    background: url("../files/images/icons/documentation-trans.png") left center no-repeat;
}

#icon-extensions h2 {
    padding-left: 60px;
    background: url("../files/images/icons/extensions-trans.png") left center no-repeat;
}

#icon-templates h2 {
    padding-left: 60px;
    background: url("../files/images/icons/templates-trans.png") left center no-repeat;
}

#icon-team h2 {
    padding-left: 60px;
    background: url("../files/images/icons/team-trans.png") left center no-repeat;
}

#icon-partners h2 {
    padding-left: 60px;
    background: url("../files/images/icons/partners-trans.png") left center no-repeat;
}

#icon-editing h2 {
    padding-left: 60px;
    background: url("../files/images/icons/editing-trans.png") left center no-repeat;
}

#icon-structure h2 {
    padding-left: 60px;
    background: url("../files/images/icons/structure-trans.png") left center no-repeat;
}

#icon-permissions h2 {
    padding-left: 60px;
    background: url("../files/images/icons/permissions-trans.png") left center no-repeat;
}

#icon-forms h2 {
    padding-left: 60px;
    background: url("../files/images/icons/forms-trans.png") left center no-repeat;
}

#icon-search h2 {
    padding-left: 60px;
    background: url("../files/images/icons/search-trans.png") left center no-repeat;
}

#icon-css h2 {
    padding-left: 60px;
    background: url("../files/images/icons/css-trans.png") left center no-repeat;
}

#icon-files h2 {
    padding-left: 60px;
    background: url("../files/images/icons/files-trans.png") left center no-repeat;
}

#icon-news h2 {
    padding-left: 60px;
    background: url("../files/images/icons/news-trans.png") left center no-repeat;
}

#icon-calendar h2 {
    padding-left: 60px;
    background: url("../files/images/icons/calendar-trans.png") left center no-repeat;
}

#icon-newsletter h2 {
    padding-left: 60px;
    background: url("../files/images/icons/newsletter-trans.png") left center no-repeat;
}

#icon-accessibility h2 {
    padding-left: 60px;
    background: url("../files/images/icons/accessibility-trans.png") left center no-repeat;
}

#icon-liveupdate h2 {
    padding-left: 60px;
    background: url("../files/images/icons/liveupdate-trans.png") left center no-repeat;
}

#icon-php5 h2 {
    padding-left: 60px;
    background: url("../files/images/icons/php5-trans.png") left center no-repeat;
}

#icon-dev h2 {
    padding-left: 60px;
    background: url("../files/images/icons/devguide-trans.png") left center no-repeat;
}

#icon-facebook h2 {
    padding-left: 60px;
    background: url("../files/images/icons/facebook-big-trans.png") left center no-repeat;
}

#icon-twitter h2 {
    padding-left: 60px;
    background: url("../files/images/icons/twitter-trans.png") left center no-repeat;
}

#icon-community h2 {
    padding-left: 60px;
    background: url("../files/images/icons/community-trans.png") left center no-repeat;
}

.flag {
    padding-left: 24px;
}

.flag-es {
    background: url("../files/images/flags/es-trans.png") left center no-repeat;
}

.flag-fr {
    background: url("../files/images/flags/fr-trans.png") left center no-repeat;
}

.flag-gb {
    background: url("../files/images/flags/gb-trans.png") left center no-repeat;
}

.flag-it {
    background: url("../files/images/flags/it-trans.png") left center no-repeat;
}

.flag-pl {
    background: url("../files/images/flags/pl-trans.png") left center no-repeat;
}

.flag-ro {
    background: url("../files/images/flags/ro-trans.png") left center no-repeat;
}

.flag-ru {
    background: url("../files/images/flags/ru-trans.png") left center no-repeat;
}

.flag-se {
    background: url("../files/images/flags/se-trans.png") left center no-repeat;
}

.subheader .button {
    width: 64px;
    height: 64px;
    margin: 94px auto 0;
}

#button-features {
    background: url("../files/images/icons/buttons-trans.png") 0px top no-repeat;
}

#button-features:hover {
    background-position: 0px bottom;
}

#button-onlinedemo {
    background: url("../files/images/icons/buttons-trans.png") -64px top no-repeat;
}

#button-onlinedemo:hover {
    background-position: -64px bottom;
}

#button-teampage {
    background: url("../files/images/icons/buttons-trans.png") -128px top no-repeat;
}

#button-teampage:hover {
    background-position: -128px bottom;
}

.button-download {
    background: url("../files/images/icons/buttons-trans.png") -192px top no-repeat;
}

.button-download:hover {
    background-position: -192px bottom;
}

#button-userguide {
    background: url("../files/images/icons/buttons-trans.png") -256px top no-repeat;
}

#button-userguide:hover {
    background-position: -256px bottom;
}

#button-devguide {
    background: url("../files/images/icons/buttons-trans.png") -320px top no-repeat;
}

#button-devguide:hover {
    background-position: -320px bottom;
}

#button-books {
    background: url("../files/images/icons/buttons-trans.png") -384px top no-repeat;
}

#button-books:hover {
    background-position: -384px bottom;
}

#button-liveupdate {
    background: url("../files/images/icons/buttons-trans.png") -448px top no-repeat;
}

#button-liveupdate:hover {
    background-position: -448px bottom;
}

#button-extensions {
    background: url("../files/images/icons/buttons-trans.png") -512px top no-repeat;
}

#button-extensions:hover {
    background-position: -512px bottom;
}

#button-variety {
    background: url("../files/images/icons/buttons-trans.png") -576px top no-repeat;
}

#button-variety:hover {
    background-position: -576px bottom;
}

#button-news {
    background: url("../files/images/icons/buttons-trans.png") -640px top no-repeat;
}

#button-news:hover {
    background-position: -640px bottom;
}

#button-faq {
    background: url("../files/images/icons/buttons-trans.png") -704px top no-repeat;
}

#button-faq:hover {
    background-position: -704px bottom;
}

#button-support {
    background: url("../files/images/icons/buttons-trans.png") -768px top no-repeat;
}

#button-support:hover {
    background-position: -768px bottom;
}

.box {
    width: 216px;
    margin-top: 9px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: #f9f9f9 url("../files/images/layout/box.jpg") left top repeat-x;
    border: 2px solid #ddd;
    font-size: 12px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.box h2 {
    margin-top: 6px;
    margin-bottom: 9px;
    font-size: 18px;
}

.box,.box p {
    text-align: center;
}

/* Style sheet navigation */

#topmenu {
    position: absolute;
}

#topmenu li {
    float: left;
}

#topmenu li.first {
    padding-left: 2px;
    background: url("../files/images/layout/separator.gif") left top no-repeat;
}

#topmenu a,#topmenu span {
    display: block;
    padding: 8px 14px 8px 12px;
    background: url("../files/images/layout/separator.gif") right top no-repeat;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
}

#mainmenu {
    padding-top: 68px;
}

#mainmenu li {
    float: right;
    padding: 0 3px;
    line-height: 1;
}

#mainmenu a,#mainmenu span {
    display: block;
    padding: 7px 12px 9px 15px;
    font-size: 14px;
    text-decoration: none;
    color: #444;
}

#mainmenu span {
    cursor: default;
}

#mainmenu li:hover,#mainmenu li.active,#mainmenu li.trail {
    background: url("../files/images/layout/mright.png") right top no-repeat;
}

#mainmenu li:hover span,#mainmenu li.active span,#mainmenu li.trail span {
    background: url("../files/images/layout/mleft.png") left top no-repeat;
    color: #fff;
}

#mainmenu ul.level_2 {
    width: 170px;
    left: -999em;
    position: absolute;
    padding-bottom: 5px;
    background: url("../files/images/layout/mbot.png") left bottom no-repeat;
}

#mainmenu ul.level_2 li {
    position: relative;
    float: none;
    padding: 0 3px 1px;
    background-color: #fff;
}

#mainmenu ul.level_2 a,#mainmenu ul.level_2 span {
    padding: 4px 9px 5px;
    font-size: 12px;
    color: #444;
    background-image: none;
}

#mainmenu ul.level_2 li:hover,#mainmenu ul.level_2 li.active,#mainmenu ul.level_2 li.trail {
    background-image: none;
}

#mainmenu ul.level_2 li:hover a,#mainmenu ul.level_2 li.active a,#mainmenu ul.level_2 li.trail a,#mainmenu ul.level_2 li:hover span,#mainmenu ul.level_2 li.active span,#mainmenu ul.level_2 li.trail span {
    background: url("../files/images/layout/msub.png") left top no-repeat;
    color: #444;
}

#mainmenu ul.level_2 li.first {
    padding-top: 6px;
    background: url("../files/images/layout/mtop.png") left top no-repeat;
}

#mainmenu li:hover ul.level_2 {
    left: auto;
}

#mainmenu li.home {
    width: 42px;
    height: 30px;
    overflow: hidden;
    margin-right: 2px;
    margin-left: 24px;
    background: none;
}

#mainmenu a.home,#mainmenu span.home {
    background: url("../files/images/layout/mhome.png") left top no-repeat !important;
    text-indent: -999em;
}

#mainmenu a.home:hover,#mainmenu span.home {
    background-position: left bottom !important;
}

#menutog {
    display: none;
}

#submenu ul.level_1,.mod_newsmenu ul.level_1 {
    border-top: 1px dotted #bbb;
}

#submenu a,#submenu span,.mod_newsmenu a,.mod_newsmenu span {
    display: block;
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dotted #bbb;
    text-decoration: none;
}

#submenu a:hover,.mod_newsmenu a:hover {
    text-decoration: underline;
}

#submenu a.trail {
    color: #444;
}

#submenu .level_2 li {
    padding-left: 18px;
}

.mod_newsmenu li.year {
    margin-top: 1em;
    font-weight: bold;
}

.mod_newsmenu .level_2 li {
    font-weight: normal;
}

.mod_newsmenu .level_2 {
    margin-top: 6px;
    margin-bottom: 6px;
}

.mod_breadcrumb {
    top: 9px;
    position: relative;
    margin-bottom: 1em;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 11px;
}

.mod_breadcrumb ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.mod_breadcrumb li {
    float: left;
}

.mod_breadcrumb li:after {
    margin-right: 3px;
    padding-left: 1px;
    content: " > ";
}

.mod_breadcrumb li.active:after {
    display: none;
}

body.home .mod_breadcrumb {
    display: none;
}

.mod_booknav {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 1em;
    border-top: 1px dotted #bbb;
}

.mod_booknav li {
    width: 45%;
    float: left;
}

.mod_booknav li.up {
    width: 10%;
    text-align: center;
}

.mod_booknav li.next {
    text-align: right;
}

.pagination {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 1em;
    border-top: 1px dotted #bbb;
}

.pagination p {
    width: 30%;
    float: left;
    margin-bottom: 0;
}

.pagination ul {
    width: 70%;
    float: right;
    margin-bottom: 0;
    text-align: right;
}

.pagination li {
    display: inline;
    padding-right: 2px;
    padding-left: 2px;
}

/* Style sheet content */
.ce_gallery {
    margin-top: 1em;
}

.ce_image,.ce_download,.ce_downloads,.ce_code,.mod_randomImage {
    margin-bottom: 1em;
}

.ce_text p,.ce_hyperlink,.ce_list,.ce_text ol,.ce_text ul,.ce_table td,.teaser,.comment,.listing table.single_record td,.mod_search .context,.mod_faqlist li,.formbody .explanation {
    line-height: 1.5;
}

.gad {
    margin: 1.25em 1em 1em;
}

.ce_text pre,.comment_default pre,.comment_default blockquote {
    margin-right: 1em;
    margin-left: 1em;
    padding: 9px;
    background-color: #f9f9f9;
    border: 2px solid #ddd;
}

.mod_newslist p,.mod_newsarchive p,.mod_newsreader p,.mod_listing p,.pleft p {
    text-align: left;
}

.info,.time {
    font-size: 11px;
    color: #999;
}

.pdf_link {
    right: 10px;
    position: absolute;
    margin-top: 26px;
}

.ce_text pre,.ce_code pre,.comment_default pre,.comment_default blockquote {
    line-height: 1.25;
}

.ce_code pre {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
}

.greylink a {
    color: #444;
}

a.anchor {
    display: none;
}

h2:hover a.anchor {
    display: inline;
    color: #ccc;
}

.more a:visited,.mod_faqlist a:visited {
    color: #808080;
}

.ce_code {
    padding: 9px;
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    margin: 3px 22px 16px 22px !important;
}

.syntaxhighlighter {
    padding: 0 !important;
}

.syntaxhighlighter,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter span {
    font-size: 12px !important;
}

.syntaxhighlighter .line.alt1 .content,.syntaxhighlighter .line.alt2 .content {
    padding-left: 0 !important;
    background: #f9f9f9 !important;
}

.syntaxhighlighter .plain,.syntaxhighlighter .plain a,.syntaxhighlighter .functions {
    color: #444 !important;
}

.image_container {
    float: left;
}

.ce_text p img,.ce_image .image_container {
    margin: 3px 1em 0 1em;
}

.mod_csRandom .image_container {
    margin-top: 3px;
    margin-bottom: 3px;
}

.ce_gallery .image_container img,.mod_csRandom img,.mod_csView img {
    padding: 2px;
    background-color: #fff;
    border: 1px solid #bbb;
}

.image_container .caption {
    margin-top: -2px;
    padding: 2px 3px 3px;
    background-color: #ccc;
    font-size: 10px;
}

*:first-child+html .image_container .caption {
    margin-top: 1px;
}

*:first-child+html .tpls .image_container .caption {
    width: 292px;
    height: 14px;
}

.tpls .image_container .shop {
    float: right;
}

*:first-child+html .tpls .image_container .shop {
    top: -14px;
    position: relative;
    float: none;
    display: block;
    text-align: right;
}

.ce_gallery li {
    padding: 0 3px 12px;
}

.usermeeting li {
    padding-bottom: 6px;
}

.ce_list ol,.ce_text ol,.toc ol {
    margin-left: 3em;
}

.ce_list ol li,.ce_text ol li {
    list-style: decimal outside;
}

.ce_list ul,.ce_text ul,.formbody ul,.mod_sitemap ul ul {
    overflow: hidden;
    margin-left: 1.5em;
}

.description ul,.releasenotes ul {
    margin-left: 0.5em;
}

.ce_list ul li,.ce_text ul li,.formbody ul li,.description ul li,.releasenotes ul li {
    padding-left: 18px;
    background: url("../files/images/layout/arrow.gif") left 3px no-repeat;
}

.comment ul li {
    margin-left: 24px;
    list-style-type: disc;
}

ul.chzn-results li {
    background-image: none;
}

.toc ol ol {
    margin-bottom: 0;
    margin-left: 2em;
}

.toc ol li {
    line-height: 1.5;
    list-style: decimal outside;
}

.toc ol li li,.t3 ol li {
    list-style: lower-latin outside;
}

.mod_sitemap li {
    line-height: 1.5;
}

.mod_sitemap .level_1 ul {
    margin-bottom: 0;
}

.mod_sitemap span {
    display: block;
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 16px;
}

.ce_text dl {
    overflow: hidden;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    background-color: #f9f9f9;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    line-height: 1.5;
}

.ce_text dt {
    width: 108px;
    float: left;
    border-top: 1px solid #ddd;
    font-weight: bold;
}

.ce_text dd {
    margin-left: 120px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.ce_text dt,.ce_text dd {
    padding: 2px 6px;
    font-size: 12px;
}

.ce_text dt.odd,.ce_text dd.odd {
    background-color: #f0f0f0;
}

.ce_table {
    margin-top: 5px;
    margin-bottom: 4px;
    padding: 1px 1em;
}

.mod_newslist .ce_table {
    padding: 0;
}

.ce_table table {
    border: 2px solid #ddd;
}

.w100 table {
    width: 100%;
}

.ce_table th {
    padding: 5px 6px 7px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.ce_table td {
    padding: 4px 6px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.ce_table tr.odd td {
    background-color: #f0f0f0;
}

.ce_table pre {
    margin-bottom: 0;
}

.ce_text pre,.comment_default pre {
    overflow: auto;
}

.isp th,.devtable .col_0,.nw1 .col_1,td.nowrap,.shortcuts .col_0,.shortcuts .col_1 {
    white-space: nowrap;
}

.devtable h3 {
    margin-top: 0;
}

.devtable .col_0 {
    font-weight: bold;
}

.mod_newsreader td:first-child {
    white-space: nowrap;
}

.mod_csAdmin td {
    border-right: 0px;
    border-left: 0px;
    font-size: 12px;
}

.mod_csAdmin td.add,.mod_csAdmin td.buttons {
    text-align: right;
}

.mod_csAdmin td.add {
    padding-bottom: 6px;
}

.mod_csAdmin td.buttons img {
    top: -2px;
    position: relative;
    vertical-align: middle;
}

.ce_download img,.ce_downloads img {
    vertical-align: top;
}

.ce_downloads p {
    margin-bottom: 3px;
    margin-left: 1em;
}

#download .g3 ul,#download .g3 .ce_downloads p {
    margin-left: 0;
}

.ce_comments .comment_default {
    margin-bottom: 6px;
    padding: 12px 9px 3px 7px;
    background-color: #f6f6f6;
    border-left: 2px solid #FF0000;
}

.ce_comments .comment_default pre {
    margin-top: 9px;
    margin-bottom: 9px;
    font-size: 11px;
}

.ce_comments .info,.ce_comments p {
    margin-bottom: 9px;
}

.ce_comments .code,.ce_comments .quote {
    margin-bottom: 13px;
    background-color: #f0f0f0;
    border: 2px solid #ddd;
}

.ce_comments .code p,.ce_comments .quote p {
    font-size: 11px;
    font-weight: bold;
    margin: 3px 0 3px 1em;
}

.ce_comments .code pre,.ce_comments .quote blockquote {
    margin-top: 0;
    margin-bottom: 6px;
}

.ce_comments .comment {
    font-size: 12px;
}

.ce_comments .reply {
    margin-top: 2em;
    margin-left: .5em;
    padding-left: 1em;
    border-left: 2px solid #8ab858;
}

.ce_comments .form {
    margin-top: 1.5em;
}

.ce_comments .widget {
    margin-bottom: 3px;
}

.ce_comments .widget .checkbox_container {
    margin-top: 0;
}

.ce_comments .text,.ce_comments .captcha {
    width: 40%;
    margin-right: 0;
}

.ce_comments span.captcha_text {
    font-weight: bold;
    color: #444;
}

.mod_login .formbody {
    width: 30%;
    padding-top: 1em;
}

.mod_login label {
    margin-top: 0.5em;
}

.mod_login p.login_info {
    margin-top: 0.5em;
}

.mod_login .checkbox_container {
    margin-top: 6px;
}

.logout table {
    margin-top: 0.5em;
}

.logout form table td:first-child {
    text-align: left;
}

.mod_lostPassword .formbody {
    width: 62%;
}

.listing {
    padding-left: 2px;
    padding-right: 1px;
}

.listing .list_search {
    width: 60%;
    float: right;
    text-align: right;
    font-size: 11px;
}

.listing select,.listing .text {
    width: 120px;
}

.listing .list_per_page {
    width: 40%;
    float: left;
    font-size: 11px;
}

.listing .list_per_page select {
    width: 48px;
}

.listing table.all_records {
    clear: both;
}

.listing table.all_records th {
    background: url("../plugins/tablesort/media/default.gif") right center no-repeat;
}

.listing table.all_records th.asc {
    background-image: url("../plugins/tablesort/media/asc.gif");
}

.listing table.all_records th.desc {
    background-image: url("../plugins/tablesort/media/desc.gif");
}

.listing table.all_records th.col_last {
    width: 18px;
    background-image: none;
}

.listing table.all_records th a {
    color: #444;
}

.listing table.all_records img {
    vertical-align: text-top;
}

.listing table.single_record td.label {
    padding-right: 2em;
    font-weight: bold;
}

.listing .go_back {
    margin-top: 1.25em;
}

.mod_glossaryList dt {
    font-weight: bold;
}

.mod_search .header {
    text-align: right;
}

.mod_search input[type="text"] {
    width: 272px;
}

.mod_search .radio_container {
    margin-top: 3px;
}

.mod_search .radio_container span {
    display: inline;
    padding-right: 12px;
}

.mod_search h3 {
    margin-top: 1em;
}

.mod_search h3,.mod_search p {
    margin-bottom: 0.25em;
}

.mod_search .relevance {
    color: #bbb;
}

.mod_search .url {
    color: #008000;
}

.mod_search .highlight {
    font-weight: bold;
}

.mod_search .pagination {
    margin-top: 2em;
}

.layout_short {
    padding: 15px 0 3px;
    border-top: 1px dotted #bbb;
}

.layout_short.first {
    padding-top: 3px;
    border-top: 0;
}

.layout_short.last {
    padding-bottom: 0;
}

.layout_short h2 {
    margin-top: 0;
}

.layout_short p.info {
    margin-bottom: 0;
}

.layout_full h1 {
    margin-bottom: 3px;
}

.layout_full h2 {
    margin-top: 1.25em;
}

.layout_full p.info {
    margin-bottom: 18px;
}

.layout_simple {
    font-size: 11px;
    color: #999;
}

.layout_simple a {
    display: block;
    margin-bottom: 6px;
}

.enclosure {
    margin-bottom: 18px;
}

.enclosure img {
    vertical-align: bottom;
}

.enclosure p {
    margin-bottom: 3px;
}

span.jtag {
    right: 12px;
    position: absolute;
    padding: 0 3px 2px;
    background-color: #8ab858;
    background: -moz-linear-gradient(,#8ac549,#8ab858);
    background: -webkit-linear-gradient(,#8ac549,#8ab858);
    background: -o-linear-gradient(,#8ac549,#8ab858);
    background: -ms-linear-gradient(,#8ac549,#8ab858);
    background: linear-gradient(top,#8ac549,#8ab858);
    -pie-background: linear-gradient(,#8ac549,#8ab858);
    border: 1px solid #8ab858;
    border-radius: 3px;
    color: #fff;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.layout_full .linkss {
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 6px 12px;
    background-color: #eee;
    background: -moz-linear-gradient(,#f9f9f9 30%,#eee);
    background: -webkit-linear-gradient(,#f9f9f9 30%,#eee);
    background: -o-linear-gradient(,#f9f9f9 30%,#eee);
    background: -ms-linear-gradient(,#f9f9f9 30%,#eee);
    background: linear-gradient(top,#f9f9f9 30%,#eee);
    -pie-background: linear-gradient(,#f9f9f9 30%,#eee);
    border: 1px solid #ccc;
    border-radius: 3px;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.layout_full .links {
    margin-top: 18px;
}

.mod_languageDownload {
    margin-top: 6px;
    margin-bottom: 6px;
}

.mod_languageDownload .formbody,.mod_languageDownload ul {
    margin-left: 1em;
}

.mod_languageDownload select {
    width: 160px;
}

.book,.screencast,.review {
    margin-bottom: 13px;
}

.book p {
    margin-left: 162px;
}

.screencast p {
    margin-left: 192px;
}

.review p {
    margin-left: 110px;
}

.review blockquote {
    line-height: 1.5;
    font-style: italic;
}

.xpln p {
    margin-top: 1.5em;
    text-align: left;
    font-size: 11px;
}

.mod_csAdmin .avatar_container img {
    max-width: 400px;
    max-height: 300px;
}

.mod_csAdmin .liability label {
    font-size: 11px;
    line-height: 1.5;
}

.mod_csView .g6,.mod_csView p img {
    margin-right: 0;
    margin-left: 0;
}

.mod_csView h3.first {
    margin-top: 3px;
}

.mod_csView .limheight {
    height: 339px;
    overflow: auto;
}

.profile h2 {
    margin-bottom: 3px;
}

.profile .tasks {
    font-size: 12px;
}

.profile .contact {
    padding-left: 18px;
    background: url("../files/images/layout/contact.gif") left center no-repeat;
}

#change-interface {
    right: 0;
    top: 0;
    position: absolute;
    margin-top: 7px;
    margin-right: 9px;
}

#change-interface a {
    font-size: 11px;
}

.hide {
    display: none;
}

#mbImage h1 {
    color: #fff;
}

.ce_changelog .changes {
    margin-bottom: 2em;
    font: 12px Monaco,monospace;
}

.ce_changelog .changes h2,.ce_changelog .changes h3,.ce_changelog .changes h4 {
    font-family: Monaco,monospace;
}

.ce_changelog .changes h2 {
    margin-bottom: 13px;
}

.ce_changelog .changes h3 {
    margin-top: 32px;
}

.ce_changelog .changes h4 {
    margin-top: 15px;
    margin-bottom: 3px;
    font-size: 12px;
}

.ce_changelog .changes code {
    color: #629300;
}

.ce_changelog .changes pre {
    margin: 1em;
    padding: 9px;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    border-radius: 6px;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.syntaxhighlighter code {
    font-family: Monaco,monospace !important;
}

#thimg {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}

.mod_docs h2,.mod_docs h3,.mod_docs h4 {
    margin-top: 2em;
}

.mod_docs h2 {
    padding-top: 2em;
    border-top: 2px solid #ddd;
    background: url("../files/images/layout/chapter.png") left 2em no-repeat;
    padding-left: 27px;
}

.doctoc ol {
    margin-left: 3.1em;
}

.doctoc ol ol {
    margin-left: 2em;
}

.doctoc ul {
    margin-left: 1em;
}

.mod_docs th {
    white-space: nowrap;
}

.mod_docs code {
    padding: 0 3px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
    white-space: nowrap;
    behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.mod_docs a.anchor {
    display: inline;
}

.mod_docs p img {
    margin-top: 6px;
    margin-bottom: 3px;
}

.mod_docs .highlight {
    margin-top: 18px;
    margin-bottom: 18px;
}

.mod_docs pre>code {
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
}

.doctoc {
    margin-top: 2em;
}

.doctoc ol ol {
    margin-top: 9px;
}

.doctoc ol ol ol {
    margin-top: 6px;
    margin-bottom: 15px;
}

.doctoc.chapters ol ol ol {
    display: none;
}

.doctoc ol li {
    margin-bottom: 1.5em;
    font-weight: bold;
    list-style-type: upper-roman;
}

.doctoc ol li,.doctoc ol li a {
    font-size: 15px;
}

.doctoc ol ol li {
    margin-bottom: 0;
    font-weight: normal;
    list-style-type: decimal;
}

.doctoc ol ol li,.doctoc ol ol li a {
    font-size: 13px;
}

.doctoc ol ol ol li {
    list-style-type: lower-alpha;
}

.doctoc ol ol ol li,.doctoc ol ol ol li a {
    font-size: 11px;
}

/* Style sheet deutsch */

#subheader-index {
    width: 960px;
    height: 340px;
    margin-top: 51px;
    background: url("../files/images/header/index-de-trans.png") center top no-repeat;
}

#subheader-discover {
    width: 960px;
    height: 170px;
    margin-top: 51px;
    background: url("../files/images/header/discover-de-trans.png") center top no-repeat;
}

#subheader-download {
    width: 960px;
    height: 170px;
    margin-top: 51px;
    background: url("../files/images/header/download-de-trans.png") center top no-repeat;
}

#subheader-understand {
    width: 960px;
    height: 170px;
    margin-top: 51px;
    background: url("../files/images/header/understand-de-trans.png") center top no-repeat;
}

#subheader-enhance {
    width: 960px;
    height: 170px;
    margin-top: 51px;
    background: url("../files/images/header/enhance-de-trans.png") center top no-repeat;
}

#subheader-inquire {
    width: 960px;
    height: 170px;
    margin-top: 51px;
    background: url("../files/images/header/inquire-de-trans.png") center top no-repeat;
}

.button {
    width: 160px;
    height: 24px;
    display: block;
    margin-left: 1em;
    text-indent: -999em;
}

.home #main .button {
    margin-left: 0;
}

.box .button {
    margin-right: auto;
    margin-left: auto;
}

#button-demo {
    background: url("../files/images/layout/buttons-de-trans.png") 0px 0px no-repeat;
}

#button-demo:hover {
    background-position: 0px -24px;
}

#button-documentation {
    background: url("../files/images/layout/buttons-de-trans.png") -160px 0px no-repeat;
}

#button-documentation:hover {
    background-position: -160px -24px;
}

#button-repository {
    background: url("../files/images/layout/buttons-de-trans.png") -320px 0px no-repeat;
}

#button-repository:hover {
    background-position: -320px -24px;
}

#button-templates {
    background: url("../files/images/layout/buttons-de-trans.png") -480px 0px no-repeat;
}

#button-templates:hover {
    background-position: -480px -24px;
}

#button-team {
    background: url("../files/images/layout/buttons-de-trans.png") -640px 0px no-repeat;
}

#button-team:hover {
    background-position: -640px -24px;
}

#button-partners {
    background: url("../files/images/layout/buttons-de-trans.png") -800px 0px no-repeat;
}

#button-partners:hover {
    background-position: -800px -24px;
}

#button-unix {
    background: url("../files/images/layout/buttons-de-trans.png") -320px -48px no-repeat;
}

#button-unix:hover {
    background-position: -320px -72px;
}

#button-windows {
    background: url("../files/images/layout/buttons-de-trans.png") -480px -48px no-repeat;
}

#button-windows:hover {
    background-position: -480px -72px;
}

#button-community {
    background: url("../files/images/layout/buttons-de-trans.png") -640px -48px no-repeat;
}

#button-community:hover {
    background-position: -640px -72px;
}

#button-tickets {
    background: url("../files/images/layout/buttons-de-trans.png") -800px -48px no-repeat;
}

#button-tickets:hover {
    background-position: -800px -72px;
}

#button-luid {
    background: url("../files/images/layout/buttons-de-trans.png") 0px -96px no-repeat;
}

#button-luid:hover {
    background-position: 0px -120px;
}

#button-commercial {
    background: url("../files/images/layout/buttons-de-trans.png") -160px -96px no-repeat;
}

#button-commercial:hover {
    background-position: -160px -120px;
}

#button-frequently {
    background: url("../files/images/layout/buttons-de-trans.png") -320px -96px no-repeat;
}

#button-frequently:hover {
    background-position: -320px -120px;
}

#button-announcements {
    background: url("../files/images/layout/buttons-de-trans.png") -480px -96px no-repeat;
}

#button-announcements:hover {
    background-position: -480px -120px;
}

#button-videos {
    background: url("../files/images/layout/buttons-de-trans.png") -640px -96px no-repeat;
}

#button-videos:hover {
    background-position: -640px -120px;
}

#button-developer {
    background: url("../files/images/layout/buttons-de-trans.png") -800px -96px no-repeat;
}

#button-developer:hover {
    background-position: -800px -120px;
}

@media (max-width:767px) {

/* Style sheet iphone */

    body {
        margin-bottom: 0;
    }

    #header,#footer,#container {
        width: auto;
    }

    .twocol #container {
        width: auto;
        padding-right: 0;
    }

    #footer {
        padding-right: 10px;
        padding-left: 10px;
    }

    .subheader,#search,#links,#mb_donate {
        display: none;
    }

    #right {
        min-height: 1px;
    }

    .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
        width: auto;
        float: none;
        display: block;
        margin: 0;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 16px;
    }

    .mod_csRandom .image_container {
        float: none;
    }

    #topmenu {
        height: 32px;
        position: relative;
        overflow: hidden;
    }

    #topmenu a,#topmenu span {
        padding: 9px 10px 9px 8px;
        font-size: 9px;
    }

    #logo {
        top: 0;
        position: relative;
        margin-top: 1em;
        margin-bottom: .50em
   	-ms-interpolation-mode: bicubic;
        vertical-align: align;
        max-width: 80%;
    }

    #menutog {
        display: block;
    }

    #menutog a {
        width: 42px;
        height: 30px;
        right: 10px;
        top: 61px;
        position: absolute;
        display: block;
        background: url("../files/images/layout/mmenu.png") left top no-repeat !important;
        text-indent: -999em;
    }

    #mainmenu {
        width: 75%;
        height: 100%;
        left: -800px;
        top: 0;
        position: fixed;
        overflow: auto;
        display: block;
        margin-bottom: 10px;
        padding: 10px;
        background-color: rgba(255,255,255,0.95);
        border-right: 1px solid #bbb;
        -webkit-overflow-scrolling: touch;
    }

    #mainmenu li {
        float: none;
        padding: 0;
    }

    #mainmenu li,#mainmenu span {
        background: none !important;
    }

    #mainmenu li.home {
        display: none;
    }

    #mainmenu span.submenu {
        padding: 0;
        font-weight: bold;
        color: #444 !important;
    }

    #mainmenu ul.level_1 {
        margin-bottom: 24px;
    }

    #mainmenu ul.level_2 {
        width: inherit;
        left: auto;
        position: relative;
    }

    #mainmenu ul.level_2 span,#mainmenu ul.level_2 a {
        color: #FF0000;
        background: none !important;
    }

    #mainmenu a.trail {
        color: #444;
    }

    #mainmenu ul.level_1>li {
        margin-top: 12px;
    }

    #mainmenu ul.level_1>li:first-child {
        margin-top: 0;
    }

    #mainmenu ul.level_1 ul {
        margin-top: 6px;
        margin-left: 12px;
    }

    .ce_gallery li {
        padding-right: 0;
        padding-left: 0;
    }

    .ce_gallery .image_container img,.mod_csRandom img,.mod_csView img,.image_container .caption {
        max-width: 92%;
    }

    .ce_text p img,.ce_image .image_container {
        margin-right: 0;
        margin-left: 0;
    }

    .ce_code {
        margin-left: 9px !important;
        margin-right: 9px !important;
    }

    #copyright,#copyright a {
        font-size: 7px;
    }

    #bookads,span.jtag {
        display: none;
    }

    .pdf_link {
        margin-top: 0;
    }

    .box {
        margin-bottom: 3px;
    }

    #partnerlist,.mod_repository {
        width: 90%;
        overflow: auto;
    }

    #partnerlist .header th:first-child,#partnerlist td.col_0 {
        display: none;
    }

    .mod_repository .description {
        font-size: 11px;
    }

    .mod_repository .title,.mod_repository .title a {
        font-size: 11px;
    };
}

@media (min-width:768px) and (max-width:979px) {
/* Style sheet ipad */
    #header,#footer {
        width: 754px;
    }

    #container {
        width: 744px;
    }

    .twocol #container {
        width: 558px;
        padding-right: 190px;
    }

    #right {
        width: 186px;
    }

    .subheader {
        width: 744px !important;
        height: 132px !important;
        background-size: 100% !important;
    }

    #subheader-index {
        height: 264px !important;
    }

    .subheader .button {
        margin-top: 66px;
    }

    #links {
        width: 310px;
        height: 217px;
        left: 392px;
        top: 172px;
    }

    .header_link {
        width: 310px;
        height: 217px;
        background-size: 100% !important;
    }

    .g1 {
        width: 42px;
    }

    .g2 {
        width: 104px;
    }

    .g3 {
        width: 166px;
    }

    .g4 {
        width: 228px;
    }

    .g5 {
        width: 290px;
    }

    .g6 {
        width: 352px;
    }

    .g7 {
        width: 414px;
    }

    .g8 {
        width: 476px;
    }

    .g9 {
        width: 538px;
    }

    .g10 {
        width: 600px;
    }

    .g11 {
        width: 662px;
    }

    .g12 {
        width: 724px;
    }

    #mainmenu a,#mainmenu span {
        padding: 8px 6px 9px 9px;
        font-size: 13px;
    }

    #copyright,#copyright a {
        font-size: 10px;
    }

    .ce_gallery li.col_first {
        clear: none;
    };
}

@media print {
/* Style sheet print */
    body {
        font: 11pt/1.5 Tahoma,Arial,sans-serif;
        font-weight: normal;
        color: #000;
    }

    h1 {
        margin-bottom: 0.5em;
        font-size: 16pt;
    }

    h2 {
        margin-bottom: 0.25em;
        font-size: 14pt;
    }

    h3,h4,h5,h6 {
        margin-bottom: 0;
        font-size: 12pt;
    }

    a {
        text-decoration: none;
        color: #FF0000;
    }

    img {
        border: 0px;
    }

    ul,ol {
        page-break-before: avoid;
    }

    li {
        page-break-inside: avoid;
    }

    table {
        margin-bottom: 0.5em;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: inherit;
    }

    th {
        font-weight: bold;
    }

    th,td {
        margin: 0;
        padding: 1px 2px;
        text-align: left;
        vertical-align: top;
        border: 1px solid #999;
    }

    #copyright {
        margin-top: 1cm;
        padding-top: 0.25cm;
        border-top: 1px solid #999;
        font-size: 8pt;
        color: #666;
    }

    #topmenu,#search,#mainmenu,#submenu,#right,.pagination,div.ads,div.bc_bottom,a.anchor {
        display: none;
    }

    .invisible,.subheader,.mod_breadcrumb,.mod_booknav,.pdf_link,#footer .mod_newslist,#footer .network,#footer .casestudy {
        display: none;
    }

    form,fieldset,legend,label,input,select,textarea {
        display: none;
    };
}

.responsiveContainer {
    position: relative;
    padding-bottom: 56%;
    height: 0;
    overflow: hidden;
}

.responsiveContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

}

JavaScript:
Code:
function toggleMobileMenu() {
    var m = $('mainmenu');
    if (m.getStyle('left') == '-800px') {
        new Fx.Morph(m, {
            'duration': 300
        }).start({
            'left': '0px'
        });
    } else {
        new Fx.Morph(m, {
            'duration': 300
        }).start({
            'left': '-800px'
        });
    }
}
window.addEvent('domready', function () {
    if (window.location.search.indexOf('iso=') != -1 && window.location.hash == '') {
        window.location += '#translations';
    }
    if (Browser.Engine.trident) {
        return;
    }
    if (window.getSize().x > 768) {
        $('mainmenu').getElements('ul.level_2').each(function (el) {
            el.set({
                'opacity': 0
            });
        });
        $('mainmenu').getElements('span.submenu').each(function (el) {
            var ul = el.getParent().getElement('ul.level_2');
            el.addEvent('mouseenter', function () {
                new Fx.Morph(ul, {
                    'duration': 300
                }).start({
                    'opacity': 1,
                    visibility: "visible"
                });
            });
            el.addEvent('mouseout', function () {
                setTimeout(function () {
                    if (ul.getStyle('left').toInt() < 0) {
                        ul.set({
                            'opacity': 0
                        });
                    }
                }, 50);
            });
        });
    }
});
window.addEvent('load', function () {
    var el = $$('p.confirm');
    if ($defined(el[0])) {
        if (el[0].getPosition().y > window.getSize().y) {
            window.scrollTo(0, el[0].getPosition().y - 120);
        }
    }
    if ($defined($('username'))) {
        $('username').focus();
    }
});
window.addEvent('domready', function () {
    var links = $$('#links>a');
    if ($defined(links) && links.length > 1) {
        for (i = 1; i < links.length; i++) {
            links[i].setStyle('left', 400);
            links[i].removeClass('hide');
        }
        var slider = {
            index: 0,
            next: function () {
                slider.index++;
                if (slider.index == links.length) {
                    slider.index = 0;
                }
                if (slider.index == 0) {
                    links[slider.index].tween('left', [400, 0]);
                    links[links.length - 1].tween('left', [0, -400]);
                } else {
                    links[slider.index].tween('left', [400, 0]);
                    links[slider.index - 1].tween('left', [0, -400]);
                }
            }
        };
        slider.next.periodical(5000);
    }
});

und der HTML Ausschnitt der Navigation:
Code:
<div id="menutog">
<a href="javascript:toggleMobileMenu()">Menu</a>
</div>
<nav id="mainmenu" class="mod_navigation block">
<a class="invisible" href="de/#skipNavigation1">Navigation überspringen</a>
<ul class="level_1">
<li class="active active home first">
<span class="active active home first">Startseite</span>
</li>
<li class="submenu sibling last">
<span class="submenu sibling last" onclick="return true">Kontakt</span>
<ul class="level_2" style="opacity: 1; visibility: visible;">
<li class="first">
<a class="first" title="Treten Sie mit uns in Kontakt" href="kontakt_de.html">Kontakt</a>
</li>
<li>
<a title="Berechnen Sie Ihre Route zu XXXX" href="Impressum.html">Impressum</a>
</li>
<li class="Disclaimer">
<a class="support" title="Haftungsausschluss" href="haftungsausschluss.html">Haftungsausschluss</a>
</li>
<li class="last">
<a class="last" title="Allgemeine Geschäfts- u. Lieferbedingungen" href="files/AGB_2012.pdf">AGB</a>
</li>
</ul>
</li>
<li class="submenu sibling">
<span class="submenu sibling" onclick="return true">Erweitern</span>
<ul class="level_2" style="opacity: 1; visibility: visible;">
<li class="first">
<a class="first" title="XXXXXX" href="XXXXX">XXXXX</a>
</li>
<li>
<a title="XXXXX" href="XXXXX">XXXX</a>
</li>
<li>
<a title="XXXXX" href="XXXXX">XXXXX</a>
</li>
<li class="last">
<a class="last" title="XXXXX" href="XXXX">XXXX</a>
</li>
</ul>
</li>
<li class="submenu sibling">
<span class="submenu sibling" onclick="return true">Verstehen</span>
<ul class="level_2" style="opacity: 1; visibility: visible;">
<li class="first">
<a class="first" title="XXXXX" href="XXXX">XXXX</a>
</li>
<li>
<a title="XXXXXX" href="XXXX">XXXXX</a>
</li>
<li class="last">
<a class="last" title="XXXXXX" href="XXXX">XXXXX</a>
</li>
</ul>
</li>
<li class="submenu sibling">
<span class="submenu sibling" onclick="return true">Herunterladen</span>
<ul class="level_2" style="opacity: 1; visibility: visible;">
<li class="first">
<a class="first" title="XXXX" href="XXXX">XXXX</a>
</li>
<li>
<a title="XXXX" href="de/changelog.html">XXXXX</a>
</li>
<li>
<a title="XXXX" href="de/credits.html">XXXX</a>
</li>
<li class="last">
<a class="last" title="XXXX" href="de/logo.html">XXX</a>
</li>
</ul>
</li>
<li class="submenu sibling first">
<span class="submenu sibling first" onclick="return true">Home</span>
<ul class="level_2" style="opacity: 1; visibility: visible;">
<li class="first">
<a class="first" title="XXXX" href="index.html">Startseite</a>
</li>
</ul>
</li>
</ul>
<a id="skipNavigation1" class="invisible"> </a>
</nav>

Vielen Dank im Voraus!

QUELLE: contao.org
 
Zuletzt bearbeitet:
Hallo liebe Community!

Ich bin nun auf die "array" Option gestoßen! Jedoch weiß ich nicht, wie ich die vorhandene Menü-Elemente diese zuordnen kann und danach sortiert wieder ausgeben kann!

Könnte mir dabei jemand bitte behilflich sein?

Lg Fonsi-Heizer
 
Zurück