Beiträge von Anthony89

  • Horizontale Navigationsleiste mit Dropdown

    Ich habe es nun mit einer Beschreibung endlich hinbekommen.

    Allerdings habe ich noch einige Probleme mit der Navigation:
    - die Schrift des Dropdown-Menüs wird beim Aufklappen (sprich, wenn man über "Galerie" fährt) hellgrau #b0b0b0 angezeigt. Die Schrift soll allerdings dunkelgrau #464646 sein und erst wenn man über das jeweilige Dropdown-Element fährt, hellgrau #b0b0b0 erscheinen
    - wie richte ich das Dropdown-Menü wie unter http://www.franziska-haering.weebly aus? Das Dropdown-Menü fängt zu weit unten nach Galerie an, die Schrift steht nicht genau unter Galerie und den weißen Abstand, der links und rechts neben Portrait bis Tiere ist, hätte ich gerne ein bisschen kleiner
    - wenn man von Galerie nach Kontakt fährt sind zwischen Galerie, Preise, Über mich und Kontakt immer Verlinkungen (Hand-Symbol). Bei meiner weebly Adresse sind immer Leerräume dazwischen (Pfeil-Symobl), in denen man nichts anklicken kann.

    Ich weiß nicht, ob ich dafür ein neues Thema aufmachen muss: Wie kann ich die Navigationsleiste inkl. Linie beim Scrollen fixieren (siehe auch meine Weebly Seite)?

    Vielen lieben Dank vorab und einen schönen Abend!

  • Horizontale Navigationsleiste mit Dropdown

    Hallo,

    ich vesuche aus diversen Gründen meine Homepage (http://www.fr*nzisk*-h*ering.weebly, bitte * durch "a" ersetzen) neu mit HTML und CSS in Microsoft Expression Web zu schreiben. Bitte habt Verständnis mit mir, denn ich kenne ich mit diesem Thema eigentlich nicht aus.

    Leider funktioniert mein Dropdown-Menü in der Navigationsleiste nicht, d. h. wenn ich mit dem Mauszeiger über Galerie fahre erscheint nichts. Dazu ist noch zu sagen, dass das Dropdown-Menü vertikal unter dem Punkt Galerie erscheinen soll.

    Hier mein HTML-Code:

    Hier mein CSS-Code:

    Vielen Dank vorab.

  • Fußzeile ist an größeren Bildschirmen nicht ganz unten

    Hallo zusammen,

    an größeren Bildschirmen oder auch auf Smartphones (im Web-Modus) ist die Fußzeile (rot) nach oben verschoben und wird mit der Hintergrundfarbe (grün) meiner "no-header-page" gefüllt. Die Farben habe ich nur so gewählt um mein Problem zu verdeutlichen. Mein Problem wäre eigentlich schon behoben, wenn die grüne Farbe über der roten Farbe kommen würde. Ich möchte auf keinen Fall die Fußzeile fixieren, sondern sie sollte bei mehr Inhalt trotzdem am Inhaltende kleben. Nur leider kenne ich mich in HTML/CSS nicht aus... :(

    Website: http://www.franziska-haering.weebly.com
    Website als Bild: https://www.dropbox.com/s/g1ywpknak3dvuv2/hp.JPG?dl=0

    CSS:
    /* Resets
    --------------------------------------------------------------------------------*/
    ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
    fieldset, input {
    margin: 0;
    padding: 0;
    }
    a img {
    border: 0;
    }
    a {
    text-decoration: none;
    outline: none;
    }
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
    outline: none;
    }
    /* General Styling and Structure
    --------------------------------------------------------------------------------*/
    html {
    height: 100%;
    }
    body {
    min-height: 100%;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight:400;
    line-height: 1.8;
    color: #464646;
    background-attachment: fixed;
    background-image:url(main-bg.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    }
    .tall-header-page,
    .short-header-page,
    .no-header-page,
    .landing-page,
    .title-page {
    background: #00ff00;
    }
    .container {
    margin: 0 auto;
    width: 960px;
    }
    #logo{
    float: none;
    background: transparent url(fh2.png)no-repeat;
    width: 603px;
    height: 57px;
    position:relative;
    left:20%;
    }
    #header-wrap,
    #banner-wrap,
    #main-wrap,
    #footer-wrap
    {
    width:100%;
    }
    a {
    color: #546270;
    text-decoration:none;
    }
    /* remove bottom border from elements that only have an image as a child */
    .wsite-image > a,
    .wslide-link,
    .cloud-zoom,
    .imgPusher + span a
    {
    border-bottom: none;
    }
    a:hover {
    color: #546270;
    }
    h2 {
    font-size: 30px;
    padding: 15px 0 15px 0;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #415161;
    }
    p {
    padding: .5em 0;
    }
    blockquote {
    background: #415161;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-style:normal !important;
    line-height: 32px;
    color: #fff;
    padding: 28px 40px !important;
    margin: 2em 0;
    border-left: 0px !important;
    }
    div#content {min-height:400px;}
    .blog-title a {
    text-decoration:none;
    color:#788CAC;
    border-bottom:none;
    }
    .blog-title a:hover {
    color:#415161;
    }
    .blog-separator {
    border-bottom:1px solid #e6eaf0 !important;
    }
    .blog-post .blog-content {
    color:#788CAC;
    }
    .blog-sidebar h2 {
    font-size:24px;
    }
    .blog-comments a {
    text-decoration:none;
    background:url(icon-bubble.png) no-repeat;
    padding-left:25px;
    line-height:20px;
    display:inline-block;
    border-bottom:none;
    }
    .imageGallery .galleryCaptionInnerText p, .imageGallery .galleryCaptionInnerText {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight:700;
    }
    .galleryCaptionHolderInnerBg {
    opacity: 0.2;
    }
    /* Header
    --------------------------------------------------------------------------------*/
    #header-wrap {
    text-align:center;
    overflow:hidden;
    background:#fff;
    border-bottom:1px solid #e7e7e7;
    z-index: 20 !important;
    }
    #logo,
    #logo a {
    font-family: 'Montserrat', sans-serif;
    font-size:50px;
    font-weight:700;
    line-height:60px;
    color:#415161;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:-1px;
    margin:35px 0px 20px;
    border:none;
    }
    .splash-page #logo a {
    margin:20px 0px 44px;
    }
    /* HSocial Links
    --------------------------------------------------------------------------------*/
    .wsite-social-item,
    #wsite-com-product-social-sharing a {
    width: 29px;
    height: 29px;
    margin: 0 0 0 9px;
    padding: 1px;
    }
    .wsite-social-rss, .wsite-com-product-social-rss { background: url('black_icons.png') -276px -15px; }
    .wsite-social-rss:hover,
    .wsite-com-product-social-rss:hover,
    .wsite-com-product-social-rss:active { background: url('black_icons.png') -276px -57px; }
    .wsite-social-linkedin, .wsite-com-product-social-linkedin { background: url('black_icons.png') -125px -15px; }
    .wsite-social-linkedin:hover,
    .wsite-com-product-social-linkedin:hover,
    .wsite-com-product-social-linkedin:active{ background: url('black_icons.png') -125px -57px; }
    .wsite-social-facebook, .wsite-com-product-social-facebook { background: url('black_icons.png') -49px -15px; }
    .wsite-social-facebook:hover,
    .wsite-com-product-social-facebook:hover,
    .wsite-com-product-social-facebook:active { background: url('black_icons.png') -49px -57px; }
    .wsite-social-twitter, .wsite-com-product-social-twitter { background: url('black_icons.png') -11px -15px; }
    .wsite-social-twitter:hover,
    .wsite-com-product-social-twitter:hover,
    .wsite-com-product-social-twitter:active { background: url('black_icons.png') -11px -57px; }
    .wsite-social-mail, .wsite-com-product-social-mail { background: url('black_icons.png') -163px -15px; }
    .wsite-social-mail:hover,
    .wsite-com-product-social-mail:hover,
    .wsite-com-product-social-mail:active { background: url('black_icons.png') -163px -57px; }
    .wsite-social-pinterest, .wsite-com-product-social-pinterest { background: url('black_icons.png') -238px -15px; }
    .wsite-social-pinterest:hover,
    .wsite-com-product-social-pinterest:hover,
    .wsite-com-product-social-pinterest:active { background: url('black_icons.png') -238px -57px; }
    .wsite-social-youtube, .wsite-com-product-social-youtube { background: url('black_icons.png') -390px -15px; }
    .wsite-social-youtube:hover,
    .wsite-com-product-social-youtube:hover,
    .wsite-com-product-social-youtube:active { background: url('black_icons.png') -390px -57px; }
    .wsite-social-plus, .wsite-com-product-social-plus { background: url('black_icons.png') -87px -15px; }
    .wsite-social-plus:hover,
    .wsite-com-product-social-plus:hover,
    .wsite-com-product-social-plus:active { background: url('black_icons.png') -87px -57px; }
    .wsite-social-flickr, .wsite-com-product-social-flickr { background: url('black_icons.png') -201px -15px; }
    .wsite-social-flickr:hover,
    .wsite-com-product-social-flickr:hover,
    .wsite-com-product-social-flickr:active { background: url('black_icons.png') -201px -57px; }
    .wsite-social-vimeo, .wsite-com-product-social-vimeo { background: url('black_icons.png') -314px -15px; }
    .wsite-social-vimeo:hover,
    .wsite-com-product-social-vimeo:hover,
    .wsite-com-product-social-vimeo:active { background: url('black_icons.png') -314px -57px; }
    .wsite-social-yahoo, .wsite-com-product-social-yahoo { background: url('black_icons.png') -352px -15px; }
    .wsite-social-yahoo:hover,
    .wsite-com-product-social-yahoo:hover,
    .wsite-com-product-social-yahoo:active { background: url('black_icons.png') -352px -57px; }

    /* Navigation
    --------------------------------------------------------------------------------*/
    #nav {
    clear: both;
    overflow: hidden;
    position: relative;
    }
    #nav ul {
    list-style: none;
    text-align:center;
    margin-bottom:15px;
    }
    #nav ul li {
    list-style: none;
    display:inline-block;
    margin:0px 45px;
    }
    #nav ul span:last-child li,
    #nav ul > li:last-child {
    background: none;
    }
    #nav ul li a {
    display: block;
    color: #464646;
    text-decoration: none;
    padding: 0px;
    border: 0;
    outline: 0;
    list-style-type: none;
    font-size: 18px;
    }
    #nav ul li#active a,
    #nav ul li a:hover {
    color: #b0b0b0;
    border: 0;
    }
    /* Navigation Submenu's
    --------------------------------------------------------------------------------*/
    #wsite-menus .wsite-menu li a {
    font-family: 'Montserrat', sans-serif;
    font-size:14px;
    color:#464646;
    background: #fff;
    width:150px;
    padding: 3px 0px;
    border: 0;
    left:-9px;
    top:1px;
    }
    #wsite-menus .wsite-menu li a:hover {
    color: #b0b0b0;
    background: #fff;
    }
    #wsite-menus .wsite-menu-arrow {
    display: none;
    }
    /* Page type: Tall header
    --------------------------------------------------------------------------------*/
    .tall-header-page .wsite-background {
    width: 100%;
    height: 383px;
    background: url(banner-tall.jpg) no-repeat center center;
    background-size:cover;
    /* box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); */
    }
    /* Page type: Short header
    --------------------------------------------------------------------------------*/
    .short-header-page .wsite-background {
    width: 100%;
    height: 254px;
    background: url(banner-short.jpg) no-repeat center center;
    background-size:cover;
    /* box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); */
    }
    /* Page type: No header
    --------------------------------------------------------------------------------*/
    .no-header-page #main-wrap {
    background:#f9fafb;
    }
    .no-header-page #footer-wrap{
    background:#ff0000;
    font-family:'Open Sans';
    font-size:14px;
    color:#464646;
    font-weight:normal;
    }
    .splash-page #header-wrap{
    border-bottom:1px solid #ecedef;
    }
    /* Page type: Landing page
    --------------------------------------------------------------------------------*/
    .landing-page #banner-wrap {
    background:#f9fafb;
    /* border-top:1px solid #e6e9eb; */
    border-bottom:1px solid #e6e9eb;
    text-align:center;
    height:382px;
    display:table;
    }
    .landing-page #banner-wrap .container {
    width:770px;
    }
    .landing-page #banner-wrap .banner {
    display: table-cell;
    vertical-align: middle;
    }

    .landing-page #banner-wrap h2 {
    color: #415161;
    font-size: 32px;
    padding: 0px;
    }
    .landing-page #banner-wrap p {
    color: #8496b3;
    font-size: 18px;
    line-height:32px;
    margin: 35px 0;
    }
    .landing-page #banner-wrap .container > div {
    text-align: center !important;
    }
    /* Page type: Title page
    --------------------------------------------------------------------------------*/
    .title-page #banner-wrap {
    background:#f9fafb;
    /* border-top:1px solid #e6e9eb; */
    border-bottom:1px solid #e6e9eb;
    text-align:center;
    height:111px;
    padding-top:38px;
    }
    .title-page #banner-wrap h2 {
    font-size: 32px;
    padding: 0px 0px 6px;
    }
    .title-page #banner-wrap p {
    margin-bottom:0px;
    color:#8496b3;
    padding:0px;
    }
    /* Splash Content
    --------------------------------------------------------------------------------*/
    .splash-page #wrapper {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    #wrapper-inner {
    width: 100%;
    height: 100%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 128px;
    padding-bottom: 128px;
    display: table;
    width: 910px;
    margin: 0 auto;
    }
    .splash-container{
    width: 910px;
    margin: 0 auto;
    text-align: center;
    margin-top: 0;
    vertical-align: middle;
    display: table-cell;
    }
    #splash-wrap {
    text-align: center;
    width: 910px;
    height: 418px;
    background-color: #f9fafa;
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,.1);
    -moz-box-shadow: 0 10px 30px rgba(0,0,0,.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    margin:0px auto;
    overflow:hidden;
    }
    .splash-container p {
    margin-top:40px;
    color:#415161;
    }
    .splash-page #footer-wrap {
    display:none;
    }
    /* Main Content
    --------------------------------------------------------------------------------*/
    #main-wrap {
    background: #fff;
    }
    #main-wrap .container {
    min-height:400px;
    width:900px;
    padding:50px 0;
    }
    #main-wrap .container form .wsite-button {
    margin-top:20px;
    }
    /* Footer
    --------------------------------------------------------------------------------*/
    #footer-wrap {
    text-align:right;
    border-top:1px solid #e7e7e7;
    padding:10px 0px;
    color:#464646;
    font:'Open Sans';
    font-size:14px;
    font-weight:normal;
    }
    #footer-wrap .container h2 {font-size:16px;}
    #footer-wrap .wsite-form-container {
    text-align:left;
    }

    /* Product page
    --------------------------------------------------------------------------------*/
    #wsite-com-product-social-sharing a,
    #wsite-com-product-social-sharing a:hover {
    width: 35px;
    height: 35px;
    margin: 0 0 0 3px;
    border-radius: 90%;
    border:none;
    }
    #wsite-com-product-social-sharing a.wsite-com-product-social-rss { background: #8496b3 url(social-icons.png) no-repeat -214px -48px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-rss:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-rss:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-linkedin { background: #8496b3 url(social-icons.png) no-repeat -121px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-linkedin:hover {background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-linkedin:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-facebook { background: #8496b3 url(social-icons.png) no-repeat -30px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-facebook:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-facebook:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-twitter { background: #8496b3 url(social-icons.png) no-repeat -76px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-twitter:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-twitter:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-mail { background: #8496b3 url(social-icons.png) no-repeat -168px -48px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-mail:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-mail:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-pinterest { background: #8496b3 url(social-icons.png) no-repeat -352px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-pinterest:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-pinterest:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-youtube { background: #8496b3 url(social-icons.png) no-repeat -490px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-youtube:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-youtube:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-plus { background: #8496b3 url(social-icons.png) no-repeat -306px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-plus:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-plus:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-flickr { background: #8496b3 url(social-icons.png) no-repeat -260px -48px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-flickr:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-flickr:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-vimeo { background: #8496b3 url(social-icons.png) no-repeat -398px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-vimeo:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-vimeo:active { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-yahoo { background: #8496b3 url(social-icons.png) no-repeat -443px -49px; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-yahoo:hover { background-color:#415161; }
    #wsite-com-product-social-sharing a.wsite-com-product-social-yahoo:active { background-color:#415161; }
    @media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    #wsite-com-product-social-sharing a.wsite-com-product-social-rss,
    #wsite-com-product-social-sharing a.wsite-com-product-social-linkedin,
    #wsite-com-product-social-sharing a.wsite-com-product-social-facebook,
    #wsite-com-product-social-sharing a.wsite-com-product-social-twitter,
    #wsite-com-product-social-sharing a.wsite-com-product-social-mail,
    #wsite-com-product-social-sharing a.wsite-com-product-social-pinterest,
    #wsite-com-product-social-sharing a.wsite-com-product-social-youtube,
    #wsite-com-product-social-sharing a.wsite-com-product-social-plus,
    #wsite-com-product-social-sharing a.wsite-com-product-social-flickr,
    #wsite-com-product-social-sharing a.wsite-com-product-social-vimeo,
    #wsite-com-product-social-sharing a.wsite-com-product-social-yahoo {
    background-image: url(Social-Icons@2x.png);
    background-size:558px 134px;
    }
    }
    /* Form Customization
    --------------------------------------------------------------------------------*/
    .wsite-form-label, .wsite-com-product-title {
    display: inline-block;
    font-weight:normal;
    }
    .wsite-form-input, .wsite-search-element-input {
    border: 1px #464646 solid;
    background:#fff;
    padding:10px !important;
    font-family:'Open Sans';
    font-size: 14px;
    line-height:1.8;
    font-weight:normal;
    color:#464646;
    }
    .wsite-form-input:focus, .wsite-search-element-input:focus {
    border: 1px solid #464646;
    }
    .wsite-form-container .form-input-error {
    border: 1px solid #e96c6c !important;
    }
    .form-field-error .weebly-form-radio-container, .form-field-error .wsite-form-radio-container {
    border: none;
    }
    .form-field-error .jqTransformCheckbox,
    .form-field-error .jqTransformRadio{
    background-position: center bottom;
    }
    /* Custom Form: Radios */
    .jqTransformRadioWrapper {
    float: left;
    display:block;
    margin:3px 10px 0 0;
    }
    .jqTransformRadio {
    background: transparent url(radio.png) no-repeat center top;
    vertical-align: middle;
    height: 25px;
    width: 25px;
    display:block;/*display: -moz-inline-block;*/
    border-bottom:none;
    }
    /* Custom Form: Checkboxes */
    span.jqTransformCheckboxWrapper{
    display:block;
    float:left;
    margin:3px 10px 0px 0px;
    }
    .jqTransformCheckbox {
    background: transparent url(checkbox.png) no-repeat center top;
    vertical-align: middle;
    height: 25px;
    width: 21px;
    display:block;/*display: -moz-inline-block;*/
    border-bottom:none;
    }
    /* Custom Form: Checked - Used for both Radio and Checkbox */
    .form-field-error a.jqTransformChecked,
    a.jqTransformChecked { background-position: center -25px;}
    /* Custom Form: Selects */
    .jqTransformSelectWrapper {
    width: 395px !important;
    position:relative;
    height: 42px;
    background-color: #fff;
    border: 1px solid #c4c9d2;
    float:left;
    margin-bottom: 10px;
    }
    .jqTransformSelectWrapper div span {
    font-size: 14px;
    float: none;
    position: absolute;
    white-space: nowrap;
    height: 27px;
    line-height: 20px;
    padding: 10px 0 0 10px;
    overflow: hidden;
    cursor:pointer;
    color:#727F97;
    }
    .jqTransformSelectWrapper a.jqTransformSelectOpen {
    display: block;
    position: absolute;
    right: 1px;
    top:1px;
    width: 39px;
    height: 39px;
    background: url(select_right.png) no-repeat center center;
    border-bottom:none;
    }
    .jqTransformSelectWrapper ul {
    position: absolute;
    width: 395px !important;
    top: 42px;
    left: -1px;
    list-style: none;
    background-color: #fff;
    border: solid 1px #d5d8db;
    display: none;
    margin: 0px;
    padding: 0px;
    height: 150px;
    overflow: auto;
    overflow-y: auto;
    z-index:10;
    }
    .jqTransformSelectWrapper ul a {
    display: block;
    padding: 5px 16px;
    margin:0px;
    text-decoration: none;
    color:#727f97;
    background-color: #FFF;
    font-size: 16px;
    border-bottom:none;
    }
    .jqTransformSelectWrapper ul a.selected {
    background:#415161;
    color: #fff;
    }
    .jqTransformSelectWrapper ul a:active {
    background: #415161;
    color: #fff;
    }
    .jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {
    background: #f1f2f4;
    color: #727f97;
    }
    .jqTransformHidden {display: none;}
    .jqTransformButton {display: none;}
    .jqTransformTextarea {
    display:block;
    height:105px;
    }
    /* Buttons
    --------------------------------------------------------------------------------*/
    /* Small structure & regular style */
    .wsite-button {
    display: inline-block;
    padding:5px 9px;
    background:#fff;
    text-transform:normal;
    border:1px #464646 solid;
    }
    .wsite-button:hover {
    background:#fff;
    }
    .wsite-button:active {
    background:#fff;
    }
    .wsite-button-inner {
    color: #464646 !important;
    padding: 0;
    background: none !important;
    font: 500 14px 'Open Sans', sans-serif;
    height:auto;
    letter-spacing:0px;
    font-weight:light;
    font-size:14px;
    }
    .wsite-button:hover .wsite-button-inner {
    color:#b0b0b0 !important;
    padding: 0;
    background: none !important;
    font: 500 14px 'Open Sans', sans-serif;
    height:auto;
    letter-spacing:0px;
    font-weight:light;
    font-size:14px;
    }
    .wsite-button:active .wsite-button-inner {
    background:#b0b0b0;
    color:#464646;
    }

    /* Large structure & regular style */
    .wsite-button-large {
    display: inline-block;
    padding: 0px;
    background: #fff;
    border:none;
    transition: all 0.5s ease;
    }
    .wsite-button-large:hover {
    background:#727f97 ;
    color:#fff !important;
    }
    .wsite-button-large:active {
    background:#727f97 ;
    color:#fff !important;
    }
    .wsite-button-large .wsite-button-inner {
    color:#8496b3 !important;
    padding: 2px 57px;
    background: #fff;
    border:1px solid #c4c9d2;
    }
    .wsite-button-large:hover .wsite-button-inner {
    background:#727f97 ;
    color:#fff !important;
    border:1px solid #727f97;
    }
    .wsite-button-large:active .wsite-button-inner {
    background:#727f97 ;
    color:#fff !important;
    border:1px solid #727f97;
    }
    /* Highlighted styles */
    .wsite-button-highlight {
    border:none;
    }
    .wsite-button-highlight .wsite-button-inner {
    background:#fff;
    color:#5d7892 !important;
    border:1px solid #b0b6bd;
    }
    .wsite-button-highlight:hover {
    background:#415161 !important;
    }
    .wsite-button-highlight:hover .wsite-button-inner,
    .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner{
    background:#415161!important;
    color:#fff !important;
    border:1px solid #415161;
    }
    .wsite-button-highlight:active {
    background:#415161!important;
    }
    .wsite-button-highlight:active .wsite-button-inner,
    .wsite-button-large.wsite-button-highlight:active .wsite-button-inner{
    background:#415161!important;
    color:#fff !important;
    border:1px solid #415161;
    }
    .wsite-button-large.wsite-button-highlight {
    background:none;
    }
    .wsite-button-large.wsite-button-highlight .wsite-button-inner {
    background:none;
    }


    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body class='no-header-page wsite-theme-light'>
    <div id="header-wrap">
    <div class="container">
    <div id="logo">{logo}</div>
    <div id="nav">{menu}</div>
    </div><!-- end container -->
    </div><!-- end header-wrap -->
    <div id="main-wrap">
    <div class="container">
    {content}
    </div><!-- end container -->
    </div><!-- end main-wrap -->
    <div id="footer-wrap">
    <div class="container">
    {footer}
    </div><!-- end container -->
    </div><!-- end footer-wrap -->
    <!-- JavaScript -->
    <script type="text/javascript" src="/files/theme/jquery.jqtransform.js" ></script>
    <script language="javascript">
    jQuery(function() {
    var $ = jQuery;
    $('#main-wrap .wsite-form-radio-container').jqTransform();
    var navPosition = $('#nav').offset().top - 15;
    $(window).scroll(function(e) {
    if ( $(window).scrollTop() > navPosition) {
    $('#main-wrap').css({'margin-top': $('#header-wrap').outerHeight() + 'px'});
    $('#header-wrap').css({'position': 'fixed', 'top': (-navPosition) + 'px', 'z-index': '1'});
    } else {
    $('#header-wrap').css({'position': 'static'});
    $('#main-wrap').css({'margin-top': '0px'});
    }
    });
    });
    </script>
    </body>
    </html>