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, dl, dt, 
dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}

body {
background:white none repeat scroll 0 0;
color:black;
}

ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

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

caption, th, td {
font-weight:normal;
text-align:left;
}

blockquote:before, blockquote:after, q:before, q:after {
content:"";
}

blockquote, q {
quotes:"" "";
}

legend {
left:-5px;
position:relative;
}

strong, b {
font-weight:bold;
}

em, i {
font-style:italic;
}

.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

.clearfix {
display:inline-block;
}

* html .clearfix {
height:1%;
}

.clearfix {
display:block;
}

.clear {
clear:both;
height:0;
line-height:0;
visibility:hidden;
}

.clearleft {
clear:left;
}

.invisible {
display: none;
}

html {
text-align:center;
}

a, p, h1, h2, h3, span, li, div, label, input, textarea, select, object, span, th, td {
font-family:arial,sans-serif;
}

body{
background: url(../images/header_bg.png) top center repeat-x;
}

body#start {
background: url(../images/start_header_bg.png) top center repeat-x;
}

#wrapper {
text-align: left;
width: 860px;
margin: 0 auto;
}

* html #wrapper {
display: none;
}

#ieinfo {
display: none;
}

* html #ieinfo {
font-size: 12px;
display: block;
}

#header {
min-height: 152px;
position: relative;
}

#header #craftmedia a {
position: absolute;
text-indent: -9999px;
top: 20px;
left: 5px;
width: 125px;
height: 31px;
background: url(../images/logo_craftmedia.png);
background-repeat: no-repeat;
}

#header  #navigation,
#start #header  #navigation {
display: block;
height: 35px;
margin: 50px 0 10px 0;
}

#navigation li a {
display: block;
text-indent: -9999px;
height: 35px;
}

#navigation li {
float: left;
position: relative;
}
#navigation li a {
background-image: url(../images/navigation.png);
}

#navigation li a.about {
width: 66px;
margin-left: 5px;
background-position: 0 0;
}

#navigation li a.about:hover,
#navigation li a.about.hover,
#navigation li a.about.trail {
background-position: 0 -36px;
}

#navigation li a.work {
width: 104px;
margin-left: 50px;
background-position: -125px 0;
}

#navigation li a.work:hover,
#navigation li a.work.hover,
#navigation li a.work.trail {
background-position: -125px -36px;
}

#navigation li a.services {
width: 90px;
margin-left: 55px;
background-position: -290px 0;
}

#navigation li a.services:hover,
#navigation li a.services.hover,
#navigation li a.services.trail {
background-position: -290px -36px;
}

#navigation li a.contact {
width: 90px;
margin-left: 70px;
background-position: -445px 0;
}

#navigation li a.contact:hover,
#navigation li a.contact.hover,
#navigation li a.contact.trail {
background-position: -445px -36px;
}

#navigation li a.friends {
width: 90px;
margin-left: 65px;
background-position: -600px 0;
}

#navigation li a.friends:hover,
#navigation li a.friends.hover,
#navigation li a.friends.trail {
background-position: -600px -36px;
}

#navigation li a.media {
width: 72px;
margin-left: 50px;
background-position: -731px 0px;
}

#navigation li a.media:hover,
#navigation li a.media.hover,
#navigation li a.media.trail {
background-position: -731px -36px;
}

#navigation li:hover .subnavi {
display: block;
}

#navigation li:hover .subnavi .subnavi{
display: none;
}

#navigation li .subnavi li {
position: relative;
}

#navigation li:hover .subnavi li:hover .subnavi{
display: block;
}

#navigation .subnavi {
position: relative;
z-index: 999;
position: absolute;
top: 32px;
right: -69px;
width: 171px;
display: none;
padding-top: 19px;
background: url(../images/subnavi_endings_bg.png) 0 0 no-repeat;
}


#navigation .subnavi .subnavi {
z-index: 999;
position: absolute;
right: -90px;
top: 18px;
width: 171px;
display: none;
padding-top: 19px;
}

#navigation .subnavi ul {
padding-bottom: 10px;
background: url(../images/subnavi_endings_bg.png) left bottom no-repeat;
}

#navigation .subnavi li {
float: none;
padding: 0 3px 3px 5px;
background: url(../images/subnavi_bg.png) 0 0 repeat-y;
}

#header  #navigation .subnavi li a {
text-indent: 0;
height: auto;
font-size: 12px;
color: #555753;
text-decoration: none;
padding: 5px 0 5px 24px;
background: url(../images/subnavi_arrow.png) 10px 7px no-repeat;
}

#header  #navigation .subnavi li a:hover {
color: #ab3400;
background: url(../images/subnavi_arrow.png) 10px -13px no-repeat;
}

.description {
display: block;
text-indent: -9999px;
}

