@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Yamaha Musikschule Franchise Website
===============================================================================
    (c) 2010 projektvier | www.projektvier.de

    contents

    01.  Body
    02.  Header area
    02a. TopNav area
    02b. MicroNav
    03.  Content area (all pages)
    04.  Content area (specific pages)
    05.  Footer area

    last revision: 25.08.2011
    - added styles for content promobox
=============================================================================== */



/* ===============================================================================
01. Body
=============================================================================== */
body { background: #f0f0f2 url(img/bg_body.png) 0 0 repeat-x; }
.clear {
  clear: both;
  font-size: 0.1em;
  line-height: 0.1em;
  height: 0;
  width: 0;
}
div#jumptocontent {
  position: absolute;
  left: -9999px;
  top: -99999px;
}
div#page {
  background: #ffffff;
  width: 932px;
  margin: 0 auto;
}


/* ===============================================================================
02. Header area
=============================================================================== */

/* Page Header - Logos, Musikschulname */
div#page div#header {
  width: 902px;
  height: 65px;
  padding: 0 15px;
  position: relative;
}
div#page div#header div#logos {
  height: 65px;
  float: left;
  text-align: center;
}
div#page div#header div#headermusikschulname {
  float: right;
  margin-top: 35px;
}
div#page div#header div#logos img#yamahalogo {
  /*margin: 18px 0 0 0; */
  width: 166px;
  height: 65px;
}


/* ===============================================================================
02a. TopNav area
=============================================================================== */
div#page ul#topnavigation {
  width: 902px;
  height: 45px;
  margin: 0 15px;
  border-bottom: 1px solid #ebebeb;
}
div#page ul#topnavigation li {
  float: left;
  padding: 0 15px 0 10px;
}
div#page ul#topnavigation li a {
  color: #7f7f7f;
  text-decoration: none;
}
div#page ul#topnavigation li.active a {
  color: #2f9dd1;
}

div#page ul#topnavigation li a:hover {
  color: #555555;
  text-decoration: underline;
}


/* ===============================================================================
02b. MicroNav
=============================================================================== */
div#page ul#micronavigation {
  width: 902px;
  height: 35px;
  margin: 0 15px;
  border-bottom: 1px solid #ebebeb;
}
div#page ul#micronavigation li {
  float: left;
  color: #626262;
  padding: 10px 5px 10px 0;
}
div#page ul#micronavigation li a {
  color: #626262;
}
div#page ul#micronavigation li a:hover {
  color: #4c4c4c;
  text-decoration: none;
}


/* ===============================================================================
03. Content area (all pages => Default Styles)
=============================================================================== */
div#page div#content {
  float: left;
  display: inline; /* for IE6 */
  width: 700px;
  margin: 20px 0;
}
/* Left Navigation ------------------------------------------------------------ */
div#page div#leftnavigation {
  float: left;
  display: inline; /* for IE6 */
  width: 182px;
  margin: 20px 20px 20px 15px;
}
div#page div#leftnavigation ul {
  border: 1px solid #e5e5e5;
}
div#page div#leftnavigation ul li {
  border-top: 1px solid #e5e5e5;
}
div#page div#leftnavigation ul li.top {
  background: #e5e5e5;
  border-bottom: 1px solid #bdbdbd;
}
div#page div#leftnavigation ul li.active {
  background: #2f9dd1;
}
div#page div#leftnavigation ul li a {
  display: block;
  min-height: 18px;
  color: #2f9dd1;
  text-decoration: none;
  background: url(img/arrow_right.gif) 4px 10px no-repeat;
  padding: 5px 0 5px 17px;
}
div#page div#leftnavigation ul li.top a {
  font-weight: bold;
}
div#page div#leftnavigation ul li.active a {
  color: #ffffff;
}
div#page div#leftnavigation ul li a:hover {
  text-decoration: underline;
}

