html, body, div, span, applet, object, iframe, h1, h2, h3, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }

ol, ul { list-style: none; }

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

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

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

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

html, body { height: 100%; }

img { max-width: 100%; }

#wrap { min-height: 100%; width: 100%; text-align: center; }
#wrap #page { width: 960px; max-width: 96%; text-align: left; overflow: auto; padding-bottom: 100px; padding-top: 30px; margin: 0 auto; position: relative; }
#wrap #page #header { height: 100px; }
#wrap #page #content { width: 700px; max-width: 100%; float: left; position: relative; padding-bottom: 30px; position: relative; top: 15px; }
@media screen and (max-width: 768px) { #wrap #page #content { width: 98%; } }
#wrap #page #sidebar { width: 200px; max-width: 98%; float: right; position: relative; top: 15px; margin-bottom: 2em; }
@media screen and (max-width: 768px) { #wrap #page #sidebar { width: 98%; margin: 0; float: left; } }

#footer { clear: both; height: 100px; margin: -100px auto 0 auto; position: relative; }

.cBoxPhoto { border-radius: 6px; }

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

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End hide from IE-mac */
/* roboto-regular - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url("../fonts/roboto-v18-latin-regular.eot");
  /* IE9 Compat Modes */
src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v18-latin-regular.woff") format("woff"), url("../fonts/roboto-v18-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v18-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-italic - latin */
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url("../fonts/roboto-v18-latin-italic.eot");
  /* IE9 Compat Modes */
src: local("Roboto Italic"), local("Roboto-Italic"), url("../fonts/roboto-v18-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-italic.woff2") format("woff2"), url("../fonts/roboto-v18-latin-italic.woff") format("woff"), url("../fonts/roboto-v18-latin-italic.ttf") format("truetype"), url("../fonts/roboto-v18-latin-italic.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-700 - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url("../fonts/roboto-v18-latin-700.eot");
  /* IE9 Compat Modes */
src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v18-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-700.woff2") format("woff2"), url("../fonts/roboto-v18-latin-700.woff") format("woff"), url("../fonts/roboto-v18-latin-700.ttf") format("truetype"), url("../fonts/roboto-v18-latin-700.svg#Roboto") format("svg");
  /* Legacy iOS */ }
html, body, textarea, input { font-family: "Roboto", sans-serif; }

html, body { font-size: 16px; line-height: 1.5em; }

h1, h2, h3 { font-size: 30px; font-weight: bold; line-height: 36px; padding-bottom: 18px; }
h1 span, h2 span, h3 span { font-size: 75%; display: inline-block; width: 100%; text-transform: uppercase; font-weight: normal; }

h2 { font-size: 24px; margin-top: 1.5em; }

h3 { font-size: 18px; }

small { font-size: 0.7em; }

strong { font-weight: bold; }

em { font-style: italic; }

#pagination, .searchPaging, .searchBreadcrumbs { font-size: 0.9em; }

body { color: #f8f8f8; background: #000000; }

h1, h2, h3, h2, h3, .ajaxSearch_highlight, #pagination p, .searchPaging p { color: #6699cc; }

a { color: #ffcc00; text-decoration: none; }
a:hover { text-decoration: underline; }
a.external:before, a[rel="external"]:before { font: normal normal normal 14px/1 FontAwesome; font-size: 80%; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); padding-right: 3px; content: "\f08e "; }
a.invert, #breadcrumbs a { padding: 0 3px; border-radius: 3px; }
a.invert:hover, #breadcrumbs a:hover { text-decoration: none; background-color: #ffcc00; color: #000000; }

#breadcrumbs, dd.searchBreadcrumbs { color: #565456; }

#projectdetails dt, #ContactForm dt, .jot-form dt { color: #6699cc; }

.clearing { clear: both; padding-bottom: 15px; }

.alignright { border-radius: 3px; float: right; margin: 0 0 1em 2em; }

.alignleft { border-radius: 3px; float: left; margin: 0 2em 1em 0; }

.aligncenter { border-radius: 3px; display: block; margin: 1em auto 2em; }

@media screen and (max-width: 376px) { .alignright, .alignleft { float: none; display: block; margin: 1em auto 2em; } }

.hidden { display: none !important; }

.button { background-color: #ffcc00 !important; background: -moz-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -webkit-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -o-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -ms-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); border: none; border-radius: 5px; color: #000000 !important; padding: 3px 6px; width: auto !important; padding: 6px 18px; }
.button:hover { background-color: #fef2b2 !important; background: -moz-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -webkit-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -o-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -ms-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); }

#header { background: #222222; }
#header .inner { height: 100px; width: 960px; max-width: 100%; margin: 0 auto; }
@media screen and (max-width: 768px) { #header .inner { width: 100%; } }
#header .logo-left, #header .logo-right { border: none; position: relative; }
#header .logo-left { float: left; top: 35px; }
@media screen and (max-width: 500px) { #header .logo-left { display: none; } }
#header .logo-right { float: right; top: 21px; }
@media screen and (max-width: 500px) { #header .logo-right { float: none; margin: 0 auto; } }

#main-navigation { background: #000000; border-top: 1px solid #ffcc00; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.5); }
#main-navigation .inner { height: 34px; text-align: center; width: 960px; max-width: 100%; margin: 0 auto; }
@media screen and (max-width: 768px) { #main-navigation .inner { width: 100%; margin: 0; } }
@media screen and (max-width: 376px) { #main-navigation .inner { width: 100%; margin: 0; } }
#main-navigation li { display: inline; }
#main-navigation li a { display: inline; float: left; font-size: 14px; font-weight: bold; letter-spacing: 1px; height: 32px; line-height: 32px; margin: 0 5px 0 5px; text-decoration: none; text-transform: uppercase; border-radius: 0 0 5px 5px; padding: 1px 16px; }
@media screen and (max-width: 768px) { #main-navigation li a { margin-right: 5px; } }
@media screen and (max-width: 376px) { #main-navigation li a { width: 100%; margin: 0; padding: 1px 0; border-radius: 0; border-bottom: 1px solid #574500; } }
#main-navigation li a:hover { color: #000000; border: 1px solid #ffcc00; border-top-color: #c8950d; padding: 0 15px; box-shadow: 0px 0px 15px #986601; background: #ffcc00; background: -moz-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -webkit-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -o-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: -ms-linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); background: linear-gradient(top, #c8950d 0%, #fecb1b 21%, #fed438 55%, #fee976 93%, #fef2b2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8950d', endColorstr='#fef2b2',GradientType=0 ); }
@media screen and (max-width: 376px) { #main-navigation li a:hover { padding: 1px 0; border: 0; border-radius: 0; } }
#main-navigation .active a { color: #ffffff; border: 1px solid #5472af; border-top-color: #374b73; padding: 0 15px; background: #5472af; background: -moz-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -webkit-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -o-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -ms-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374b73', endColorstr='#5472af',GradientType=0 ); }
@media screen and (max-width: 768px) { #main-navigation .active a { margin-right: 5px; } }
@media screen and (max-width: 376px) { #main-navigation .active a { width: 100%; margin: 0; padding: 1px 0; border: 0; border-radius: 0; } }

#sitesearch { float: right; line-height: 32px; position: relative; }
@media screen and (max-width: 376px) { #sitesearch { display: none; } }
#sitesearch input { background-color: #222; border: solid #333 1px; border-radius: 3px; color: #cccccc; padding: 2px; }
#sitesearch button { border: 0; background: transparent; color: #ccc; padding-left: 3px; padding-right: 0; cursor: pointer; }

#teaser, #slidingTeaser { background-attachment: scroll; background-position: top center; margin: 0; overflow: hidden; position: relative; margin-bottom: 50px; }
#teaser img, #slidingTeaser img { border-radius: 3px; }
#teaser a, #slidingTeaser a { display: block; height: 100%; width: 100%; text-decoration: none; }
#teaser em, #slidingTeaser em { background: #1a1a1a; background: rgba(0, 0, 0, 0.8); border-radius: 0 0 3px 3px; font-style: normal; line-height: 1.2em; padding: 5px 0; text-align: center; width: 100%; position: absolute; left: 0; top: 200px; font-size: 14px; }

#slidingTeaser ul { list-style: none; }
#slidingTeaser li { margin: 0; padding: 0; height: 200px; width: 960px; max-width: 100%; overflow: hidden; float: left; border-radius: 5px; background-position: center center; }
@media screen and (max-width: 768px) { #slidingTeaser li { width: 768px; } }

#sliderControls { position: relative; display: none; }
#sliderControls #slidingTeaserPrevBtn, #sliderControls #slidingTeaserNextBtn { margin: 0; padding: 0; overflow: hidden; text-indent: -8000px; display: block; width: 40px; height: 45px; position: absolute; left: 0; top: -170px; z-index: 1000; }
#sliderControls #slidingTeaserPrevBtn a, #sliderControls #slidingTeaserNextBtn a { display: block; width: 40px; height: 45px; position: relative; background: url(../images/slider-arrows.png) no-repeat -42px -1px; }
#sliderControls #slidingTeaserPrevBtn a:hover, #sliderControls #slidingTeaserNextBtn a:hover { background-position: -42px -47px; }
#sliderControls #slidingTeaserNextBtn { left: 920px; }
#sliderControls #slidingTeaserNextBtn a { background-position: -1px -1px; }
#sliderControls #slidingTeaserNextBtn a:hover { background-position: -1px -47px; }

#fadingTeaser { margin-bottom: 50px; }
#fadingTeaser img { border-radius: 3px; }

ul.bjqs { position: relative; list-style: none; padding: 0; margin: 0; overflow: hidden; display: none; }

li.bjqs-slide { position: absolute; display: none; }

ul.bjqs-controls { list-style: none; margin: 0; padding: 0; z-index: 9999; display: none; }

ul.bjqs-controls.v-centered li.bjqs-next a { right: 0; margin-right: 1%; }
ul.bjqs-controls.v-centered li.bjqs-prev a { left: 0; margin-left: 1%; }
ul.bjqs-controls.v-centered a { position: absolute; text-shadow: 1px 1px 2px #000; color: #808080; }
ul.bjqs-controls.v-centered a:hover { color: #ffcc00; }

ol.bjqs-markers { list-style: none; padding: 0; margin: 0; width: 100%; }
ol.bjqs-markers li { display: inline; }
ol.bjqs-markers li a { display: inline-block; }

ol.bjqs-markers.h-centered { text-align: center; }

p.bjqs-caption { text-align: center; display: block; width: 100%; margin: 0; padding: 1% 0; position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.75); border-radius: 0 0 3px 3px; display: none; }

#breadcrumbs { font-size: 0.9em; line-height: 1.2em; height: 1.2em; padding: 10px 0 0 0; float: left; position: relative; }
.sticky #breadcrumbs { margin-top: 34px; }

#content blockquote { margin: 1.5em 10px; border-left: 5px solid #6699cc; background: #202020; padding: 0.5em 10px; text-align: left; border-radius: 4px; }
#content blockquote p { text-align: left; }
#content blockquote p:last-child { padding-bottom: 0; }
#content p { padding-bottom: 1.2em; }
#content pre { background-color: #21201c; border: 1px solid #565456; padding: 2px 5px; margin: 1em 0; border-radius: 5px; }
#content ul.with-marker { margin-left: 0; margin-bottom: 1em; padding-left: 2.5em; list-style: disc; }
#content .tweet-button { float: right; }
#content .like-button { float: right; }
#content .googleplusbutton { float: right; }

#portfolio { margin-right: -20px; }
#portfolio li { background: #21201c url(../images/box-background.jpg) no-repeat scroll center center; border-radius: 3px; overflow: hidden; position: relative; text-align: center; width: 220px; height: 220px; margin: 0 20px 20px 0; float: left; }
#portfolio li a { border-radius: 3px; background-position: center 0; display: block; height: 100%; width: 100%; }
#portfolio li a:hover { text-decoration: none; }
#portfolio li em { background: #1a1a1a; background: rgba(0, 0, 0, 0.8); border-radius: 0 0 3px 3px; font-style: normal; line-height: 1.2em; padding: 5px 0; text-align: center; width: 100%; position: absolute; left: 0; top: 220px; color: #ffcc00; font-size: 0.8em; }
@media screen and (max-width: 376px) { #portfolio li { width: 178px; height: 178px; } }

#projectdetails dt { clear: left; float: left; text-align: right; padding-bottom: 0.5em; width: 130px; }
#projectdetails dd { float: left; left: 20px; position: relative; padding-bottom: 0.5em; width: 550px; }

.projectthumb { background: #21201c url(../images/box-background.jpg) no-repeat scroll center center; border-radius: 3px; overflow: hidden; position: relative; text-align: center; width: 200px; height: 200px; float: right; }
.projectthumb a { border-radius: 3px; background-position: center 0; display: block; height: 100%; width: 100%; }
.projectthumb a:hover { text-decoration: none; }
.projectthumb em { background: #1a1a1a; background: rgba(0, 0, 0, 0.8); border-radius: 0 0 3px 3px; font-style: normal; line-height: 1.2em; padding: 5px 0; text-align: center; width: 100%; position: absolute; left: 0; top: 200px; color: #ffcc00; font-size: 0.8em; }

#pagination, .searchPaging { clear: both; text-align: center; position: relative; top: 1.5em; }
#pagination p span, .searchPaging p span { padding: 0 10px; }

#ditto_pages a, .searchPaging a, #ditto_pages span, .searchPaging span { padding: 3px 5px; margin: 0 3px; border: 1px solid #554400; border-radius: 4px; }
#ditto_pages a:hover, .searchPaging a:hover { text-decoration: none; color: #000000; background: #ffcc00; background: -moz-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -webkit-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -o-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: -ms-linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); background: linear-gradient(top, #fef2b2 0%, #fee976 7%, #fed438 45%, #fecb1b 79%, #c8950d 100%); }
#ditto_pages .ditto_off, .searchPaging .ditto_off { color: #555555; border-color: #555555; }
#ditto_pages .ditto_currentpage, .searchPaging .ditto_currentpage, #ditto_pages .searchPaging .searchCurrentPage, .searchPaging #ditto_pages .searchCurrentPage, .searchPaging .searchCurrentPage { font-weight: bold; color: #ffffff; border: 1px solid #5472af; border-top-color: #374b73; background: #5472af; background: -moz-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -webkit-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -o-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: -ms-linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); background: linear-gradient(top, #374b73 0%, #486195 21%, #4c68a0 55%, #506da8 93%, #5472af 100%); }

dl.searchResult { padding: 1.5em 0 1em 0; }

.sisea-result { clear: right; margin-bottom: 70px; }
.sisea-result h3 { padding: 0; margin-bottom: 18px; font-size: 20px; line-height: 1.2em; }
.sisea-result h3 span { display: block; width: auto; }
.sisea-result img { border-radius: 3px; float: right; margin: 0 0 1em 2em; }
@media screen and (max-width: 376px) { .sisea-result img { width: 100%; float: none; margin: 0; } }
@media screen and (min-width: 376px) and (max-width: 768px) { .sisea-result img { width: 50%; max-width: 290px; float: right; } }

#ContactForm dl dt { padding-bottom: 1em; width: 130px; clear: left; float: left; text-align: right; padding: 6px 0; }
#ContactForm dl dd { padding-bottom: 1em; text-align: center; width: 550px; float: left; left: 20px; position: relative; padding-bottom: 0.5em; }
#ContactForm dl dd input, #ContactForm dl dd textarea { font-size: 0.9em; background-color: #21201c; border: solid #565456 1px; border-radius: 5px; color: #cccccc; padding: 6px; width: 100%; }
#ContactForm .freifeld { display: none; visibility: hidden; }

#imprint span { color: #808080; }

.bullet { width: 4em; line-height: 4em; text-align: center; border-radius: 8px; float: left; margin: 0 1em 0.5em 0; color: #ffffff; font-size: 14px; font-weight: bold; text-shadow: 0.1em 0.1em 0.2em #0d1a26; background: #6699cc; background: -moz-linear-gradient(top, #6699cc 0%, #336699 100%); background: -webkit-linear-gradient(top, #6699cc 0%, #336699 100%); background: -o-linear-gradient(top, #6699cc 0%, #336699 100%); background: -ms-linear-gradient(top, #6699cc 0%, #336699 100%); background: linear-gradient(top, #6699cc 0%, #336699 100%); }

.gallery { margin-right: -20px; }
.gallery li { margin: 0 20px 20px 0; float: left; }
.gallery li img { border-radius: 5px; }

.about-photo { margin-bottom: 20px; }
@media screen and (max-width: 768px) { .about-photo { font-size: 16px; } }
.about-photo img { border-radius: 3px; margin-bottom: 10px; }
@media screen and (max-width: 768px) { .about-photo img { float: left; margin-right: 20px; } }
.about-photo span { display: inline-block; width: 100%; line-height: 1.2em; margin-bottom: 6px; }
@media screen and (max-width: 768px) { .about-photo span { width: 50%; } }
@media screen and (max-width: 376px) { .about-photo span { width: 100%; } }
.about-photo span.fn-name { font-weight: bold; }

#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }

#cboxOverlay { position: fixed; width: 100%; height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft { clear: left; }

#cboxContent { position: relative; overflow: hidden; }

#cboxLoadedContent { overflow: auto; }

#cboxLoadedContent iframe { display: block; width: 100%; height: 100%; border: 0; }

#cboxTitle { margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }

#cboxOverlay { background: url(../images/colorbox/overlay.png) 0 0 repeat; }

#colorbox #cboxTopLeft { width: 21px; height: 21px; background: url(../images/colorbox/controls.png) -100px 0 no-repeat; }
#colorbox #cboxTopRight { width: 21px; height: 21px; background: url(../images/colorbox/controls.png) -129px 0 no-repeat; }
#colorbox #cboxBottomLeft { width: 21px; height: 21px; background: url(../images/colorbox/controls.png) -100px -29px no-repeat; }
#colorbox #cboxBottomRight { width: 21px; height: 21px; background: url(../images/colorbox/controls.png) -129px -29px no-repeat; }
#colorbox #cboxMiddleLeft { width: 21px; background: url(../images/colorbox/controls.png) left top repeat-y; }
#colorbox #cboxMiddleRight { width: 21px; background: url(../images/colorbox/controls.png) right top repeat-y; }
#colorbox #cboxTopCenter { height: 21px; background: url(../images/colorbox/border.png) 0 0 repeat-x; }
#colorbox #cboxBottomCenter { height: 21px; background: url(../images/colorbox/border.png) 0 -29px repeat-x; }
#colorbox #cboxContent { background: #fff; }
#colorbox #cboxContent #cboxLoadedContent { margin-bottom: 28px; }
#colorbox #cboxContent #cboxTitle { position: absolute; bottom: 3px; left: 0; text-align: center; width: 100%; color: #202020; }
#colorbox #cboxContent #cboxCurrent { position: absolute; bottom: 3px; left: 58px; color: #949494; }
#colorbox #cboxContent #cboxSlideshow { position: absolute; bottom: 3px; right: 30px; color: #0092ef; }
#colorbox #cboxContent #cboxPrevious { position: absolute; bottom: 0; left: 0px; background: url(../images/colorbox/controls.png) -75px 0px no-repeat; width: 25px; height: 25px; text-indent: -9999px; }
#colorbox #cboxContent #cboxPrevious.hover { background-position: -75px -25px; }
#colorbox #cboxContent #cboxNext { position: absolute; bottom: 0; left: 27px; background: url(../images/colorbox/controls.png) -50px 0px no-repeat; width: 25px; height: 25px; text-indent: -9999px; }
#colorbox #cboxContent #cboxNext.hover { background-position: -50px -25px; }
#colorbox #cboxContent #cboxLoadingOverlay { background: url(../images/colorbox/loading_background.png) center center no-repeat; }
#colorbox #cboxContent #cboxLoadingGraphic { background: url(../images/colorbox/loading.gif) center center no-repeat; }
#colorbox #cboxContent #cboxClose { position: absolute; bottom: 0; right: 0; background: url(../images/colorbox/controls.png) -25px 0px no-repeat; width: 25px; height: 25px; text-indent: -9999px; }
#colorbox #cboxContent #cboxClose.hover { background-position: -25px -25px; }

.blog-list-entry { margin-bottom: 70px; position: relative; }
.blog-list-entry .read-more { position: relative; margin-left: 330px; }
@media screen and (max-width: 376px) { .blog-list-entry .read-more { margin: 0; text-align: center; } }
@media screen and (min-width: 376px) and (max-width: 768px) { .blog-list-entry .read-more { margin-left: 45%; } }
.blog-list-entry .read-more a { background: #333; padding: 5px 10px; color: #ffcc00; border-radius: 2px; }
.blog-list-entry .read-more a:hover { background: #ffcc00; color: #000; text-decoration: none; }

.blog-preview { width: 290px; position: relative; float: left; }
@media screen and (max-width: 376px) { .blog-preview { width: 100%; float: none; } }
@media screen and (min-width: 376px) and (max-width: 768px) { .blog-preview { width: 43%; max-width: 290px; float: left; } }
.blog-preview img { border-radius: 5px; }
@media screen and (max-width: 376px) { .blog-preview img { width: 100%; max-width: 376px; } }

.blog-entry { position: relative; padding: 0; width: 370px; margin-left: 330px; }
@media screen and (max-width: 376px) { .blog-entry { width: 98%; margin-left: 0; } }
@media screen and (min-width: 376px) and (max-width: 768px) { .blog-entry { width: 55%; margin-left: 45%; max-width: 370px; } }
.blog-entry h3 { padding: 0; margin-bottom: 18px; font-size: 20px; line-height: 1.2em; }
.blog-entry h3 span { font-size: 75%; display: inline-block; width: 100%; text-transform: uppercase; font-weight: normal; }

.blog-date-small { color: #6699cc; font-size: 0.7em; }

.blog-date { text-align: right; float: left; padding-right: 5px; border-right: 1px solid #565456; margin: 0 10px 10px 0; color: #6699cc; line-height: 1.1em; }

.date-day { display: block; font-size: 1.4em; font-weight: bold; }

.date-month { display: block; font-size: 0.9em; font-weight: bold; }

.date-year { display: block; font-size: 0.8em; }

.blog-tags { font-size: 13px; margin-top: 1em; }
.blog-tags a { font-weight: bold; }

.blog-introtext { font-weight: bold; }

figure { margin: 0; display: table; }
figure.aligncenter { display: table; }
@media screen and (max-width: 376px) { figure.alignright, figure.alignleft { display: table; margin: 1em auto 2em; } }
figure img { display: block; border-radius: 3px; width: 100%; }
figure figcaption { padding-top: 5px; font-size: 0.875em; display: table-caption; caption-side: bottom; text-align: center; }

.blog-related { margin-right: -20px; }
@media screen and (max-width: 768px) { .blog-related { margin-right: 0; } }
.blog-related li { width: 220px; margin: 0 20px 20px 0; float: left; }
@media screen and (max-width: 768px) { .blog-related li { width: 100%; margin: 0 0 20px 0; } }
.blog-related img { width: 220px; border-radius: 5px; }
@media screen and (max-width: 376px) { .blog-related img { width: 100%; max-width: 376px; } }
@media screen and (min-width: 376px) and (max-width: 768px) { .blog-related img { width: 43%; max-width: 220px; float: left; margin-right: 20px; margin-bottom: 20px; } }
.blog-related div { display: block; margin-top: 16px; font-size: 13px; }
@media screen and (max-width: 768px) { .blog-related div { margin-top: 0; } }
.blog-related a { font-weight: bold; font-size: 15px; }
.blog-related a span { display: inline-block; width: 100%; text-transform: uppercase; font-weight: normal; font-size: 90%; }
@media screen and (max-width: 768px) { .blog-related a span { display: block; width: auto; } }

.quip { margin-top: 2em; border-bottom: 1px solid #333; }
.quip a { text-decoration: none; }
.quip a:hover { text-decoration: underline; }

.quip-comment-list { list-style: none; margin: 0; padding: 0; }
.quip-comment-list li.quip-comment { list-style: none; padding: 0; margin: 0; }

div.quip-comment { padding: 4px; }
div.quip-comment form, div.quip-comment p { padding: 0; margin: 0; }

ol.quip-comment-list li ol { margin-bottom: 0; padding-left: 20px; }

ol.quip-comment-list li { list-style-type: none; position: relative; margin-left: 0; border-top: 1px solid #333; }

ol.quip-children { margin: 0; }

.quip-comment-body { padding: 1.5em 0 1.5em 80px; position: relative; }

.quip-comment-text p { padding-top: 1.5em; padding-bottom: 0 !important; }

.quip-unapproved, .quip-unapproved a { color: #a4a4a4; }

.quip-comment-createdon { font-size: 13px; }
.quip-comment-createdon a { color: #808080; }

.quip-comment-author .quip-comment-author-fn { font-weight: bold; }

.quip-reply-link { font-size: 11px; float: left; }

.quip-break { clear: left; }

.quip-error { color: red; font-size: .9em; }

.quip-success { color: green; }

.quip-clear { clear: both; }

.quip-comment-options { clear: right; margin-top: 2px; text-align: right; font-size: 11px; }

.quip-comment-options a { color: #777; }

.quip-avatar { position: absolute; left: 0; margin: 2px; border-radius: 3px; }

/* add comment */
.quip-add-comment p { color: #888; margin-bottom: .2em; }

span.quip-allowed-tags { font-weight: normal; font-size: 11px; font-style: normal; float: right; }

@media screen and (max-width: 376px) { .quip-add-comment { width: 96%; padding: 4px 0; } }
.quip-add-comment .textarea { width: auto; }
.quip-add-comment label { width: 50%; display: block; margin-top: 1em; color: #f8f8f8; }
@media screen and (max-width: 768px) { .quip-add-comment label { width: 100%; } }
.quip-add-comment textarea, .quip-add-comment input[type=text] { background-color: #21201c; border: solid #565456 1px; color: #cccccc; padding: 6px; border-radius: 5px; }
.quip-add-comment textarea { width: 100%; }
@media screen and (max-width: 768px) { .quip-add-comment textarea { width: 96%; } }
.quip-add-comment input[type=text] { width: 50%; }
@media screen and (max-width: 376px) { .quip-add-comment input[type=text] { width: 96%; } }
.quip-add-comment button { margin-top: 1.5em; margin-right: 24px; }
.quip-add-comment input[type=submit] { cursor: pointer; }

.quip-fld br { clear: both; }

.quip-preview { padding: 1.5em 0 1.5em 80px !important; position: relative; border-bottom: 1px solid #d4d4d4; background-color: #212121; }
.quip-preview .quip-comment-body { padding: 0 !important; }

#sidebar { font-size: 14px; border-left: 1px solid #333; padding-left: 20px; }
@media screen and (max-width: 768px) { #sidebar { padding: 0; border: 0; } }
#sidebar h3 { font-size: 14px; line-height: 1.2em; clear: both; padding-top: 14px; padding-bottom: 3px; text-transform: uppercase; }
#sidebar ul { padding-bottom: 1.5em; }
#sidebar ul li { padding: 3px 0; line-height: 1.5em; }
#sidebar ul.archive li { float: left; width: 40px; }
#sidebar dl { padding-bottom: 1.5em; line-height: 1.2em; }
#sidebar dl dd { border-bottom: solid #555555 1px; padding: 2px 0; padding-bottom: 5px; }
#sidebar dl dd:last-child { border-bottom: none; }
#sidebar dl dt { padding-top: 5px; }
#sidebar p { line-height: 1.25em; padding: 2px 0 1em 0; }
#sidebar .cc-badge { padding: 4px 0 4px 4px; float: right; }

#sidebar .portfolio { padding: 6px 0 1.5em 0; }
@media screen and (max-width: 768px) { #sidebar .portfolio { margin-left: -20px; } }
#sidebar .portfolio li { background: #21201c url(../images/box-background.jpg) no-repeat scroll center center; border-radius: 3px; overflow: hidden; position: relative; text-align: center; width: 200px; height: 200px; margin: 0 0 15px 0; border: none !important; padding: 0 !important; float: none; }
#sidebar .portfolio li a { border-radius: 3px; background-position: center 0; display: block; height: 100%; width: 100%; }
#sidebar .portfolio li a:hover { text-decoration: none; }
#sidebar .portfolio li em { background: #1a1a1a; background: rgba(0, 0, 0, 0.8); border-radius: 0 0 3px 3px; font-style: normal; line-height: 1.2em; padding: 5px 0; text-align: center; width: 100%; position: absolute; left: 0; top: 200px; color: #ffcc00; font-size: 0.8em; }
@media screen and (max-width: 768px) { #sidebar .portfolio li { float: left; margin-left: 20px; width: 235px; height: 235px; }
  #sidebar .portfolio li a { background-size: cover; background-position: center center; } }

#followme { list-style: none; padding: 0; margin: 0; }
#followme li { width: 28px; float: left; border: none !important; }
#followme a { background-image: url(../images/social-network-icons.png); background-repeat: no-repeat; width: 22px; height: 22px; padding: 0; text-indent: -9999px; display: block; }
#followme a.rssfeed { background-position: -1px 0; }
#followme a.googleplus { background-position: -24px 0; }
#followme a.facebook { background-position: -47px 0; }
#followme a.misterwong { background-position: -70px 0; }
#followme a.twitter { background-position: -93px 0; }
#followme a.delicious { background-position: -116px 0; }

.followme { margin-top: 6px; margin-bottom: 20px; }
@media screen and (max-width: 768px) { .followme { width: 50%; float: left; } }
@media screen and (max-width: 376px) { .followme { width: 100%; } }
.followme .social-icon { color: #ccc; font-size: 24px; margin-right: 4px; }
.followme .social-icon:hover { color: #ffcc00; }

#social-networks .social-icon { margin-right: 12px; }

#footer { background: #222222; border-top: 1px solid #ffcc00; }
#footer .inner { height: 100px; width: 960px; max-width: 100%; margin: 0 auto; color: #808080; font-size: 0.8em; text-align: center; }
#footer .inner div { padding-top: 7px; }
#footer .navigation ul { text-align: center; width: 100%; }
#footer .navigation li { display: inline; }
#footer .navigation a { color: #808080; margin: 0 15px; text-transform: uppercase; letter-spacing: 0.08em; }
#footer .navigation a:hover { color: #ffcc00; text-decoration: underline; }
#footer .copyright a, #footer .copyright a:hover { color: #80808; }
#footer .logo { clear: both; }

/*# sourceMappingURL=site.css.map */