#stage {
position: relative;
width: 860px;
height: 317px;
background: url(../images/stage_bg.png) 0 0 no-repeat;
}

#stage .main_image img {
position: absolute;
top:0;
left: 0;
}

#stage #nav {
position: absolute;
left: 0;
bottom: 2px;
}

#stage ul li {
float: left;
}

#stage ul li span {
display: block;
}

#stage ul li span:hover,
#stage ul li.active span {
background: url(../images/stage_navi_bg.png) 0 0 repeat-x;
}

#stage ul li .first:hover,
#stage ul li.active .first {
background: url(../images/stage_navi_bg_left.png) 0 0 no-repeat !important;
}

#stage ul li .last:hover,
#stage ul li.active .last {
background: url(../images/stage_navi_bg_right.png) top right no-repeat !important;
}

#stage ul li .last:hover a,
#stage ul li.active .last a {
background: none;
}

#stage ul li a {
display: block;
color: #223c52;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 8px 43px 7px 25px;
}

#stage ul li .last a {
padding-right: 59px;
}

#stage ul li span:hover a,
#stage ul li.active span a {
color: #fff;
background: url(../images/stage_navi_arrow.png) right top no-repeat;
}

#stage ul li a small {
color: #979898;
font-size: 12px;
font-weight: normal;
}

#header .meta-navigation {
position: absolute;
top: 10px;
right: 0;
}

#header .meta-navigation li {
float: left;
}

#header .meta-navigation li a {
font-size: 11px;
color: #fff;
text-decoration: none;
margin-right: 8px;
}

#header .meta-navigation li a:hover {
color: #ffbb05;
}

#content {
float: left;
width: 525px;
padding: 25px 0;
}


#start #content {
padding: 25px 0;
min-height: 150px;
width: 860px;
}

#content .teaser {
position: relative;
width: 368px;
height: 160px;
padding-top: 55px;
padding: 55px 25px 5px 25px;
background: url(../images/teaser_bg.png) 0 0 no-repeat;
}

#content .teaser h2 {
position: absolute;
width: 415px;
height: 65px;
top: -10px;
left: 0;
text-indent: -9999px;
}

#content .teaser p {
font-family: Verdana,sans-serif;
font-size: 13px;
line-height: 18px;
padding: 5px 0 10px 0;
}

#content .teaser img {
float: left;
margin: 8px 10px 0 0;
}

#content .teaser .next {
position: absolute;
top: 9px;
right: 37px;
width: 28px;
height: 30px;
background: url(../images/teaser_next.png) 0 0 no-repeat;
text-indent: -9999px;
}

#content .teaser .next:hover {
background: url(../images/teaser_next_active.png) 0 0 no-repeat;
}

#content .teaser h2.news-talk {
background: url(../images/headline_news_talk.png) 5px 5px no-repeat;
}

#content .teaser h2.latest-work {
background: url(../images/headline_latest_work.png) 5px 0 no-repeat;
}

.left {
float: left;
}

.right {
float: right;
}

#content h2 {
color: #223c52;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}

#content h3 {
color: #365067;
font-size: 15px;
font-weight: bold;
margin-bottom: 12px;
}

#content h4 {
color: #3f5a71;
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
}

#content p {
font-size: 13px;
line-height: 20px;
}

#content a {
color: #223c52;
font-weight: bold;
}

#content form {
width: 450px;
margin-bottom: 10px;
}

#content legend {
text-indent: -999px;
}

#content label {
float: left;
width: 120px;
color: #223c52;
font-size: 16px;
font-weight: bold;
padding: 6px 0 0 0;
}

#content label .require {
color: #90bf39;
}

#content label.require-info {
font-weight: normal;
padding-left: 120px;
width: 140px;
}

#content input {
float: left;
font-size: 15px;
height: 20px;
width: 308px;
padding: 7px;
margin-bottom: 10px;
border: 0;
background: url(../images/form_sprite.png) 0 0 no-repeat;
}

#content input.error {
background: url(../images/form_sprite.png) 0 -38px no-repeat;
}

#content input#send,
#content input.submit {
cursor: pointer;
color: #223c52;
font-weight: bold;
width: 180px;
height: 32px;
background: url(../images/form_sprite.png) -140px -408px no-repeat;
}

#content textarea {
float: left;
border: 0;
width: 308px;
height: 146px;
padding: 7px;
margin-bottom: 10px;
background: url(../images/form_sprite.png) 0 -77px no-repeat;
}

#content .info {
font-size: 11px;
font-weight: bold;
display: block;
margin-bottom: 10px;
}

#content .back a {
display: block;
color: #477093;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 20px 0 0 25px;
background: url(../images/arrow_go_back.png) 0 23px no-repeat;
}

#content .back a:hover {
display: block;
color: #ffbb05;
}

#content .ce_text p {
font-size: 12px;
margin-bottom: 15px;
}

