@charset "utf-8";
html, body {position:relative; height:100%;}
div.clr {clear: both; height: 0; width: 0; overflow: hidden;}
div.clr-l {clear: left; height: 0; width: 0; overflow: hidden;}
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -10000px; }

body {font-size: 14px; cursor: default;}
body.overflowHidden {overflow: hidden; }
body.dark {background-color: #111516;}
body.bright {background-color: #f1f5f6;}
a {text-decoration: none; cursor: pointer;}
a:hover {text-decoration: underline; }
body.dark a {color: #fff;}
body.bright a {color: #000;}


div.main {}
div.main > div.header {height: 90px; }
div.main > div.header a {text-decoration:none;}
div.main > div.header a:hover {text-decoration:none;}
div.main > div.header > ul {position: absolute; top: 0; z-index: 10001; line-height: 90px; height: 90px; }
div.main > div.header > ul.topLeft {left: 50px;}
div.main > div.header > ul.topRight {right: 70px;}
div.main > div.header > ul li {display:inline; text-transform: lowercase;}
div.main > div.header > ul.topLeft li {margin-right: 20px;}
div.main > div.header > ul.topRight li {margin-left: 20px;}
div.main > div.header > ul li.active {}
div.main > div.header > ul li.active a {text-decoration: none; border-bottom: 2px solid #67c3da; padding-bottom: 4px;}
div.main > div.header > ul.topLeft a.logo {white-space:pre; padding: 8px 100px 12px 0; background-repeat: no-repeat; background-color: transparent;}
div.main > div.header > ul.topLeft li.active a.logo {border: 0;}
body.dark div.main > div.header > ul.topLeft a.logo {background-image: url("/img/logo2.png");}
body.bright div.main > div.header > ul.topLeft a.logo {background-image: url("/img/logo.png");}

div.main > div.header > ul.topRight li a.blog {display: block; position: absolute; z-index: 10001;  right: -70px; top: 0; width: 90px; height: 90px; background-image: url("/img/blog.png"); background-repeat: no-repeat; background-position: right top; background-color: transparent;}
div.main > div.header > ul.topRight li.active a.blog {border: 0;}




div.main > div.content {}


div.main > div.footer {position: fixed; z-index: -1; right: 50px; bottom: 0; line-height: 90px; height: 90px; overflow: hidden; font-size: 12px;}
div.main > div.footer span {padding-left: 20px; text-shadow: 0 0 5px #fff; }
body.dark div.main > div.footer span {color: #fff; text-shadow: 0 0 5px #000; }
body.bright div.main > div.footer span {color: #000; text-shadow: 0 0 5px #fff;  }








/* Work item */
div#ctWork {/*overflow: hidden; /*position: absolute; top: 50%; margin-top: -290px; width: 100%; height: 480px; padding: 50px 0; text-align:center;*/}
div#ctWork a {text-decoration:none;}
div#ctWork a:hover {text-decoration:none;}
div#ctWork div#ctWorkList {position: relative; margin: 0 auto; width: 0; overflow: visible;}
div#ctWork div#ctWorkList img.ctWork-item {position: absolute;}
div#ctWork div#ctWorkList img.ctWork-item.loader {background: transparent url("/img/ajax-loader.gif") scroll no-repeat center center ;}
div#ctWork a.navigation {display: block; position: absolute; top: 50%; width: 30px; height: 108px; margin-top: -54px; background-repeat: no-repeat; background-color: transparent;}
div#ctWork a.navigation.previous {left: 20px; background-image: url("/img/arrow-left.png"); }
div#ctWork a.navigation.previous:hover {background-position: left bottom;}
div#ctWork a.navigation.next {right: 20px; background-image: url("/img/arrow-right.png");}
div#ctWork a.navigation.next:hover {background-position: right bottom;}




div#ctWorkDecription {position: absolute; z-index: 10002; left: 150px; top: 120px; width: 260px; overflow: hidden; font-size: 11px; text-align:left;}
div#ctWorkDecription span {display: block; background-repeat: no-repeat;}
div#ctWorkDecription span.tl {padding-left: 17px; background-image:url('/img/description/tl.png');}
div#ctWorkDecription span.tr {position: relative; padding-right: 18px; background-image:url('/img/description/tr.png'); background-position: right top;}
div#ctWorkDecription span.tc {position: relative; padding-top: 16px; background-image:url('/img/description/tc.png'); background-repeat: repeat-x;}
div#ctWorkDecription span.bl {margin-left: -17px; padding-left: 17px; background-image:url('/img/description/bl.png'); background-position: left bottom;}
div#ctWorkDecription span.br {margin-right: -18px; padding-right: 18px; background-image:url('/img/description/br.png'); background-position: right bottom;}
div#ctWorkDecription span.bc {padding-bottom: 18px; background-image:url('/img/description/bc.png'); background-repeat: repeat-x; background-position: center bottom;}
div#ctWorkDecription span.cl {margin-left: -17px; padding-left: 17px; background-image:url('/img/description/cl.png'); background-repeat: repeat-y; background-position: left top;}
div#ctWorkDecription span.cr {margin-right: -18px; padding-right: 18px; background-image:url('/img/description/cr.png'); background-repeat: repeat-y; background-position: right top;}
div#ctWorkDecription span.cc {background-image:url('/img/description/cc.png'); background-repeat: repeat; background-position: center center;}
div#ctWorkDecription div.content {}
div#ctWorkDecription div.header {font-size:14px; font-weight: bold; padding-bottom: 5px;}


div#ctWorkNavigation {position: fixed; z-index: 10001; bottom: 37px; left: 50%; height: 14px; width: 100%; font-size: 12px; text-align:center;}
div#ctWorkNavigation div.data {display: none;}
div#ctWorkNavigation ul {height: 14px; }
div#ctWorkNavigation ul li {display: block; float: left; width: 14px; height: 14px; line-height: 20px; overflow:hidden; background-image:url('/img/bullet-work.png'); background-repeat: no-repeat; background-position: left top;}
div#ctWorkNavigation ul li + li {margin-left: 10px;}
div#ctWorkNavigation ul li a.workItem  {display: block; width: 14px; height: 14px; overflow:hidden; text-indent: 14px; text-decoration:none;}
div#ctWorkNavigation ul li.active a.workItem {text-decoration:none;}
body.dark div#ctWorkNavigation ul li {background-position: left -14px}
body.dark div#ctWorkNavigation ul li.active {background-position: left bottom;}
body.bright div#ctWorkNavigation ul li {background-position: left 0}
body.bright div#ctWorkNavigation ul li.active {background-position: left bottom;}




div#ctWorkNavigation div.popup {width: 300px; position: absolute; bottom: 27px; padding-bottom: 9px; margin-bottom: -9px; z-index: 10010}
div#ctWorkNavigation div.popup span {display: block; background-repeat: no-repeat;}
div#ctWorkNavigation div.popup span.tl {padding-left: 6px; background-image:url('/img/popup/tl.png');}
div#ctWorkNavigation div.popup span.tr {padding-right: 7px; background-image:url('/img/popup/tr.png'); background-position: right top;}
div#ctWorkNavigation div.popup span.tc {padding-top: 6px; background-image:url('/img/popup/tc.png'); background-repeat: repeat-x;}
div#ctWorkNavigation div.popup span.bl {margin-left: -6px; padding-left: 6px; background-image:url('/img/popup/bl.png'); background-position: left bottom;}
div#ctWorkNavigation div.popup span.br {margin-right: -7px; padding-right: 7px; background-image:url('/img/popup/br.png'); background-position: right bottom;}
div#ctWorkNavigation div.popup span.bc {position: relative; padding-bottom: 7px; background-image:url('/img/popup/bc.png'); background-repeat: repeat-x; background-position: center bottom;}
div#ctWorkNavigation div.popup span.bc div.bm {position: absolute; left: 50%; margin-left: -8px; bottom: -9px; width: 17px; height: 10px; background-image:url('/img/popup/bm.png'); background-repeat: no-repeat; background-position: center bottom;}
div#ctWorkNavigation div.popup span.cl {margin-left: -6px; padding-left: 6px; background-image:url('/img/popup/cl.png'); background-repeat: repeat-y; background-position: left top;}
div#ctWorkNavigation div.popup span.cr {margin-right: -7px; padding-right: 7px; background-image:url('/img/popup/cr.png'); background-repeat: repeat-y; background-position: right top;}
div#ctWorkNavigation div.popup span.cc {background-image:url('/img/popup/cc.png'); background-repeat: repeat; background-position: center center; overflow:hidden;}
div#ctWorkNavigation div.popup div.content {padding: 10px 5px; font-weight:bold; font-size: 18px;}



div#ctPageNavigation {padding-top: 8px; }
div#ctPageNavigation a.page {/*display: block;*/ float: left; margin-right: 6px; width: 9px; height: 9px; overflow:hidden; background-color: #c0c1c3; /*background-image:url('/img/bullet-page.png'); background-repeat: no-repeat; background-position: left top;*/}
/*div#ctPageNavigation a.page + a.page {margin-left: 6px;}*/
div#ctPageNavigation a.page.active {background-color: #bcff00;/*background-position: left bottom;*/}




div#map-container {position: relative; margin: 0 auto;}
div#map-container div.marker {position: absolute; width: 49px; height: 71px;}
div#map-container div.marker span.marker {display: block; width: 49px; height: 71px; background-image: url('/img/map-marker.png'); background-repeat: no-repeat; background-position: center bottom; text-align:center;}
div#map-container div.marker span.marker.hovered {display: block; width: 157px; height: 226px; left: 0; top: 0; background-image: url('/img/map-marker-big.png'); background-repeat: no-repeat; background-position: center bottom;}
div#map-container div.marker span.marker span.short {display:block; font-size: 10px; font-weight: bold; padding-top: 20px;}
div#map-container div.marker span.marker span.full {display:block; max-height:100px; overflow:hidden; font-size: 12px; font-weight: bold; padding: 30px 20px 40px 20px;}
div#map-container div.marker span.marker span.full span.place {display:block; padding-bottom: 10px;}
div#map-container div.marker span.marker span.full span.email {display:block; padding-bottom:3px; color:#00d8ff;}
div#map-container div.marker span.marker span.full span.email a {color:#00d8ff;}
div#map-container div.marker span.marker span.full span.phone {display:block; padding-bottom:3px; }
div#map-container div.marker span.marker span.full span.address {display:block; padding-bottom:3px; color:#434343; font-weight:normal;}



div#about-container {position: relative; color: #232424; font-size:12px; line-height:14px;}
div#about-container h1 {font-size:18px; padding-bottom: 5px;}
div#about-container p {padding-bottom: 5px;}
div#about-container div.sep {height: 30px; overflow: hidden;}
div#about-container ul {padding-bottom: 5px;}
div#about-container ul li {padding-left: 10px;}
div#about-container img.bg {position:absolute; left: 3%; margin-top: -3%; width: 70%; z-index: -1; }
div.dialog {margin: 60px auto 0 auto; width: 1050px; }
div.dialog div.top {height: 20px; overflow: hidden; background-image:url('/img/dialog-top.png'); background-repeat:no-repeat;}
div.dialog div.middle {padding:0 20px; background-image:url('/img/dialog-middle.png'); background-repeat:repeat-y;}
div.dialog div.bottom {height: 20px; overflow: hidden; background-image:url('/img/dialog-bottom.png'); background-repeat:no-repeat;}




div#blog-container div.dialog div.middle {min-height: 400px;}
div#blog-container h1 {font-size:18px; padding-bottom: 5px;}



div#error-container {font-size: 18px;}
div#error-container div#message-box {font-size: 18px;}
div#error-container div#message-box p + p {margin-top: 5px;}
div#error-container div#message-box p.msg-error {color: #f00;}
div#error-container div#message-box p.msg-warning {color: #f80;}
div#error-container div#message-box p.msg-message {color: #6c0;}
div#error-container div#message-box p.trace {margin-top: 20px; border: 2px solid #959595; padding: 10px; font-size: 10px;line-height: 2em; white-space: pre; overflow-x: auto;}

div#error-container div.dialog div.middle {min-height: 400px;}
div#error-container h1 {margin-bottom: 50px;}