HpBk-TemplateWorld | Alles für dich.

CSS 2014

/* Dieser Code ist urheberrechtlich geschützt. Wer den Quellcode kopiert und sich an meinen Daten vergreift begeht eine Urheberrechtsverletzung. Diese kann rechtliche Folgen mit sich bringen.*/


#Ueberblick {
border-bottom:4px solid #ebc42b;
margin-right: 22px;
margin-botom: 22px;
margin-top: 22px;
width:205px;
height: 205px;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: .6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/


/* Hover-Effekt bei Teaser */

#Ueberblick:hover {
  opacity: 1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
}


#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
h1#header span{display:none;}



 @charset "utf-8";
body {
    margin:0;
    padding:0;
    width:100%;
    color:#959595;
    font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main {
    padding:0;
    margin:0;
    background:#f5f1e6 url(https://img.webme.com/pic/h/hpbk-templateworld/main_bg.gif) repeat-y center center;
}
.clr {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
    font-size:0;
    line-height:0;
}



#Design {
border-bottom:4px solid #ebc42b;
margin-right: 20px;
margin-bottom: 10px;
width: 300px;
height: 300px;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: .6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/


/* Hover-Effekt bei Teaser */

#Design:hover {
  opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
}


.logo {
    padding:12px 0 0 40px;
    float:left;
    width:auto;
}

/* Logo Groesse Schriftart.*/

h1 {
    margin:0;
    padding:26px 0;
    color:#3a3b3b;
    font:bold 35px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-2px;
margin-top: 52px;
}
h1 span {
    color:#ebc42b;
}
h1 a, h1 a:hover {
    color:#3a3b3b;
    text-decoration:none;
}
h1 small {
    display:block;
    padding-left:417px;
margin-top: -27px;
    font:normal 25px/1.2em Arial, Helvetica, sans-serif;
    color:#959595;
    letter-spacing:normal;
}

h2 {
    margin:0;
padding-right: 10px;
padding-bottom: 19px;
    color:#3a3b3b;
    font:bold 24px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
}


h3 {
    margin:0;
padding-right: 10px;
padding-bottom: 19px;
    color:#3a3b3b;
    font:bold 24px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
}

h4 {
    margin:0;
    color:#3a3b3b;
    font:bold 19px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
margin-left: 7px;
align: left;
}

