@charset "iso-8859-1";

/*
file         mobile.css
license      (c) 2009 bpm consult ag, CH-Birsfelden - all rights reserved.

version history:
2.7.0-0    31.08.2009    sb      initial release
2.7.0-1     15.04.2010  mha     some updates (detailText annotation)
2.7.0-2     16.04.2010 mha      cp screen.css mobile.css
*/

/** GLOBAL DEFAULTS **/
* {
  margin:               0;
  border:               0;
  padding:              0;
}
body {
  height:               100%;
  width:                950px;
  margin:               0 auto;
  background-position:  50% 120px;
  background-repeat:    repeat-x;
  color:                #333333;
  font-family:          Verdana, sans-serif;
  font-size:            11px;
}
table {
  width:                100%;
  border-collapse:      collapse;
}
form {
  display:              inline;
}
input[type=text], input[type=password], select, textarea {
  border-top:           1px solid #999999;
  border-right:         1px solid #dddddd;
  border-bottom:        1px solid #dddddd;
  border-left:          1px solid #dddddd;
  padding:              2px 1px 1px 1px;
  font-size:            11px;
}
input[type=submit], input[type=reset], a.button {
  padding:              2px 10px 2px 10px;
  cursor:               pointer;
  color:                #ffffff;
  font-weight:          bold;
  font-size:            11px;
}
input[type=submit]:hover, input[type=reset]:hover, a.button:hover {
  background-color:     #000000;
  color:                #ffffff;
}
input[disabled] {
  background-color:     #cccccc !important;
  color:                #eeeeee !important;
  cursor:               default !important;
}
a, span.link, span.nolink {
  font-weight:          bold;
  text-decoration:      none;
  cursor:               pointer;
}
span.nolink {
  cursor:               auto;
}
a:hover, span.link:hover {
  color:                #000000;
  text-decoration:      underline;
}
a.button {
  padding:              3px 10px 3px 10px;
  line-height:          22px;
}
a.button:hover {
  text-decoration:      none;
}
.button {
  cursor:               pointer;
}
.warning {
  padding-top:          5px;
  color:                #ff0000;
  font-weight:          bold;
}
.warning div {
  padding-bottom:       5px;
}
h1 {
  padding:              2px 0 8px 0;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            18px;
}
h2 {
  padding:              2px 0 6px 0; 
  font-family:          Georgia,Serif;
  font-weight:          bold;
  font-size:            17px;
}
.secret {
  visibility:           hidden;
}
.noVisible {
  visibility:           hidden;
}

/** ICON SPRITES **/
.clip {
  position:             absolute;
}
.portal .clip {
  clip:                 rect(0, 20px, 20px, 0);
}
.verlag .clip {
  margin-top:           -20px;
  clip:                 rect(20px, 20px, 40px, 0);
}
.buchshop .clip {
  margin-top:           -40px;
  clip:                 rect(40px, 20px, 60px, 0);
}
.clip:hover {
  margin-top:           -60px;
  clip:                 rect(60px, 20px, 80px, 0);
}
.clipIcon {
  margin-left:          -25px;
}
.clipText {
  display:              block;
  line-height:          25px;
  padding:              5px 0 0 25px;
  font-weight:          bold;
}
.clipText:hover .clip {
  margin-top:           -60px;
  clip:                 rect(60px, 20px, 80px, 0);
}
.clipLink {
  position:             absolute;
  margin-left:          -15px;
}
.portal .clipLink {
  margin-top:           2px;
  clip:                 rect(0, 9px, 9px, 0);
}
.verlag .clipLink {
  margin-top:           -7px;
  clip:                 rect(9px, 9px, 18px, 0);
}
.buchshop .clipLink, .overlayBox .clipLink {
  margin-top:           -16px;
  clip:                 rect(18px, 9px, 27px, 0);
}
a:hover .clipLink, span.link:hover .clipLink {
  margin-top:           -25px;
  clip:                 rect(27px, 9px, 36px, 0);
}
.clipArrow {
  position:             absolute;
  margin-left:          -8px;
}
.portal .clipArrow {
  margin-top:           4px;
  clip:                 rect(0, 5px, 5px, 0);
}
.verlag .clipArrow {
  margin-top:           -1px;
  clip:                 rect(5px, 5px, 10px, 0);
}
.buchshop .clipArrow {
  margin-top:           -6px;
  clip:                 rect(10px, 5px, 15px, 0);
}
a:hover .clipArrow, span.link:hover .clipArrow {
  margin-top:           -11px;
  clip:                 rect(15px, 5px, 20px, 0);
}
.clip16 {
  position:             absolute;
  margin-left:          -16px;
  cursor:               pointer;
}
.portal .clip16 {
  clip:                 rect(0, 16px, 16px, 0);
}
.verlag .clip16 {
  margin-top:           -16px;
  clip:                 rect(16px, 16px, 32px, 0);
}
.buchshop .clip16 {
  margin-top:           -32px;
  clip:                 rect(32px, 16px, 48px, 0);
}
.clip16:hover {
  margin-top:           -48px;
  clip:                 rect(48px, 16px, 64px, 0);
}
.clipNext {
  height:               16px;
  margin-left:          20px;
}

/** DASH **/
.dash {
  line-height:          100%;
  font-family:          Arial, sans-serif;
  font-size:            13px;
}
.portal .dash {
  color:                #977537;
}
.verlag .dash {
  color:                #523735;
}
.buchshop .dash {
  color:                #4a769a;
}

/** HEADER **/
.header {
  clear:                both;
  height:               65px;
}
.header > div {
  float:                left;
  height:               100%;
}
.headerLogo {
  width:                214px;
}

/** HEADER SECTION **/
.headerSection1 {
  width:                260px;
}
.headerSection2, .headerSection3 {
  width:                130px;
}
.headerSectionTitle a {
  display:              block;
  padding:              35px 10px 5px 10px;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            18px;
  line-height:          25px;
  text-decoration:      none;
}
.headerSectionTitle a:hover {
  color:                #ffffff !important;
}