#content ul {
margin-bottom: 10px;
}

#content .ce_text li {
font-size: 12px;
margin-bottom: 5px;
}

#content .image {
position: relative;
display: block;
width: 525px;
height: 175px;
margin-bottom: 15px;
background: url(../images/image_bg.png) 0 0 no-repeat;
}

#content .image img {
display: block;
padding: 26px 0 0 14px;
}

#content .image a {
position: absolute;
top: 0;
left: 0;
width: 525px;
height: 175px;
text-indent: -9999px;
background: url(../images/image_zoom.png) bottom right no-repeat;
}

#content .image-teaser {
float: left;
position: relative;
display: block;
width: 175px;
height: 248px;
margin: 0 0 15px 0;
background: url(../images/image_teaser_bg.png) 0 0 no-repeat;
}

#content .image-teaser img {
display: block;
padding: 12px 0 0 16px;
}

#content .image-teaser a {
position: absolute;
top: 0;
left: 0;
width: 175px;
height: 210px;
text-indent: -9999px;
background: url(../images/image_teaser_arrow.png) bottom right no-repeat;
}

#content .image-teaser span {
color: #555753;
font-size: 11px;
font-weight: bold;
text-align: center;
display: block;
width: 175px;
padding-top: 24px;
}

#content .blog-teaser {
margin-bottom: 30px;
}

#content #comments a,
#content .blog-teaser h3 a {
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
padding: 16px 20px 10px 16px;
background: url(../images/blog_headline_bg.png) 0 0 no-repeat;
}

#content #comments a:hover,
#content .blog-teaser h3 a:hover {
background: url(../images/blog_headline_bg_hover.png) 0 0 no-repeat;
}

#content .blog-teaser p {
padding: 0 12px;
}

#content .blog-teaser p.info {
color: #9e9f9f;
font-weight: normal;
}

#content .blog-teaser p.info a {
font-weight: normal;
text-decoration: none;
}

#content .blog-teaser p.info a:hover {
text-decoration: underline;
}

#content .blog-teaser ul {
display: block;
width: 100%;
height: 35px;
margin: 10px 0;
}

#content .blog-teaser ul li.comments a{
float: left;
text-decoration: none;
font-weight: normal;
font-size: 12px;
width: 100px;
padding: 4px 0 9px 37px;
margin: 3px 0 0 12px;
background: url(../images/icon_comments.png) 0 0 no-repeat;
}

#content .blog-teaser ul li.more a{
float: right;
text-decoration: none;
font-weight: normal;
text-indent: -9999px;
width: 180px;
padding: 4px 0 9px 0;
background: url(../images/button_blog_next.png) 0 0 no-repeat;
}

#context {
float: right;
width: 315px;
padding: 25px 0;
}

#context .teaser {
position: relative;
width: 389px;
padding-top: 55px;
padding: 55px 25px 5px 25px;
}

#context .contact {
height: 146px;
background: url(../images/teaser_contact_bg.png) 0 0 no-repeat;
}

#context .contact dl {
display: block;
width: 220px;
padding-top: 10px;
}

#context .contact dt {
float: left;
width: 80px;
color: #223c52;
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}

#context .contact dd {
float: left;
color: #00aae6;
width: 135px;
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}


#context .teaser h2.contact {
background: url(../images/headline_contact.png) 14px -1px no-repeat;
}

#context .twitter,
#context .tag-cloud {
height: 230px;
background: url(../images/teaser_twitter_bg.png) 0 0 no-repeat;
}

#context .teaser h2 {
position: absolute;
width: 415px;
height: 65px;
top: -10px;
left: 0;
text-indent: -9999px;
}

#context .teaser p {
font-family: Verdana,sans-serif;
font-size: 13px;
line-height: 18px;
padding: 5px 0 10px 0;
}

#context .teaser img {
float: left;
margin: 8px 10px 0 0;
}

#context .teaser .next {
position: absolute;
top: 9px;
right: 37px;
width: 28px;
height: 30px;
background: url(../images/teaser_next.png) 0 0 no-repeat;
text-indent: -9999px;
}

#context .teaser h2.twitter {
background: url(../images/headline_twitter.png) 14px -1px no-repeat;
}

#context .twitter p {
font-family: arial,sans-serif;
color: #000;
font-size: 12px;
display: block;
position: relative;
width: 220px;
margin: 12px 0 25px 0;
padding: 0 6px;
background-color: #fff;
}

#context .twitter span.top {
position: absolute;
left: 0;
top: -13px;
width: 232px;
height: 15px;
background: url(../images/twitter_text.png) 0 0 no-repeat;
text-indent: -9999px;
}

#context .twitter span.bottom {
position: absolute;
left: 0;
bottom: -13px;
width: 232px;
height: 15px;
background: url(../images/twitter_text.png) 0 -20px no-repeat;
text-indent: -9999px;
}