p {
    margin:8px 0;
    padding:0 0 8px 0;
    font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
p.spec {
    text-align:left;
}
a {
    color:#daa520;
    text-decoration:underline;
}
a.com {
    float:right;

}

.content_resize {
    margin:0 auto;

    width:970px;
}
.content .mainbar {
    margin:0;
    padding:0;
    float:left;
    width:670px;
}

.content .mainbar .article {
    margin:0;
color: #3a3b3b;
    padding: 0px 5px 8px 30px;
margin-top: -110px;
}

.socialmedia {
    margin:0;
color: #3a3b3b;
    padding: 0px 5px 8px 30px;
margin-top: -10px;

}

.content .sidebar {
    padding:0;
    float:right;
    width:300px;
}

.content .sidebar .gadget {
    margin:0;
    padding: 27px 16px 8px 40px;
}


ul.sb_menu, ul.ex_menu {
    margin:0;
    padding:0;
    list-style:none;
    color:#959595;
}

ul.sb_menu li, ul.ex_menu li {
    margin:0;
}
ul.sb_menu li {
    padding:4px 0;
    width:220px;
}

ul.ex_menu li {
    padding:4px 0;
}

ul.sb_menu li a, ul.ex_menu li a {
    color:#959595;
    text-decoration:none;
    margin-left:-12px;
    padding-left:12px;
}

ul.sb_menu li a:hover, ul.ex_menu li a:hover {
    color:#ebc42b;
    font-weight:bold;
    background:no-repeat left center;
}

ul.sb_menu li a:hover {
    text-decoration:underline;
}

ul.ex_menu li a:hover {
    text-decoration:none;
}

.content .mainbar .comment {
    margin:0;
    padding:16px 0 0 0;
}


.fbg {
}

.fbg_resize {
    margin:0 auto;
    width:890px;
    padding:24px 40px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
}

.fbg ul li {
    padding:4px 0;
}

.fbg a {
    margin:0;
    padding:2px 4px;
}

.fbg ul li a {
    margin:0;
    padding:2px 4px;
    background:none;
    text-decoration:none;
}

.fbg ul li a:hover {
    text-decoration:underline;
    font-weight:normal;
}

.fbg h2 {
}

.fbg img {
    padding:3px;
    border:0px solid #cfd2d4;
}

.fbg .col {
    margin:0;
    float:left;
}

.fbg .c1 {
    padding:0 16px 0 0;
    width:266px;
}

.fbg .c2 {
    padding:0 16px;
    width:300px;
}

.fbg .c3 {
    padding:0 0 0 16px;
    width:260px;
}

.fbg .c3 img {
    margin:8px 16px 4px 0;
    float:left;
}

/* Footer.*/

.footer {
}

.footer_resize {
    margin:0 auto;
    padding:24px 40px;
    width:890px;
    color:#959595;
}
.footer p {
    margin:0;
    padding:4px 0;
    line-height:normal;
    color:#959595;
}
.footer a {
    color:#959595;
    padding:inherit;
    text-decoration:underline;
}
.footer a:hover {
    text-decoration:none;
}
.footer .lf {
    float:left;
}
.footer .rf {
    float:right;
}
ol {
    list-style:none;
}
ol li {
    display:block;
    clear:both;
}
ol li label {
    display:block;
    margin:0;
    padding:16px 0 0 0;
}

input.text {
    width:480px;
    border:1px solid #c0c0c0;
    margin:2px 0;
    padding:5px 2px;
    height:16px;
    background:#fff;
}

/* Text-Areas Aussehen */

textarea {
    width:630px;
    margin:12px 0;
background-color: #F5F5F5;
            border:1px solid #CCCCCC;
    padding:2px;
    font:normal 12px/1.8em Arial, Helvetica, sans-serif;
  border-bottom: 3px solid #ebc42b;
height: 110px;
border-bottom:4px solid #ebc42b;-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity:  1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/
}

textarea:hover {
    width:630px;
    margin:12px 0;
background-color: #F5F5F5;
            border:1px solid #CCCCCC;
    padding:2px;
    font:normal 12px/1.8em Arial, Helvetica, sans-serif;
height: 110px;
  opacity: 1.0;
  border-bottom:4px solid #3a3b3b;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
}

ol li .send {
    margin:16px 0 0 0;
}
.searchform {
    float:right;
}
#formsearch {
    margin:0;
    padding:12px 0 0;
}
#formsearch span {
    display:block;
    margin:6px 0;
    padding:0;
    float:left;
    background:#fff none no-repeat top left;
}
#formsearch input.editbox_search {
    margin:0;
    padding:11px 6px 10px;
    float:left;
    width:181px;
    border:none;
    background:none;
    font:normal 12px/1.5em Arial, Helvetica, sans-serif;
    color:#a8acb2;
}
#formsearch input.button_search {
    margin:6px 0 0 0;
    padding:0;
    border:none;
    float:left;
}


.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
    margin:0;
    padding:0;
}
.header {
    background:no-repeat center 88px;
}
.header_resize {
    margin:0 auto;
    padding:0;
    width:970px;
}
.header .htext {
    margin:0;
    padding:0px 520px 48px 25px;
    height:185px;
    background: none no-repeat center center;

}
.header .htext h2 {
    color:#fff;
    font:normal 20px/1.5em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}
.header .htext p {
    color:#fff;
    font:normal 14px/1.4em Arial, Helvetica, sans-serif;
}
.header .htext a {
    color:#fff;
    text-decoration:underline;
}


/* Standard Navigation */

/* Gesamtbreite der Navigation .*/



.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family: arial, verdana, sans-serif;
      z-index: 1;
    position: fixed;
    top: 0px;
    margin-top: -10px;
    }

.menu ul{
    background:#FFFFFF;
    height:65px;
    list-style:none;
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/menu.gif) repeat-x center top;
    margin:0;
    padding:0;
    border-bottom:3px solid #ebc42b;
}

/* Einzelner Menüpunkt */

.menu li{
        margin:0;
    padding:10px 0px 0 0;
    float:left;
           min-width: 133px;
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/menu_sep.gif) no-repeat right center;
height: 55px;

        }

    .menu li a{
        background:#transparent url("http://www.loaditup.de/files/793505_8v7hnrz8hn.jpg") bottom right no-repeat;
        color:#3a3b3b;
        padding:22px 2px 0 0;
        display:block;
        font-weight:normal;
        line-height:55px;
        margin:0px;
        padding: 0px 16px;
        text-align:center;
        text-decoration:none;
        font-size: 13px;
        font-family:Arial, Helvetica, sans-serif;
height: 58px;
        }