/** HEADER SECTION PORTAL **/
.portal .headerSection1 {
  color:                #eae3d7;
  background-color:     #977537;
  background-image:     url(images/portal_bt_main.jpg);
}
.portal .headerSection1 a {
  color:                #eae3d7;
}
.portal .headerSection2 {
  color:                #dcd7d7;
  background-color:     #523735;
  background-image:     url(images/verlag_bt_small.jpg);
}
.portal .headerSection2 a {
  color:                #dcd7d7;
}
.portal .headerSection3 {
  color:                #dbe4eb;
  background-color:     #4a769a;
  background-image:     url(images/buchshop_bt_small.jpg);
}
.portal .headerSection3 a {
  color:                #dbe4eb;
}

/** HEADER SECTION PUBLISHER **/
.verlag .headerSection1 {
  color:                #dcd7d7;
  background-color:     #523735;
  background-image:     url(images/verlag_bt_main.jpg);
}
.verlag .headerSection1 a {
  color:                #dcd7d7;
}
.verlag .headerSection2 {
  color:                #eae3d7;
  background-color:     #977537;
  background-image:     url(images/portal_bt_small.jpg);
}
.verlag .headerSection2 a {
  color:                #eae3d7;
}
.verlag .headerSection3 {
  color:                #dbe4eb;
  background-color:     #4a769a;
  background-image:     url(images/buchshop_bt_small.jpg);
}
.verlag .headerSection3 a {
  color:                #dbe4eb;
}

/** HEADER SECTION BOOKSTORE **/
.buchshop .headerSection1 {
  color:                #dbe4eb;
  background-color:     #4a769a;
  background-image:     url(images/buchshop_bt_main.jpg);
}
.buchshop .headerSection1 a {
  color:                #dbe4eb;
}
.buchshop .headerSection2 {
  color:                #dcd7d7;
  background-color:     #523735;
  background-image:     url(images/verlag_bt_small.jpg);
}
.buchshop .headerSection2 a {
  color:                #dcd7d7;
}
.buchshop .headerSection3 {
  color:                #eae3d7;
  background-color:     #977537;
  background-image:     url(images/portal_bt_small.jpg);
}
.buchshop .headerSection3 a {
  color:                #eae3d7;
}

/** HEADER SEARCH **/
.headerSearch {
  width:                214px;
}
.headerSearch p {
  padding:              2px 10px 0 10px;
}
.headerSearch p:first-child {
  margin-top:           6px;
}
.headerSearch input[type=text] {
  width:                191px;
}
.headerSearch select {
  width:                173px;
  margin-right:         2px;
}
.headerSearch input[type=image] {
  margin-bottom:        -5px;
}

/** TOP NAVIGATION **/
.top {
  clear:                both;
  height:               55px;
}
.top > div {
  float:                left;
  height:               100%;
}
.topNavLeft {
  width:                605px;
}
.topNavLeft ul {
  margin-left:          0;
  padding:              33px 10px 0 10px;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            13px;
}
.topNavLeft li.active a {
  color:                #000000;
}
.topLanguage {
  width:                130px;
}
.topLanguage ul {
  margin-left:          0;
  padding:              35px 10px 0 10px;
}
.topNavRight {
  width:                215px;
  font-size:            10px;
}
.topNavRight p {
  padding:              21px 10px 0 10px;
}
.topNavRight ul {
  margin-left:          0;
  padding:              2px 10px 0 10px;
}
.top li {
  float:                left;
  margin-left:          4px;
  padding-left:         4px;
  list-style-type:      none;
}
.top li:first-child {
  margin-left:          0;
  border-left:          0;
  padding-left:         0;
}

/** PAY-OFF AREA **/
.payoff {
  clear:                both;  
}
.payoff > div {
  float:                left;
  height:               100%;
  min-height:           30px;
  overflow:             hidden;
}
.payoff p {
  padding:              0px 10px 0 10px;
  font-family:          Georgia, Serif;
}
.payoff a {
  font-weight:          normal;
  text-decoration:      none;
}
.payoff a:hover {
  color:                #ffffff !important;
}
.payoff .dash {
  padding-top:          5px;
  font-size:            28px;
}
.payoff1 {
  width:                475px;
  font-size:            28px;
}
.payoff2, .payoff3 {
  width:                130px;
  font-size:            20px;
}
.payoff4 {
  width:                215px;
}
.start .payoff1, .start .payoff2, .start .payoff3 {
  height:               240px;
}

/** PAY-OFF AREA PORTAL **/
.portal .payoff1, .portal .payoff1 .dash {
  color:                #eae3d7;
}
.portal .payoff2 {
  background-color:     #523735;
  background-image:     url(images/verlag_image.jpg);
  background-position:  100% 0;
  color:                #dcd7d7;
}
.portal .payoff2 a, .portal .payoff2 .dash {
  color:                #dcd7d7;
}
.portal .payoff3 {
  background-color:     #4a769a;
  background-image:     url(images/buchshop_image.jpg);
  color:                #dbe4eb;
}
.portal .payoff3 a, .portal .payoff3 .dash {
  color:                #dbe4eb;
}

/** PAY-OFF AREA PUBLISHER **/
.verlag .payoff1, .verlag .payoff1 .dash {
  color:                #dcd7d7;
}
.verlag .payoff2 {
  background-color:     #977537;
  background-image:     url(images/portal_image.jpg);
  color:                #eae3d7;
}
.verlag .payoff2 a, .verlag .payoff2 .dash {
  color:                #eae3d7;
}
.verlag .payoff3 {
  background-color:     #4a769a;
  background-image:     url(images/buchshop_image.jpg);
  color:                #dbe4eb;
}
.verlag .payoff3 a, .verlag .payoff3 .dash {
  color:                #dbe4eb;
}

/** PAY-OFF AREA BOOKSTORE **/
.buchshop .payoff1, .buchshop .payoff1 .dash {
  color:                #dbe4eb;
}
.buchshop .payoff2 {
  background-color:     #523735;
  background-image:     url(images/verlag_image.jpg);
  background-position:  100% 0;
  color:                #dcd7d7;
}
.buchshop .payoff2 a, .buchshop .payoff2 .dash {
  color:                #dcd7d7;
}
.buchshop .payoff3 {
  background-color:     #977537;
  background-image:     url(images/portal_image.jpg);
  color:                #eae3d7;
}
.buchshop .payoff3 a, .buchshop .payoff3 .dash {
  color:                #eae3d7;
}