/* Header images ------------------------------------------------------------------ */
img.header {
  margin-bottom:30px;
  border:1px solid #E5E5E5;
}


/* Headlines ------------------------------------------------------------------ */
h1 { margin: 20px 0 5px 15px; }
h3, h2 { margin: 0 0 1em 0; }

/* Default Styles (Links, paragraphs etc) ------------------------------------- */
div#content p {
  margin: 0 0 1em 0;
}
/* Standard Link */
div#content a {
  color: #2f9dd1;
  font-weight: bold;
  text-decoration: none;
}
div#content a:hover {
  text-decoration: underline;
}

/* PDF link big --------------------------------------------------------------- */
div#content a.pdflinkbig {
  background: url(img/icon_pdf.png) 0 50% no-repeat;
  padding-left: 20px;
}

/* Default unordered list ----------------------------------------------------- */
div#content ul.normal {
  margin: 0 0 1em 0;
}
div#content ul.normal li {
  background: url(img/circle.gif) no-repeat scroll 0 0.35em transparent;
  margin: 0 0 0.5em 0;
  padding-left: 10px;
}

/* Link Backtotop ------------------------------------------------------------- */
div.backtotop {
  text-align: right;
  padding: 0 15px 15px 0;
}
div.backtotop a {
  color: #2f9dd1;
  background: url(img/arrow_up.png) 100% 50% no-repeat;
  padding-right: 12px;
}

/* Default Listview ----------------------------------------------------------- */
div#content ul.listview {
  margin: 25px 0 0 0;
}
div#content ul.listview li {
  color: #444444;
  margin: 0 0 15px 0;
}
div#content ul.listview img {
  float: left;
  width: 120px;
  margin-right: 15px;
}
div#content ul.listview p {
  float: right;
  width: 565px;
}

/* ===============================================================================
04. Content area (specific pages)
=============================================================================== */
/* Homepage */
div.promobox_leftnav,
div.promobox_content {
  width: 160px;
  margin: 20px 0 15px 0;
  padding: 10px;
  border: 1px solid #e5e5e5;
  color: #444444;
}
div.promobox_content {
  border:1px solid #2f9dd1;
  float:right;
  margin: 0 0px 0 15px;
  background-color: #ffffff;
  color: #2f9dd1;
}

div.promobox_leftnav a,
div.promobox_content a {
  display: block;
  background: url(img/arrow_right.gif) 0 5px no-repeat;
  color: #2f9dd1;
  padding-left: 13px;
  font-weight: bold;
  margin-bottom: 1em;
}
div.promobox_content a {
  color: #2f9dd1;
}

/* Courses Overview */
ul.coursecategories li {
  width: 315px;
  float: left;
  display: inline;
  margin: 0 15px 2em 0;
}

/* Courses Tables */
table.coursetable {
  border:1px solid #e5e5e5;
  border-collapse: collapse;
}
table.coursetable tr td {
  border:3px solid #e5e5e5;
  padding:.5em;
}

/* News Listview */
div#content ul.listview a.newslist {
  background: url(img/arrow_right_big.png) 100% 50% no-repeat;
  padding-right: 20px;
}

/* News Detail */
div#content img.newsdetail {
  float: left;
  padding: 0 15px 15px 0;
}

/* Job offers */
ul.joboffers li {
  padding: 0 0 13px 0;
  margin: 0 0 25px 0;
  border-bottom: 1px solid #999999;
}




/* ===============================================================================
05. Footer area
=============================================================================== */
div#footer {
  height: 31px;
  width: 902px;
  margin: 0 auto;
  padding: 0 15px;
  background: #bdbdbd;
  color: #ffffff;
}
div#footer address { float: left; font-style: normal; }
div#footer ul { float: right; }
div#footer ul li { float: left; }
div#footer ul li a { color: #ffffff; }