/* Hover-Effekt des Menüpunktes .*/

        .menu li a:hover, .menu ul li:hover a{
        background:#f00 url(http://www.loaditup.de/files/793505_8v7hnrz8hn.jpg) repeat-x center;
        color:#3a3b3b;
height: 58px;
            }


    .menu p{
        clear:left;

        }    

/* Navigation Hilfe-Center .*/


.menu2
{
display: none;}

.menu2{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family: arial, verdana, sans-serif;
    z-index: 1;
    position: fixed;
    top: 0px;
    margin-top: -10px;
    font-size:12px;
    }

.menu2 ul{
    background:#FFFFFF;
    height:65px;
    list-style:none;
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/menu.gif) repeat-x center top;
    margin:0;
    padding:0;
    border-bottom:3px solid #ebc42b;
    }

    .menu2 li{
    margin:0;
    padding:10px 0px 0 0;
    float:left;
    min-width: 151px;
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/menu_sep.gif) no-repeat right center;
    height: 55px;
        }

    .menu2 li a{
        background:#transparent url("http://www.loaditup.de/files/793505_8v7hnrz8hn.jpg") bottom right no-repeat;
        color:#3a3b3b;
        padding:22px 2px 0 0;
        display:block;
        font-weight:normal;
        line-height: 55px;
        margin:0px;
        padding:0px 16px;
        text-align:center;
        text-decoration:none;
        font-size: 12px;
        font-family:Arial, Helvetica, sans-serif;
        height: 58px;
        }


        .menu2 li a:hover, .menu2 ul li:hover a{
        background:#f00 url(http://www.loaditup.de/files/793505_8v7hnrz8hn.jpg) repeat-x center;
        color:#3a3b3b;
        height: 58px;
            }

    .menu2 p{
        clear:left;
        }    

/* Bilder Design-Center Übersichtsseiten */