/** ALERT MESSAGE BOX **/
#alert {
  display:              none;
}
.alertBg {
  position:             fixed;
  top:                  0;
  left:                 0;
  height:               100%;
  width:                100%;
  background-image:     url(images/alertBg.png);
}
.alertbox {
  position:             absolute;
  min-width:            200px;
}
.alertboxTopLeft {
  float:                left;
  height:               30px;
  width:                15px;
  background-image:     url(images/alertbox.png);
}
.alertboxTopRight {
  min-width:            400px;
  margin-left:          15px;
  padding:              5px 15px 0 0;
  line-height:          25px;
  background-image:     url(images/alertbox.png);
  background-position:  100% 0;
  font-weight:          bold;
}
.alertboxMiddleLeft {
  background-image:     url(images/alertboxBody.png);
  margin-right:         15px;
}
.alertboxMiddleRight {
  min-width:            400px;
  margin:               0 -15px 0 15px;
  padding:              10px 15px 5px 0;
  background-image:     url(images/alertboxBody.png);
  background-position:  100% 0;
}
.alertboxBottomLeft {
  clear:                both;
  float:                left;
  height:               15px;
  width:                15px;
  background-image:     url(images/alertbox.png);
  background-position:  0 100%;
}
.alertboxBottomRight {
  min-width:            400px;
  height:               15px;
  margin-left:          15px;
  padding-right:        15px;
  background-image:     url(images/alertbox.png);
  background-position:  100% 100%;
}
.alertboxTopRight .alertboxClose {
  float:                right;
  height:               16px;
  width:                16px;
  margin-top:           5px;
  background-image:     url(images/alertboxClose.png);
  cursor:               pointer;
}
.alertboxTopRight .alertboxClose:hover {
  background-position:  100% 100%;
}
.alertboxMiddleRight .alertboxButton {
  padding:              10px 10px 0 0;
  text-align:           center;
}

/** PRINT HEADER **/
.print {
  display:              none;
}

/** CONTENT AREA **/
.content {
  clear:                both;
}
.content > div {
  float:                left;
  height:               100%;
  margin-bottom:        40px;
}
.contentLeft {
  width:                215px;
}
.contentLeftWide {
  width:                475px;
}
.contentMain {
  width:                520px;
}
.contentMainNarrow {
  width:                260px;
}
.contentRight {
  width:                215px;
}

/** BOX WIDTH **/
.narrow, .narrow .infoImage img {
  width:                195px;
}
.wide, .wide .infoImage img, .doublewide .infoImage img {
  width:                240px;
}
.doublewide {
  width:                500px;
}