#context .teaser h2.tag-cloud {
background: url(../images/headline_tag_cloud.png) 14px -1px no-repeat;
}

#context .tag-cloud ul {
width: 240px;
}

#context .tag-cloud ul li {
float: left;
height: 25px;
padding: 0 3px;
}

#context .tag-cloud ul li a {
text-decoration: none;
}

#context .tag-cloud ul li a:hover {
text-decoration: underline;
}

#context .tag-cloud ul li.size1 a {
color: #223c52;
font-size: 12px;
}

#context .tag-cloud ul li.size2 a {
color: #909090;
font-size: 12px;
font-weight: bold;
}

#context .tag-cloud ul li.size3 a {
color: #767676;
font-size: 13px;
font-weight: bold;
}

#context .tag-cloud ul li.size4 a {
color: #355774;
font-size: 13px;
font-weight: bold;
}

#context .tag-cloud ul li.size5 a {
color: #e5b023;
font-size: 14px;
font-weight: bold;
}

#context .tag-cloud ul li.size6 a {
color: #223c52;
font-size: 15px;
font-weight: bold;
}

h2.headline-archiv {
display: block;
height: 50px;
text-indent: -9999px;
background: url(../images/headline_archiv.png) 8px 0 no-repeat;
}

.mod_newsmenu {
padding-top: 25px;
background: url(../images/sitenavi_bg_top.png) left top no-repeat;
margin-bottom: 30px;
}

.mod_newsmenu ul {
padding-bottom: 13px;
background: url(../images/sitenavi_bg_bottom.png) left bottom no-repeat;
}

.mod_newsmenu ul li {
display: block;
padding: 0 15px;
background: url(../images/sitenavi_bg.png) 0 0 repeat-y;
}

.mod_newsmenu ul li a {
color: #555753;
font-size: 13px;
padding-left: 15px;
text-decoration: none;
background: url(../images/sitenavi_arrows.png) 0 -11px no-repeat;
}

.mod_newsmenu ul li a:hover {
color: #225585;
background: url(../images/sitenavi_arrows.png) 0 3px no-repeat;
}

.mod_newsmenu ul li ul {
background: none;
}

#context .mod_newsmenu ul li ul li {
background: none;
}

#wrapper-foot {
text-align: center;
height: 140px;
padding-top: 30px;
background: url(../images/footer_bg.png) bottom center repeat-x;
}

#footer {
position: relative;
text-align: left;
width: 860px;
margin: 0 auto;
margin-bottom: 5px;
}

#footer h4 {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}

#footer .more-about {
float: left;
width: 250px;
}

#footer .more-about li a {
display: block;
width: 100px;
color: #767676;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 5px 0 5px 35px;
margin-bottom: 8px;
}

#footer .more-about li a.rss-feed {
background: url(../images/icon_social.png) 0 0 no-repeat;
}

#footer .more-about li a.facebook {
background: url(../images/icon_social.png) 0 -33px no-repeat;
}

#footer .more-about li a.twitter {
background: url(../images/icon_social.png) 0 -67px no-repeat;
}

#footer .more-about li a.rss-feed:hover,
#footer .more-about li a.rss-feed.hover {
color: #e65e0f;
background: url(../images/icon_social.png) 0 -101px no-repeat;
}

#footer .more-about li a.facebook:hover,
#footer .more-about li a.facebook.hover {
color: #243a6d;
background: url(../images/icon_social.png) 0 -134px no-repeat;
}

#footer .more-about li a.twitter:hover,
#footer .more-about li a.twitter.hover {
color: #15aae0;
background: url(../images/icon_social.png) 0 -168px no-repeat;
}

#footer .quick-contact {
float: left;
width: 250px;
}

#footer .quick-contact h5 {
color: #767676;
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
}

#footer .quick-contact li {
color: #767676;
font-size: 14px;
}

#footer .quick-contact li {
margin-bottom: 4px;
}

#footer .quick-contact li span {
display: inline-block;
width: 36px;
}

#footer .searchform input {
float: left;
color: #cfcfcf;
font-size: 12px;
font-style: italic;
width: 175px;
padding: 4px;
border: 0;
background-color: #fff;
}

#footer .searchform input.submit {
width: 23px;
height: 23px;
text-indent: -9999px;
background: #fff url(../images/search_submit.png) 0 2px no-repeat;
cursor: pointer;
}

#footer .meta-navigation {
position: absolute;
right: 0;
top: 30px;
}

#footer .meta-navigation li  {
float: left;
}

#footer .meta-navigation li a {
font-size: 11px;
color: #000;
text-decoration: none;
margin-right: 8px;
}

.copyright {
font-size: 10px;
color: #515151;
padding: 3px;
}

.copyright span {
color: #ab3400;
}