/* Yamaha Musikschule
===============================================================================
    (c) 2010 projektvier | www.projektvier.de

    contents

    01.  Body
    02.  Header area
    02a. TopNav area
    02b. MicroNav
    03.  Content area (all pages)
    04.  Content area (specific pages)
    05.  Footer area

    last revision: 30.06.2010
=============================================================================== */


/* 01. Body
=============================================================================== */
body { font-family: helvetica, arial, verdana, sans-serif; }

/* 02. Header area
=============================================================================== */
div#page div#header div#headermusikschulname { font-size: 20px; font-weight: bold; }

/* 02a. TopNav area
=============================================================================== */
div#page ul#topnavigation li a {
  font-size: 18px;
  line-height: 45px;
  font-weight: bold;
}

/* 02b. MicroNav
=============================================================================== */
div#page ul#micronavigation li {
  font-size: 12px;
  line-height: 16px;
}

/* 03. Content area (all pages)
=============================================================================== */
div#page div#leftnavigation ul li a {
  font-size: 14px;
  line-height: 18px;
}
h1 {
  font-size: 24px;
  line-height: 30px;
}
h2 {
  font-size: 20px;
  line-height: 26px;
}
h3 {
  font-size: 16px;
  line-height: 22px;
}
div#content p {
  font-size: 13px;
  line-height: 17px;
}
div#content a.pdflinkbig {
  font-size: 15px;
  line-height: 19px;
}
div#content ul.normal {
  font-size: 13px;
  line-height: 17px;
}
div.backtotop a {
  font-size: 12px;
  line-height: 16px;
}


/* 04. Content area (specific pages)
=============================================================================== */
div#leftnavigation div.promobox_leftnav p {
  font-size: 13px;
  line-height: 17px;
}

div#content p a.courselink {
  font-size: 15px;
  line-height: 19px;
}

/* 05. Footer area
=============================================================================== */
div#footer { line-height: 31px; font-size: 12px; }


/* OWN MODIFICATIONS */

#topmenu {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
    padding: 10px 30px 0 0;
    position: absolute;
    top: 0;
    right: 0;
}
#topmenu a {
    color: #000;
    margin-left: 40px;
    text-decoration: none;
}
ul.coursecategories li:nth-child(2n+3) { clear: left; }


hr { border-color: #2f9dd1; margin: 20px 0; }
h2 { text-align: center; }

.nav {
    font-weight: bold;
    text-align: center;
}
.nav a {
    margin-left: 10px;
    display: inline-block;
}

ul.galeria {
    list-style: none;
}
#content ul.galeria li {
    width: 50%;
    float: left;
    margin-bottom: 20px;
    text-align: center;
}
ul.galeria img {
    padding: 3px;
    border: 1px solid #2f9dd1;
    margin-right: 10px;
    display: block;
    margin: 0 auto 10px;
}
#galleria {
    text-align: center;
    margin-left: -106px;
    text-align: left;
}
#galleria img {
    padding: 3px;
    border: 1px solid #2f9dd1;
    margin: 5px;
}

/* kontakt */
form label {
    width: 200px;
    display: inline-block;
    margin-bottom: 5px;
}
form textarea,
form input[type="submit"],
form input[type="text"] {
    background: #fbfbff;
    border: 1px solid #2f9dd1;
    box-shadow: 1px 1px 3px -2px #000;
    margin: 0 0 10px;
    width: 280px;
}
form input[type="text"] {
    height: 21px;
    padding: 0 5px;
    line-height: 20px;
}
form textarea {
    padding: 5px 5px;
    font-family: inherit;
}
form input[type="submit"] {
    width: auto;
    color: #2f9dd1;
    padding: 3px 10px;
    margin-left: 110px;
}
form input[type="submit"]:hover {
    background: #eeeeff;
}
#err {
    color: #d00;
    font-size: 15px;
}
.kontakt .col {
    float: left;
    width: 300px;
    margin-right: 30px;
}
.kontakt .text {
    overflow: auto;
}