/** TEXT BOX **/
.text {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.textImage {
  float:                left;
  height:               auto;
  margin:               0 10px 10px 0;
}
.textSubject {
  margin-bottom:        16px;
  line-height:          150%;
  font-weight:          bold;
  font-size:            13px;
}
.textContent {
  line-height:          150%;
  font-size:            13px;
}
.textContent p {
  margin-bottom:        16px;
}
.textLink a {
  display:              block;
  float:                left;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}
.textFlash {
  display:              none;
}
.text object {
  outline:              none;
}

/** INFO BOX **/
.info {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.infoImage img {
  height:               auto;
}
.infoText {
  line-height:          150%;
}
.infoLink a {
  display:              block;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}
.infoSide {
  float:                right;
  width:                285px;
  margin-left:          20px;
}
.infoSide .infoLink {
  display:              none;
}
.infoSide .infoText p {
  margin-top:           16px;
  margin-bottom:        0;
  line-height:          150%;
  font-size:            13px;
}
.infoSide .infoText>p:first-child {
  margin-top:           0;
  margin-bottom:        0;
}
.infoSide  p + ul.linkContentList {
  margin-top:           16px;
}
.infoSide .linkContentList li {
  list-style:           square outside url("images/sjm_link_generic.png");
  line-height:          150%;
  font-size:            13px;
}
.infoSide li {
  margin-left:          18px;
}
.doublewide .infoImage img {
  width:                195px;
}

/** BOOK BOX **/
.book {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.bookImage img {
  float:                left;
  border:               1px solid #dddddd;
  margin:               0 10px 5px 0;
}
.bookPrice {
  margin:               4px 0;
}
.bookAction a, .bookAction span {
  display:              block;
  float:                left;
  height:               20px;
  width:                20px;
  margin-right:         2px;
}
.bookAction img {
  margin:               0 2px 2px 0;
}
.bookText {
  clear:                both;
  line-height:          150%;
}
.bookLink a {
  display:              block;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}

/** PREVIEW BOX **/
.preview {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.previewTitle {
  margin-top:           5px;
  padding:              5px 10px 5px 10px;
}
.previewTitle span {
  display:              block;
  padding:              2px 2px 2px 15px;
}
.previewTitle .plus {
  visibility:           hidden;
}
.previewContent {
  padding-top:          5px;
}
.previewContentItem {
  padding:              5px 10px 0 10px;
}
.previewContentItemRemove {
  float:                right;
}
.previewContentItemRemove .clipLink {
  margin-left:          -9px;
}
.previewContentItemArticle {
  display:              block;
  padding-right:        10px;
}
.previewContentItemArticleAuthor {
  display:              block;
  padding-bottom:       2px;
  font-weight:          normal;
}
.previewAction {
  padding:              5px 10px 10px 10px;
}

/** IMAGE SHOW **/
.imageshow {
  display:              none;
  clear:                both;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
  font-size:            0;
}
.imageSlider {
  height:               0px;
}
.sliderItem {
  text-align:           center;
  white-space:          nowrap;
}
.sliderItem img {
  height:               auto;
  margin:               0 6px 0 6px;
  border:               1px solid #dddddd;
}
.ux-carousel-slides-wrap {
  overflow:             hidden;
  position:             relative;
}
.ux-carousel-slide {
  float:                left;
  overflow:             hidden;
  text-align:           center;
}
.ux-carousel-nav {
  height:               17px;
  width:                100%;
}
.ux-carousel-nav-next, .ux-carousel-nav-prev {
  position:             relative;
  display:              block;
  top:                  -84px;
  height:               17px;
  width:                11px;
}
.ux-carousel-nav-next {
  float:                right;
  background-image:     url('images/ic_page_forward.png');
}
.ux-carousel-nav-prev {
  float:                left;
  background-image:     url('images/ic_page_back.png');
}
.verlag .ux-carousel-nav-next, .verlag .ux-carousel-nav-prev {
  background-position:  0 51px;
}
.buchshop .ux-carousel-nav-next, .buchshop .ux-carousel-nav-prev {
  background-position:  0 34px;
}
.ux-carousel-nav-next:hover, .ux-carousel-nav-prev:hover {
  background-position:  0 17px;
}
.ux-carousel-nav-play, .ux-carousel-caption, .ux-carousel-indexnav {
  display:              none;
}

/** BIG TIP **/
#bigtip {
  display:              none;
  height:               170px;
  overflow:             hidden;
  width:                260px;
  padding:              10px 10px 10px 20px;
  color:                #ffffff;
  text-align:           left;
}
.bigtipItem {
  max-height:           170px;
  overflow:             hidden;
}
.bigtipItem span {
  display:              block;
}
.bigtipContent {
  display:              none;
}
.bigtipContentTitle {
  margin-bottom:        10px;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            13px;
  font-weight:          bold;
}
.bigtipContentPrice {
  margin-bottom:        10px;
  font-weight:          bold;
}

/** NAV BOX **/
.nav {
  margin:               30px 10px 0 10px;
}
.navTitle {
  margin:               2px 0 7px 0;
}
.navLinks {
  margin-left:          0;
}
.navLinks li {
  width:                100%;
  margin:               0 0 2px 0;
  list-style-type:      none;
}
.navLinks a {
  display:              block;
  padding:              2px 2px 2px 20px;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            13px;
}
.navLinks a.first {
  border-top:           0;
}
.navLinks a:hover, .navLinks li.active a {
  color:                #000000;
}
.navLinksSub {
  margin-left:          0;
  padding-bottom:       2px;
}
.navLinksSub li:first-child {
  margin-top:           2px;
}
.navLinksSub li a {
  border-top:           0;
  padding:              2px 2px 4px 20px;
  font-family:          Verdana, sans-serif;
  font-weight:          normal;
  font-size:            11px;
}
.navLinksSub li.active a {
  font-weight:          bold;
}
.navEnd {
  clear:                both;
}

/** CONTENT NAVIGATION **/
.navcontent {
  float:                left;
  width:                500px;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.navcontent ul {
  margin-left:          0;
  list-style-type:      none;
}

/** LIST BOX **/
.list {
  margin:               30px 10px 0 10px;
}
.listTitle {
  padding:              2px 0 8px 0;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            18px;
}
.listLinks, listUsers {
  margin-left:          0;
}
.listLinks li, .listUsers li {
  float:                left;
  width:                100%;
  margin:               0 0 2px 0;
  list-style-type:      none;
}
.listLinks a {
  display:              block;
  padding:              5px 2px 5px 20px;
}
.listUsers a {
  display:              block;
  padding:              0 0 2px 20px;
}
.listLinks a:hover, .buchshop .listLinks a:hover, .verlag .listLinks a:hover, .listUsers a:hover {
  color:                #000000;
}

/** LIST BOX BOOKSTORE **/
.buchshop .listTitle {
  color:                #4a769a;
}
.buchshop .listLinks a {
  color:                #4a769a;
  background-color:     #dbe4eb;
}

/** LIST BOX PUBLISHER **/
.verlag .listTitle {
  color:                #523735;
}
.verlag .listLinks a {
  color:                #523735;
  background-color:     #dcd7d7;
}

/** LOGIN **/
.login {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.loginUsername {
  padding:              20px 10px 0 10px;
}
.loginPassword {
  padding:              5px 10px 5px 10px;
}
.loginUsername span, .loginPassword span {
  display:              block;
  font-weight:          bold;
}
.loginUsername input, .loginPassword input {
  width:                99%;
}
.loginAuto {
  padding:              5px 10px 10px 10px;
}
.loginLink {
  padding:              0 10px 0 10px;
}
.loginLink a {
  padding:              3px 0 0 15px;
  line-height:          100%;
}
.loginSubmit {
  padding:              10px 10px 15px 10px;
  text-align:           right;
}

/** LOST PASSWORD **/
.password {
  float:                left;
  width:                500px;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.passwordText {
  padding:              20px 10px 0 10px;
}
.passwordUsername {
  padding:              10px;
}
.passwordUsername span {
  display:              block;
  font-weight:          bold;
}
.passwordUsername input {
  width:                99%;
}
.passwordSubmit {
  padding:              10px 10px 20px 10px;
  text-align:           right;
}

/** REGISTER **/
.register {
  float:                left;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.registerTab {
  height:               18px;
  margin-left:          0;
}
.registerTab li {
  cursor:               pointer;
  float:                left;
  display:              block;
  padding:              2px 10px 2px 10px;
  font-weight:          bold;
  white-space:          nowrap;
}
.registerTab li.active {
  cursor:               default;
}
.registerTab li:hover {
  background-color:     #000000;
  color:                #ffffff;
}
.registerForm {
  clear:                both;
  width:                100%;
}
.registerForm td {
  padding:              10px 10px 0 10px;
}
.registerForm input[type=text], .registerForm input[type=password], .registerForm select {
  width:                240px;
}
.registerForm input[type=submit] {
  margin-bottom:        15px;
}
.registerForm span {
  padding-right:        20px;
}

/** SEARCH **/
.search {
  float:                left;
  margin:               10px 10px 0 10px;
  padding-bottom:       10px;
}
.searchForm {
  padding:              10px 10px 5px 10px;
}
.searchForm p {
  margin-bottom:        2px;
}
.searchForm input[type=text] {
  width:                305px;
  margin-right:         10px;
}
.searchForm input.long {
  width:                420px;
  margin-right:         15px;
}
.searchForm input.short {
  width:                250px;
}
.searchForm input.date {
  width:                223px;
  margin:               0 -8px 0 8px;
}
.searchForm .key, .searchOptions .key {
  float:                left;
  width:                130px;
  padding-right:        10px;
}
.searchForm input[type=image] {
  margin-left:          16px;
}
.searchEnhance {
  padding:              0 310px 10px 10px;
}
.searchEnhance .link, .searchOptions .link {
  display:              block;
  padding:              0 2px 0 15px;
}
.searchOptions {
  display:              none;
  padding:              0 10px 10px 10px;
}
.searchOptions p {
  padding-top:          8px;
}
.search th, .search td {
  padding:              2px;
  text-align:           left;
}
.contentMainNarrow .searchForm {
  width:                220px;
  margin-bottom:        10px;
  padding:              10px 10px 20px 10px;
}
.contentMainNarrow .searchForm span {
  font-weight:          bold;
}
.contentMainNarrow .searchForm input.short {
  width:                210px;
  margin-bottom:        5px;
}
.contentMainNarrow .searchForm select.short {
  width:                185px;
  margin-right:         5px;
}
.contentMainNarrow .searchForm input[type="image"] {
  margin-left:          3px;
}

/** NEWSLETTER **/
.newsletter {
  float:                left;
  width:                500px;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.newsletterTitle {
  font-weight:          bold;
  font-size:            13px;
}
.newsletterText {
  padding:              5px 0 5px 0;
  line-height:          150%;
}
.newsletterCheck {
  padding:              2px 0 2px 0;
}
.newsletterForm {
  padding:              5px;
}
.newsletterForm span {
  float:                left;
  width:                120px;
}
.newsletterForm input {
  width:                300px;
}
.newsletterActions {
  text-align:           center;
}

/** DETAIL **/
.detail {
  float:                left;
  margin:               10px 10px 0 10px;
  padding-bottom:       10px;
}
.detailAuthor {
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            13px;
}
.detailTitle {
  padding:              2px 0 2px 0;
  font-family:          Georgia, Serif;
  font-weight:          bold;
  font-size:            18px;
}
.detailSubtitle {
  font-family:          Georgia, Serif;
  font-size:            13px;
}
.detailDMR {
  display:              none;
}
.detailLink a {
  display:              block;
  padding:              2px 0 0 15px;
  line-height:          100%;
}
.detailCover {
  float:                left;
  width:                150px;
  overflow:             hidden;
}
.detailCover .cover {
  height:               auto;
  max-width:            150px;
  min-width:            128px;
}
.detailCover .othericons {
  height:               20px;
  padding:              10px 0 0 15px;
}
.detailCover .othericons span {
  padding-right:        20px;
}
.detailOverview {
  float:                right;
  width:                325px;
  font-size:            11px;
}
.detailOverview th, .detailOverview td {
  text-align:           left;
  vertical-align:       top;
  padding-bottom:       2px;
}
.detailOverview th {
  padding-right:        10px;
}
.detailOverview .bottomSpace {
  padding-bottom:       10px;
}
.detailOverview .bold {
  font-weight:          bold;
}
.detailText {
  clear:                both;
  /*padding:              5px 0 10px 0;*/
  padding:              0px 0 10px 0;
  line-height:          150%;
  font-size:            13px;
}
.detailText ul {
  margin-left:          15px;
}
.detailText ol {
  margin-left:          20px;
}
.detailText p {
  margin:               16px 0 0 0;
}
.detailText > p:first-child,
.detailText > p:first-child  + p,
.detailText  .detailTextHeader + p,
.detailText p.detailLink {
  margin-top:           0;
}
.detailText h2 + p {
  margin-top:           0;
}

.detailTextHeader {
  color:                #000000;
  font-family:          Verdana, sans-serif;
  font-weight:          bold;
  font-size:            13px;
}
.detailMore > ul {
  float:                left;
  width:                150px;
}
.detailMore > div {
  float:                right;
  width:                325px;
}
.detailMore .activeTab a {
  color:                #000000;
}
.detailMore a {
  padding-top:          6px;
  padding-bottom:       8px;
}

/** TAB **/
.tab {
  float:                left;
  margin:               15px 10px 0 10px;
  padding-bottom:       10px;
}
.tabBasket {
  float:                right;
  margin-right:         40px;
}
.tabMail {
  float:                right;
  margin-right:         20px;
}
.tabMailShow {
  margin-top:           -48px !important;
  clip:                 rect(48px, 16px, 64px, 0) !important;
}
.tabPrint {
  float:                right;
}
.tabRecommend {
  display:              none;
  margin:               20px 0 20px 0;
  padding:              5px 0 5px 0;
}
.tabRecommendClose {
  text-align:           right;
  padding:              5px;
}
.tabRecommendClose:hover .clipLink {
  margin-top:           -25px;
  clip:                 rect(27px, 9px, 36px, 0);
}
.tabRecommendTitle {
  padding:              0 10px 0 10px;
}
.tabRecommendForm {
  padding:              10px;
}
.tabRecommendForm span {
  float:                left;
  width:                120px;
}
.tabRecommendForm input[type=text] {
  width:                200px;
}
.tabRecommendForm textarea {
  height:               100px;
  width:                200px;
}
.tabRecommendButton {
  padding:              10px;
  text-align:           right;
}
.tabHeader {
  height:               18px;
  margin:               0 0 30px 0;
}
.tabHeader li {
  float:                left;
  list-style-type:      none;
}
.tabHeader li:first-child {
  border-left:          0;
}
.tabHeader li a {
  color:                #ffffff;
}
.tabHeader li.activeTab a:hover {
  text-decoration:      none;
}
.tabHeader a.disabled, .tabHeader a.disabled:hover {
  background-color:     #cccccc;
  color:                #eeeeee;
  text-decoration:      none;
  cursor:               default;
}
.tabHeader a {
  display:              block;
  padding:              2px 10px 2px 10px;
  white-space:          nowrap;
}
.tabHeader a:hover {
  background-color:     #000000;
  color:                #ffffff;
}
.tabPanel {
  clear:                both;
  margin-left:          1px;
}
.tabPanelTitle {
  padding:              16px 1px 8px 1px;
  font-weight:          bold;
  font-size:            13px;
}
.tabLink a {
  display:              block;
  padding:              0 2px 0 15px;
  line-height:          100%;
}

/** AJAX TAB HANDLING **/
.panel {
  display:              none;
}

/** TABLE WITH BORDERS **/
.tableBorders {
  margin-bottom:        10px;
}
.tableBorders th {
  padding:              3px 3px 3px 0;
  text-align:           left;
}
.tableBorders td {
  height:               30px;
  padding:              3px 3px 3px 0;
}
.tableBorders .noLine {
  border:               0;
}
.tableBorders .tabPath {
  height:               auto;
  overflow:             hidden;
  padding-top:          0;
  vertical-align:       top;
}

/** ACCOUNT **/
.account {
  clear:                both;
  padding:              16px 10px 10px 11px;
}
.accountTitle {
  padding:              16px 1px 8px 1px;
}
.account .colAddress {
  text-align:           left;
}
.account .colAddressMain {
  font-weight:          bold;
}
.account .colChoose {
  width:                120px;
  text-align:           center;
}
.account .colEdit, .account .colChange {
  width:                80px;
  text-align:           center;
}
.account .colValue {
  width:                240px;
}
.accountOrders .quantity {
  text-align:           center;
}
.accountLink a {
  display:              block;
  padding:              0 2px 0 15px;
  line-height:          100%;
}
.accountRulerTop, .accountRulerBottom {
  padding:              10px 0 10px 0;
  font-weight:          bold;
  text-align:           right;
}
.accountRulerTop {
  margin-top:           10px;
}
.accountActions {
  height:               20px;
  padding-top:          10px;
  text-align:           right;
}
.accountSearch th, .accountSearch td {
  padding:              5px 10px 5px 10px;
  text-align:           left;
}
.accountSearch tr:first-child p {
  margin-top:           10px;
}
.accountSearch input[type=text] {
  width:                220px;
}
.accountSearchActions p {
  padding:              5px 0 10px 0;
}

/** CONTACT **/
.contact {
  float:                left;
  width:                500px;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.contact td {
  vertical-align:       text-bottom;
}
.contact .txtarea {
  padding-top:          12px;
  vertical-align:       top;
}
.contact textarea {
  height:               80px;
  width:                240px;
}
.contactSubject {
  margin-bottom:        16px;
  line-height:          150%;
  font-weight:          bold;
  font-size:            13px;
}
.contactActions {
  margin:               10px 0 10px 0;
  text-align:           right;
}

/** RESULT **/
.result {
  clear:                both;
  padding:              10px;
}
.resultTitle, .resultSort {
  padding:              15px 0px 5px 0px;
}
.resultSort > span {
  float:                right;
}
.resultSort > span a {
  margin-right:         18px;
}
.resultRulerTop, .resultRulerBottom {
  height:               12px;
  padding:              5px 0 5px 0;
  text-align:           right;
}
.resultItem {
  margin-top:           30px;
  margin-bottom:        10px;
}
.resultItemCover {
  float:                left;
  max-height:           100px;
}
.resultItemArticle {
  float:                right;
  width:                430px;
}
.resultItemArticleAuthor {
  margin-bottom:        2px;
  font-weight:          bold;
}
.resultItemArticleTitle {
  font-size:            13px;
}
.resultItemArticlePrice {
  margin:               2px 0 2px 0;
  font-weight:          bold;
}
.resultItemAction {
  clear:                both;
  padding:              0 0 5px 85px;
}
.resultItemAction span {
  float:                right;
  margin-top:           -9px;
}
.resultItemAction span a, .resultItemAction span span {
  display:              block;
  float:                left;
  height:               20px;
  width:                20px;
  margin-top:           0;
  margin-right:         2px;
}
.resultItemAction span img {
  margin-right:         2px;
}

/** BOOKPACK **/
.bookpack {
  clear:                both;
  padding:              15px 0 10px 0;
}
.bookpackRulerTop, .bookpackRulerBottom {
  clear:                both;
  margin:               0 10px 0 10px;
  padding:              5px 0 5px 0;
  text-align:           right;
}
.bookpack .book {
  height:               240px;
  overflow:             hidden;
}
.bookpack .book .dash {
  display:              none;
}
.bookpack .resultItem {
  margin:               10px; 
  margin-top:           30px;
}

/** CHALLENGE **/
.challenge {
  margin-top:           30px;
}
.challengeTitle {
  padding:              0 3px 7px 3px;
  font-weight:          bold;
}
.challengeQuestions {
  display:              none;
}
.challengeInfo {
  padding:              7px 3px 15px 3px;
}
.challengeActions {
  text-align:           center;
}

/** EVENT **/
.events {
  clear:                both;
  margin:               0 10px 0 10px;
  padding:              30px 0 10px 0;
}
.eventsCaption {
  margin-bottom:        10px;
}
.eventsRulerTop, .eventsRulerBottom {
  padding:              10px 0 10px 0;
  font-weight:          bold;
  text-align:           right;
}
.eventsItem {
  clear:                both;
  padding:              10px 0 10px 0;
}
.eventsItemTitle {
  font-size:            13px;
}
.eventsItemSubtitle {
  margin-bottom:        15px;
  font-weight:          bold;
}
.eventsItemPicture {
  margin-bottom:        10px;
}
.eventsItemHtmlText {
  margin:               10px 0 5px 0;
}
.eventsItemLink a {
  display:              block;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}

/** NOTEPAD **/
.notepad {
  clear:                both;
  padding:              15px 10px 10px 10px;
}
.notepadTitle {
  padding:              15px 0px 5px 0px;
}
.notepadMail {
  float:                right;
  margin:               -20px 20px 0 0;
}
.notepad .tabRecommend {
  margin-top:           0px;
}
.notepadPrint {
  float:                right;
  margin-top:           -20px;
}
.notepadItem {
  clear:                both;
  padding:              25px 0 2px 0;
}
.notepadItemCover {
  float:                left;
  margin-right:         10px;
}
.notepadItemArticleRemove {
  float:                right;
}
.notepadItemArticleRemove .clipLink {
  margin-left:          -9px;
}
.notepadItemArticleAuthor {
  margin-bottom:        5px;
  font-weight:          bold;
}
.notepadItemArticlePrice {
  margin:               5px 0 5px 0;
  font-weight:          bold;
}
.notepadItemActions {
  clear:                both;
}
.notepadNavigate {
  padding:              20px 0 10px 0;
}
.notepadNavigate span {
  float:                right;
}
.notepadActionButton {
  padding:              3px 10px 3px 10px;
  cursor:               pointer;
  color:                #ffffff;
  font-weight:          bold;
}
.notepadActionButton:hover {
 color:                 #ffffff;
 background-color:      black;
 text-decoration:       none;
}
.notepadLink {
  padding:              10px 0 0 15px;
}
.notepadPopulate {
  display:              none;
  padding:              10px 0 10px 0;
}
.notepadPopulateClose {
  text-align:           right;
  padding:              5px;
}
.notepadPopulateClose:hover .clipLink {
  margin-top:           -25px;
  clip:                 rect(27px, 9px, 36px, 0);
}
.notepadPopulateForm {
  padding:              10px;
}
.notepadPopulateForm span {
  float:                left;
  width:                120px;
}
.notepadPopulateForm input[type=text] {
  width:                200px;
}
.notepadPopulateForm textarea {
  height:               100px;
  width:                200px;
}
.notepadPopulateButton {
  padding:              10px;
  text-align:           right;
}

/** BASKET **/
.basket {
  clear:                both;
  padding:              15px 10px 10px 10px;
}
.basketTitle {
  padding:              15px 0px 5px 0px;
}
.basketTitle span {
  float:                right;
}
.basketSort {
  padding:              15px 0 5px 0;
}
.basketItem {
  clear:                both;
  padding:              25px 0 2px 0;
}
.basketItemCover {
  float:                left;
  margin-right:         10px;
}
.basketItemArticle {
  float:                right;
  width:                430px;
}
.basketItemArticleRemove {
  float:                right;
}
.basketItemArticleRemove .clipLink {
  margin-left:          -9px;
}
.basketItemArticleAuthor {
  margin-bottom:        5px;
  font-weight:          bold;
}
.basketItemArticlePrice {
  margin:               5px 0 5px 0;
  font-weight:          bold;
}
.basketItemArticleComment {
  margin:               5px 105px 5px 0;
  text-align:           left;
}
.basketItemTotal {
  clear:                both;
  font-weight:          bold;
  text-align:           right;
}
.basketItemTotal span {
  float:                right;
  width:                105px;
}
.basketItemActions {
  clear:                both;
}
.basketItemActions span, .basketItemArticleComment span {
  float:                right;
  margin-top:           -32px;
  padding:              7px 0 7px 5px;
  font-weight:          bold;
  text-align:           right;
}
.basketItemActions .edit {
  margin-right:         95px;
}
.basketItemActions span.price {
  margin-top:           -28px;
}
.basketItemActions input {
  width:                25px;
  margin-right:         10px;
  text-align:           right;
}
.basketSummary {
  padding:              10px 0 5px 0;
  font-weight:          bold;
}
.basketSummary span, .basketNavigate span {
  float:                right;
}
.basketAction {
  padding:              20px 0 10px 15px;
}
.basketAction a {
  float:                right;
}
.basketActionLink {
  padding-left:         20px;
}
.basketActionLink .clip16 {
  margin-left:          -20px;
}
.basketComment {
  height:               140px;
  padding:              10px;
  text-align:           right;
}
.basketCommentClose {
  height:               10px;
  margin:               -6px -6px 0 0;
}
.basketComment textarea {
  width:                475px;
  height:               100px;
  margin:               5px 0 5px 0;
}
.basketNavigate {
  padding:              20px 0 10px 0;
}
.basketActionButton {
  padding:              2px 5px 2px 5px;
  cursor:               pointer;
  color:                #ffffff;
  font-weight:          bold;
}
.basketActionButton + .large {
  position:             relative;
  bottom:               3px;
  margin-left:          10px;
  padding:              5px 10px 5px 10px;
}
.basketActionButton:hover {
 color:                 #ffffff;
 background-color:      black;
 text-decoration:       none;
}

/** CHECKOUT **/
.checkoutnav {
  clear:                both;
  height:               14px;
  margin:               0 10px 0 10px;
  padding:              10px 0 10px 0;
}
.checkoutnav li {
  float:                left;
  margin-left:          4px;
  padding-left:         4px;
  list-style-type:      none;
  font-weight:          bold;
}
.checkoutnav li:first-child {
  margin-left:          0;
  border-left:          0;
  padding-left:         0;
}
.checkoutnav li.active a {
  color:                #000000;
}
.checkoutnav li.disabled, .checkoutnav li.disabled a {
  color:                #999999;
}
.checkout {
  clear:                both;
  margin:               0 10px 0 10px;
}
.checkoutLink {
  padding:              0 10px 0 16px;
}
.checkoutChoice {
  margin-top:           15px;
}
.checkoutChoice > p {
  padding:              10px 0 10px 0;
  font-weight:          bold;
}
.checkoutChoice > p > input {
  vertical-align:       text-bottom;
}
.checkoutChoice td {
  padding:              0 0 5px 26px;
}
.checkoutChoiceFee {
  font-weight:          bold;
}
.checkoutChoiceFee span {
  float:                right;
}
.checkoutChoiceSummary {
  padding-bottom:       0 !important;
  border-bottom:        2px solid #000000;
  font-weight:          bold;
  font-size:            13px;
}
.checkoutChoiceSummary span {
  float:                right;
}
.checkoutChoiceTerms {
  font-weight:          bold;
}
.checkoutChoiceTerms span {
  float:                right;
  width:                160px;
  margin-top:           2px;
}
.checkoutInfo {
  padding:              10px 0 10px 0;
}
.checkoutInfoTitle {
  font-size:            13px;
  font-weight:          bold;
}
.checkoutInfoSelect {
  padding:              15px 0 15px 0;
}
.checkoutInfo .checkoutForm {
  padding:              10px;
}
.checkoutForm {
  padding-bottom:       10px;
}
.checkoutForm p {
  padding:              2px 0 2px 0;
}
.checkoutForm p span {
  float:                left;
  width:                180px;
  padding-right:        10px;
  font-weight:          bold;
}
.checkoutForm p img {
  margin-bottom:        -3px;
}
.checkoutForm input, .checkoutForm select {
  width:                240px;
}
.checkoutNav p {
  padding:              10px 0 10px 0;
}
.checkoutNav span {
  float:                right;
}
.checkoutNavFinish > input {
  margin-top:      2px;
}
.checkoutNavFinish span input {
  height:          30px;
  margin-top:      -10px;
}

/** CONFIRMATION **/
.confirmation {
  clear:                both;
  margin:               0 10px 0 10px;
}
.confirmation > div {
  padding:              10px;
}
.confirmation .basketItemArticle {
  width:                400px;
}
.confirmationActions {
  margin-left:          15px;
}
.confirmationActions .minus {
  visibility:           hidden;
}
.confirmationActionsLinks {
  float:                right;
}
.confirmationActions .clip16 {
  margin-left:          -20px;
}

/** AUTHORS **/
.authors {
  margin-top:           15px;
}
.authorsRulerTop, .authorsRulerBottom {
  padding:              10px 0 10px 0;
  font-weight:          bold;
  text-align:           right;
}
.authorsRulerTop {
  margin-top:           10px;
}
.authorsItem {
  clear:                both;
  padding:              10px 0 10px 0;
  height:               80px;
}
.authorsItemPicture {
  float:                left;
  max-width:            60px;
}
.authorsItemInfo {
  float:                right;
  width:                420px;
  overflow:             hidden;
}
.authorsItemInfoDescription {
  font-weight:          bold;
  font-size:            13px;
}
.authorsItemInfoLink a {
  display:              block;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}

/** CAROUSEL **/
.carousel {
  float:                left;
  width:                500px;
  margin:               30px 10px 0 10px;
  padding-bottom:       10px;
}
.carousel .list {
  margin:               30px 0 0 0;
}
.carouselTitle {
  margin-bottom:        20px;
}
.carouselConfig {
  display:              none;
}
.carouselStage {
  height:               180px;
  background-color:     #ffffff;
}
.carouselPresentation {
  float:                right;
  width:                280px;
  margin:               27px 0 0 0;
}
.carouselItemCover {
  position:             absolute;
  outline:              none;
  visibility:		hidden;
  height:               0;
}
.carouselItemTextText {
  margin-bottom:        10px;
  line-height:          150%;
  font-weight:          bold;
}
.carouselItemTextHtml {
  line-height:          150%;
}
.carouselItemTextLink a {
  display:              block;
  padding:              5px 2px 2px 15px;
  line-height:          100%;
}
.carouselNavigation {
  position:             relative;
  z-index:              40;
  height:               30px;
  width:                480px;
  margin:               10px auto 0 auto;
  padding:              10px 10px 0 10px;
  color:                #ffffff;
  text-align:           center;
}
.carouselNavigationNext {
  float:                right;
  background-image:     url('images/goNext.png');
}
.carouselNavigationPrev {
  float:                left;
  background-image:     url('images/goPrev.png');
}
.carouselNavigationNext, .carouselNavigationPrev {
  height:               22px;
  width:                22px;
  cursor:               pointer;
}
.carouselNavigationNext:hover, .carouselNavigationPrev:hover {
  background-position:  0 100%;
}
.carouselNavigationSlider {
  height:               32px;
  margin:               -5px 33px 0 33px;
  background-image:     url('images/carouselSliderBar.png');
}
.carouselNavigationSliderKnob {
  position:             absolute;
  top:                  12px;
  height:               16px;
  width:                6px;
  background-image:     url('images/carouselSliderKnob.png');
  cursor:               pointer;
}
.carouselNavigationSliderKnob:hover {
  background-position:  0 100%;
}

/** BREAD CRUMB PATH **/
#breadcrumb {
  padding-bottom:       9px;
}

/** SITEMAP **/
.sitemap {
  float:                left;
  margin:               10px 10px 0 10px;
  padding-bottom:       10px;
}
.sitemap .portal a {
  color:                #977537;
}
.sitemap .verlag a {
  color:                #523735;
}
.sitemap .buchshop a {
  color:                #4a769a;
}
.sitemap a:hover {
  color:                #000000;
}
.sitemapLevel1 {
  padding-left:         8px;
}
.sitemapLevel2 {
  padding-left:         16px;
}
.sitemapLevel3 {
  padding-left:         24px;
}
.sitemapLevel4 {
  padding-left:         32px;
}
.sitemapLevel5 {
  padding-left:         40px;
}

/** CONTENT ADDED OVER TINY MCE **/
.textContent .linkContentList li {
  list-style-image:     url(images/sjm_link_generic.png);
  list-style-position:  outside;
  list-style-type:      square;
}
.textContent li {
  margin-left:          18px;
}
.textContent ol li {
  margin-left:          28px;
}
.textContent p {
  margin:               16px 0 0 0;
}
.textContent > p:first-child {
  margin:               0;
}
.textContent p + ul.gap {
  margin-top:           16px;
}
.textContent p + ul, .textContent p + ol {
  margin:               0px;
}

/** QUICK TIP **/
#quicktip {
  width:                172px;
  display:              none;
  position:             absolute;
  z-index:              100;
  color:                #ffffff;
}
.quicktipContentTitle {
  padding:              8px 8px 4px 8px;
  background-image:     url(images/bubble.png);
  background-repeat:    no-repeat;
  font-weight:          bold;
}
.quicktipContentText {
  padding:              4px 8px 8px 8px;
  background-image:     url(images/bubble.png);
  background-position:  100% 100%;
  background-repeat:    no-repeat;
}

/** OVERLAY CONTENT **/
.overlay {
  display:              none;
}
.overlayMessageText {
  height:               200px;
  width:                390px;
  margin-top:           10px;
}
.overlayMessageInfo {
  padding:              5px 0 10px 0;
}
.overlayBox .tableBorders {
  margin-top:           15px;
}
.overlayBox .key {
  float:                left;
  width:                100px;
  padding-right:        10px;
}

/** FOOTER AREA **/
.footer {
  clear:                both;
  height:               20px;
  margin:               0 10px 0 10px;
  padding:              5px 0 20px 0;
}
.footer li {
  float:                left;
  margin-left:          4px;
  padding-left:         4px;
  list-style-type:      none;
}
.footer li:first-child {
  margin-left:          0;
  border-left:          0;
  padding-left:         0;
}