.bild {
  float: left;
  width: 145px;
  padding: 0px;
  margin-right: 20px;
    opacity: 0.8;

    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 
    /*Reflection*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));


  margin-bottom: 20px;
  background-color: #FFFFFF;
  border-bottom: 4px solid #ebc42b;
 }

/* Bilder Design-Center Übersichtsseiten Hover-Effekt */

.bild:hover {
  width: 145px;
   opacity: 1;
  padding: 0px;
  margin-right: 20px;
  border-bottom: 4px solid #ebc42b;
  -moz-box-shadow: 2px 2px 4px #2c4069;
  -webkit-box-shadow: 2px 2px 4px #2c4069;
  box-shadow: 2px 2px 4px #2c4069;
  margin-bottom: 20px;
  opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 }


/* Trennlinie */

hr {
    border:none;
    border-top:1px solid #cccccc;
    height:1px;
    margin-bottom:7px;
    margin-left:0px;
    margin-right:0px;
    }


/* Formular Felder */
        
input[type="submit"] {
background-color: #FFFFB2;
background-image: url(http://www.loaditup.de/files/641192_k4uzdqrusd.gif);
color: #3a3b3b;
margin-top: 10px;
margin-top: 10px;
border: 1px solid #c0c0c0;
border-bottom: 2px solid #ebc42b;
padding: 3px; }

input[type="submit"]:hover{
background-color: #FFFFB2;
background-image: url(http://www.loaditup.de/files/641194_g27rzp2ezk.gif);
color: #3a3b3b;
border-bottom: 2px solid #ebc42b;
padding: 3px;
margin-top: 10px;
}



 
#ex5 img {
    margin: 25px;
    opacity: 0.8;

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
  margin-bottom: 20px;
  background-color: #FFFFFF;
  border: 4px solid #ebc42b;
 
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 
    /*Reflection*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 

/* Slideshow Codes Hilfe Center Tutorial */
 
.slideshow {
    width: 615px;
    height: 255px;
 z-index:1;
    margin: 0px auto;

}
.slideshow img {
    padding: 0px;
 z-index:1;
    background: #transparent;
}


.slideshow2 {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}
.slideshow2 img {
    padding: 20px;
    background: #8CC1EC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

 
.slideshow3 {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}

.slideshow3 img {
    padding: 20px;
    background: #8CC1EC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.slideshow4 {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}
.slideshow4 img {
    padding: 20px;
    background: #8CC1EC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.slideshow5 {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}
.slideshow5 img {
    padding: 20px;
    background: #8CC1EC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.slideshow6 {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}
.slideshow6 img {
    padding: 20px;
    background: #8CC1EC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
.slideshowpartner {
    width: 615px;
    height: 255px;
    margin: 0px auto;
border-bottom: 3px solid #ebc42b;
}

.slideshowpartner img {
    padding: 0px;
    background: #transparent;
border-bottom: 3px solid #ebc42b;
}

/* Counter */

#counter{
display:none;}

#popup2 {
float: right;
width: 400px;
border: 3px solid #C4D0EA; }

/* Teaser */

#Teaser {
border-bottom:4px solid #ebc42b;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
height: 220px;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity:  1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/

/* Hover-Effekt bei Teaser */

#Teaser:hover {
  opacity: 1.0;
  border-bottom:4px solid #3a3b3b;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
}


#Teaser2 {
border-bottom:4px solid #ebc42b;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
height: 220px;
float: right;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: .6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/


#Teaser2:hover {
  opacity: 1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
}


.bild {
float: left;
width: 130px;
padding: 5px;
margin: 10px;
border: 1px solid #343434; }


/* Neue Lightbox für Design-Vorschau */

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message
{
    font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:200;
    color:#fff;
}

#sb-container
{
    position:fixed;
    margin:0;
    padding:0;
    top:0;
    left:0;
    z-index:999;
    text-align:left;
    visibility:hidden;
    display:none;
}

#sb-overlay
{
    position:relative;
    height:100%;
    width:100%;
}

#sb-wrapper
{
    position:absolute;
    visibility:hidden;
    width:100px;
}

#sb-wrapper-inner
{
    position:relative;
    border:0px solid #333333;
 border-bottom: 3px solid #ebc42b;

    height:100px;
}

#sb-body
{
    position:relative;
    height:100%;
}

#sb-body-inner
{
    position:absolute;
    height:100%;
    width:100%;
}

#sb-player.html
{
    height:100%;
    overflow:auto;
}

#sb-body img
{
    border:none;
}

#sb-loading
{
    position:relative;
    height:100%;
}

#sb-loading-inner
{
    position:absolute;
    font-size:14px;
    line-height:24px;
    height:24px;
    top:50%;
    margin-top:-12px;
    width:100%;
    text-align:center;
}

#sb-loading-inner span
{
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/loading.gif) no-repeat;
    padding-left:34px;
    display:inline-block;
}

#sb-body,#sb-loading
{
    background-color:#060606;
}

#sb-title,#sb-info
{
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
}

#sb-title,#sb-title-inner
{
    height:26px;
    line-height:26px;
}

#sb-title-inner
{
    font-size:16px;
}

#sb-info,#sb-info-inner
{
    height:20px;
    line-height:20px;
}

#sb-info-inner
{
    font-size:12px;
}

#sb-nav
{
    float:right;
    height:16px;
    padding:2px 0;
    width:45%;
}

#sb-nav a
{
    display:block;
    float:right;
    height:16px;
    width:16px;
    margin-left:3px;
    cursor:pointer;
    background-repeat:no-repeat;
}

#sb-nav-close
{
    background-image:url(https://img.webme.com/pic/h/hpbk-templateworld/close.png);
}

#sb-nav-next
{
    background-image:url(next.png);
}

#sb-nav-previous
{
    background-image:url(previous.png);
}

#sb-nav-play
{
    background-image:url(play.png);
}

#sb-nav-pause
{
    background-image:url(pause.png);
}

#sb-counter
{
    float:left;
    width:45%;
}

#sb-counter a
{
    padding:0 4px 0 0;
    text-decoration:none;
    cursor:pointer;
    color:#fff;
}

#sb-counter a.sb-counter-current
{
    text-decoration:underline;
}

div.sb-message
{
    font-size:12px;
    padding:10px;
    text-align:center;
}

div.sb-message a:link,div.sb-message a:visited
{
    color:#fff;
    text-decoration:underline;
}


/* Neue Lightbox für Design Uebersicht */
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message
{
    color:#3a3b3b;
    font:bold 24px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
margin-bottom: 5px;
    font-weight:200;
    color:#fff;
}

#sb-container
{
    position:fixed;
    margin:0;
    padding:0;
    top:0;
    left:0;
    z-index:999;
    text-align:left;
    visibility:hidden;
    display:none;
}

#sb-overlay
{
    position:relative;
    height:100%;
    width:100%;
}

#sb-wrapper
{
    position:absolute;
    visibility:hidden;
    width:100px;
}

#sb-wrapper-inner
{
    position:relative;
    border:0px solid #333333;
 border-bottom: 3px solid #ebc42b;

    height:100px;
}

#sb-body
{
    position:relative;
    height:100%;
}

#sb-body-inner
{
    position:absolute;
    height:100%;
    width:100%;
}

#sb-player.html
{
    height:100%;
    overflow:auto;
}

#sb-body img
{
    border:none;
}

#sb-loading
{
    position:relative;
    height:100%;
}

#sb-loading-inner
{
    position:absolute;
    font-size:14px;
    line-height:24px;
    height:24px;
    top:50%;
    margin-top:-12px;
    width:100%;
    text-align:center;
}

#sb-loading-inner span
{
    background:url(https://img.webme.com/pic/h/hpbk-templateworld/loading.gif) no-repeat;
    padding-left:34px;
    display:inline-block;
}

#sb-body,#sb-loading
{
    background-color:#060606;
}

#sb-title,#sb-info
{
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
}

#sb-title,#sb-title-inner
{
    height:26px;
    line-height:26px;
padding-bottom: 10px;
}

#sb-title-inner
{
    color:#ffffff;
    font:bold 24px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
}

#sb-info,#sb-info-inner
{
    height:20px;
    line-height:20px;
}

#sb-info-inner
{
    font-size:12px;
}

#sb-nav
{
    float:right;
    height:16px;
    padding:2px 0;
    width:45%;
}

#sb-nav a
{
    display:block;
    float:right;
    height:16px;
    width:16px;
    margin-left:3px;
    cursor:pointer;
    background-repeat:no-repeat;
}

#sb-nav-close
{
    background-image:url(https://img.webme.com/pic/h/hpbk-templateworld/close.png);
}

#sb-nav-next
{
    background-image:url(next.png);
}

#sb-nav-previous
{
    background-image:url(previous.png);
}

#sb-nav-play
{
    background-image:url(play.png);
}

#sb-nav-pause
{
    background-image:url(pause.png);
}

#sb-counter
{
    float:left;
    width:45%;
}

#sb-counter a
{
    padding:0 4px 0 0;
    text-decoration:none;
    cursor:pointer;
    color:#fff;
}

#sb-counter a.sb-counter-current
{
    text-decoration:underline;
}

div.sb-message
{
    font-size:12px;
    padding:10px;
    text-align:center;
}

div.sb-message a:link,div.sb-message a:visited
{
    color:#fff;
    text-decoration:underline;
}




.photos {
    width: 920px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}
.photos > div {
    background-color: #F5F5F5;
border-bottom: 3px solid #ebc42b;
    float: left;
    height: 200px;
    margin: 14px;
    overflow: hidden;
    position: relative;
    width: 200px;
height: 200px;
    z-index: 1;

    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;

    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}

.photos > div div {
    background: url(../images/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}

.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;

}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;

    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 50%;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}



.container{
height:200px;width:200px;
background:#000;
overflow:hidden;
position:relative;
}

.text{
background-color: #ebc42b;
top: 200px;
height:auto;width:inherit;
position:absolute;
    color:#ffffff;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

.text a{
color:#fff;
display:block;
padding:10px;
text-decoration:none;

/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
text-decoration:none;

}

.container:hover .text{
top:140px;
}


.box2{
background: #f5f5f5;
    padding: 5px;
padding-left: 20px;
width: 300px;
border: 1px solid #e5e5e5;
}



.box1{
    background-color: #FDFDEF;
    border: 1px solid #EBE9C5;
    padding: 5px;
padding-left: 20px;
width: 300px;
    border-radius: 4px;
}

.box3{
      background: #eee;
      border: 4px solid white;
    padding: 5px;
padding-left: 20px;
width: 300px;
      box-shadow: 0 0 1px rgba(0,0,0, .4);
    }

.box4{
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);    
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    padding: 5px;
padding-left: 20px;
width: 300px;
}


.box5{
background: #f5f5f5;
border: 1px solid #DDD;
box-shadow: 3px 3px 0px rgba(0,0,0, .2);
    padding: 5px;
padding-left: 20px;
width: 300px;
}
      

.box6{
background: #f5f5f5;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
    padding: 5px;
padding-left: 20px;
width: 300px;
}

.box7{
-moz-box-shadow: inset 0 0 15px 5px #DDD;
-webkit-box-shadow: inset 0 0 15px 5px #DDDDE5;
box-shadow: inset 0 0 15px 5px #DDD;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
    padding: 5px;
padding-left: 20px;
width: 300px;
}

Du bist der 635984 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.