@import "boilerplate.css";

/* SCREEN (This code is so old!)
-------------------------------------------------------------- */
body { height: 100%; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,p,ul,ol,dl { font-weight: normal; color: #555; }
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { color: #ccc; font-style: normal; }
h2 em a { color: #ccc; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color: #ccc; }
a { color: #3d7cb1; }
p.big { margin-bottom: 40px; font-size: 25px; line-height: 35px; color: #777; }
.quiet { font-size: 20px; line-height: 30px; color: #999; }
.quiet a { color: #777; }
pre code { display: block; margin-bottom: 20px; padding: 10px; background: #eee; font-family: monospace; font-size: 12px; color: #555; overflow: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
sup { font-size: 10px; line-height: 8px; }
sup a { margin: 0 5px; padding: 1px 3px; background: #eee; color: #777; }
sup a:hover { background: #3d7cb1; color: #fff; text-decoration: none; }
:focus { outline: none; }
button::-moz-focus-inner { border: 0; }

table { width: 100%; font-size: 13px; line-height: 18px; }
table tr.even { background: #eee; }
table th { padding: 5px; color: #999; font-weight: normal; }
table td { padding: 5px; font-weight: normal; }

form label { display: block; font-weight: normal; }
form .required label { font-weight: bold; color: #555; }
form p { margin-bottom: 5px; }
form .submit { margin-top: 15px; text-align: right; }

input, textarea, button { padding: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.1em; line-height: 1.3em; }
input, textarea { border: 1px solid #bbb; border-bottom-color: #ddd; border-right-color: #ddd; background: #f9f9f9; color: rgb(40, 40, 40); }
input:focus, textarea:focus { padding: 4px; background-color: #fff; border: 2px solid rgb(35, 150, 220); }
input[type=file] { background: none; padding: 0; border: none; }
input[type=hidden] { display: none; }
.button, button { margin: 0; padding: 6px 20px; border: 1px solid #bbb; background: #eee; font-weight: normal; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; line-height: 14px; color: #555; text-align: center; cursor: pointer;
  background: -webkit-gradient(linear, center top, center bottom, from(#f5f5f5), to(#ddd));
  background: -moz-linear-gradient(top center, #f5f5f5, #ddd);
  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,1);
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,1);
  -moz-border-radius: 2px; border-radius: 2px;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.button:hover, button:hover { text-decoration: none; }
.button:active, button:active { background: #ddd; -moz-box-shadow: none; -webkit-box-shadow: none; }

/* ABOUT */
body.about h3 { font-weight: bold; }

.history { margin-bottom: 80px; }
.history a { display: block; margin: 0 auto; padding: 20px 40px; width: 390px; background: #eee url(../images/arrows/external_link.png) 96% 50% no-repeat; font-size: 25px; font-weight: bold; line-height: 25px; color: #999; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px;}
.history a:hover { background-color: #3d7cb1; color: #fff; text-decoration: none; }

/* ALERT */
.alert { margin: 0 0 20px 120px; padding: 10px 20px 10px 55px; background: #ffebdc url(../images/icons/alert.gif) 10px center no-repeat; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.alert h4 { margin: 0; font-size: 15px; line-height: 25px; color: #b34f03; font-weight: bold; }

/* BODY */
#body { padding: 0; zoom: 1; }
#body:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* CONTACT */
body.contact form { width: 722px; }
body.contact input { width: 600px; font-weight: bold; }
body.contact textarea { width: 700px; }
body.contact input, body.contact textarea { padding: 10px; font-size: 20px; border: 1px solid #ccc; }
body.contact input:focus, body.contact textarea:focus { padding: 8px; border: 3px solid rgb(35, 150, 220); }
body.contact button { padding: 10px 50px; font-size: 20px; line-height: 25px; font-weight: normal; }

/* CONTENT */
.content h3 { margin-bottom: 10px; border-bottom: 1px solid #ddd; }
.content h3 a { color: #555; }
.content h3 em { color: #999; }
.content h3 em a { color: #999; }
.content h4, .content h5, .content h6 { margin-bottom: 5px; font-size: 18px; }
.content li { margin-bottom: 3px; }

/* CONTENT TITLE */
.content_title { position: relative; margin-top: 20px; margin-bottom: 20px; }
.content_title h2 { margin-bottom: 0; border-bottom: 1px solid #ddd; font-size: 25px; }
.content_title h2 em { color: #bbb; }
.content_title h2 em a { color: #bbb; }
.content_title h3 { font-size: 15px; color: #999; }

/* ERROR */
.error { padding: 15px 5px 15px 60px; background: #ffebdc url(../images/icons/alert.gif) 10px center no-repeat; font-size: 13px; line-height: 16px; font-weight: bold; color: #b34f03; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

/* HEADER */
#header { padding: 50px 0 20px 0; }
#header h1 { margin: 0 0 0 -10px; padding: 0; font-size: 20px; line-height: 30px; }
#header h1 a { margin: 0; padding: 5px 10px; font-size: 20px; font-weight: normal; color: #999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#header h1 a:hover { background: #3d7cb1; color: #fff; text-decoration: none; }
#header h2 { margin: 10px 0; font-size: 40px; line-height: 35px; font-weight: bold; color: #333; }

/* NAV */
#navigation { position: fixed; margin: 0; padding: 0; top: 0; left: 0; list-style: none; width: 10px; height: 600px; background: url(../images/colorbar.png) no-repeat; }
#navigation li { width: 70px; }
#navigation li a { display: block; margin-left: -70px; padding-top: 50px; width: 70px; height: 0; overflow: hidden; background: #000; opacity: .8; -webkit-border-radius: 0px; }
#navigation .home a       { background: url(../images/home.png) no-repeat top right; }
#navigation .commissions a { background: url(../images/Workshops.png) no-repeat top right; }
#navigation .IM a         { background: url(/images/IM.png) no-repeat top right; }
#navigation .clientInfo a { background: url(/images/ClientInf.fw.png) no-repeat top right; }
#navigation .Search a     { background: url(/images/SearchEn.png) no-repeat top right; }
#navigation .Profile a      { background: url(../images/ProfileEn.png) no-repeat top right; }
#navigation .Contact a       { background: url(../images/ContactEn.png) no-repeat top right; }
#navigation .Paintings a   { background: url(../images/Paintings.png) no-repeat top right; }
#navigation .gallery a    { background: url(../images/galleryEn.png) no-repeat top right; }
#navigation .Events a   { background: url(../images/EventsEn.png) no-repeat top right; }
#navigation .Links a      { background: url(../images/LinksEn.png) no-repeat top right; }
#navigation .Offers a     { background: url(/images/OffersTab.png) no-repeat top right; }
#navigation .Retent a     { background: url(/images/RetTab.png) no-repeat top right; }
#navigation .Bill a       { background: url(/images/BillTab.png) no-repeat top right; }
#navigation .Tech a       { background: url(/images/TechTab.png) no-repeat top right; }
#navigation .Collect a    { background: url(/images/CollTab.png) no-repeat top right; }
#navigation .Toolbox a    { background: url(/images/ToolTab.png) no-repeat top right; }

/* INFO LIST */
.info_list { margin: 0 0 20px 0; list-style: none; color: #999; }
.info_list a { color: #777; }

/* INLINE TAG LIST */
.inline_tag_list { padding-left: 50px; background: url(../images/icons/tag_sm.gif) no-repeat; font-size: 12px; color: #999; }
.inline_tag_list a { color: #999; }
.inline_tag_list strong { display: none; }

/* LINK LIST */
.link_list { list-style: none !important; padding-left: 0; font-size: 14px; line-height: 20px; }
.link_list li { margin: 0; padding: 0; }
.link_list small { color: #bbb; }
.link_list small a { color: #999; }

/* LOGIN FORM */
.login_form p { margin-bottom: 10px; overflow: hidden; }
.login_form p label { float: left; width: 80px; font-weight: bold; font-size: 14px; line-height: 30px; color: #999; }
.login_form p input { font-size: 20px; font-weight: bold; width: 200px; color: #777; }
.login_form .submit input { margin-left: 80px; padding: 5px 20px; width: auto; font-size: 13px; border: none; background: #ddd; color: #777; -webkit-border-radius: 12px; -moz-border-radius: 12px;  cursor: pointer; }

/* PAGE */
#page { margin: 0 auto; width: 750px; }

/* PAGINATION */
.pagination { position: relative; margin-bottom: 15px; height: 45px; color: #fff; }
.pagination a.older { position: absolute; top: 0; left: 0; display: block; padding-top: 45px; width: 45px; height: 0; background: url(../images/buttons/arrow_left.gif) no-repeat; overflow: hidden; }
.pagination a.older:hover { background-position: 0 -45px; }
.pagination a.newer { position: absolute; top: 0; left: 50px; display: block; padding-top: 45px; width: 45px; height: 0; background: url(../images/buttons/arrow_right.gif) no-repeat; overflow: hidden; }
.pagination a.newer:hover { background-position: 0 -45px; }

/* POST DETAIL */
.post_detail .post_bar .date { margin: 0; font-size: 12px; color: #bbb; white-space: nowrap; }
.post_detail .body { zoom: 1; }
.post_detail .body:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.post_detail .body h3 { margin-bottom: 9px; font-size: 18px; line-height: 30px; border-bottom: 1px solid #eee; color: #999; }
.post_detail .body h4 { margin-bottom: 9px; font-size: 16px; line-height: 30px; border-bottom: 1px solid #eee; color: #999; }
.post_detail .body p { font-size: 18px; line-height: 26px; }
.post_detail .body p code { font-family: monospace; font-size: 14px; font-weight: bold; line-height: 25px; white-space: normal; }
.post_detail .body blockquote { padding: 0 0 0 50px; background: url(../images/quotes.png) no-repeat; }
.post_detail .body blockquote p { font-size: 18px; line-height: 26px; color: #777; }
.post_detail .body blockquote cite { margin-top: -10px; display: block; font-size: 12px; font-style: normal; color: #999; }
.post_detail .body blockquote cite a { color: #999; }
.post_detail .body ul { list-style: none; margin-left: 10px; padding-left: 10px; border-left: 1px solid #ddd; }
.post_detail .body .footnote { margin: 10px 0; padding: 10px 0; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; }
.post_detail .body .footnote hr { display: none; }
.post_detail .body .footnote ol { margin: 0; font-size: 11px; color: #999; }
.post_detail .body .footnote a { color: #999; }
.post_detail .jellyroll_photo { float: right; margin: 0 0 10px 10px; }
.post_detail .jellyroll_photo img { padding: 10px; background-color: #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.post_detail .jellyroll_photo_gallery { float: right; margin: 0 0 10px 10px; padding: 5px 5px 0 5px; width: 240px; height: 220px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

.post_detail .inline_full { float: none; margin: 0 0 10px 0; }
.post_detail .inline_full img { width: 500px; }

/* POST SEARCH */
.post_search { margin-bottom: 30px; }
.post_search input { width: 445px; }

/* QUOTE */
.quote blockquote { padding: 0 0 0 50px; background: url(../images/quotes.png) no-repeat; }
.quote .source { margin-top: -15px; font-size: 12px; color: #999; }
.quote .source a { color: #999; }

/* REMARK FORM */
.comment_form { margin-top: 50px; }
.comment_form h2 { margin-bottom: 0; font-size: 20px; }
.comment_form fieldset { padding: 0; border: none; }
.comment_form textarea { width: 510px; }
.comment_form input { width: 350px; }

/* REMARK FORM CLOSED */
.comment_form_closed { padding: 15px 10px; background: #bbb; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.comment_form_closed h3 { margin: 0 0 .3em 0; color: #fff; }
.comment_form_closed p { margin: 0; color: #fff; }

/* REMARK LIST */
.comment_list .title { margin: 0; padding: 0; height: 0; border-top: 1px solid #eee; overflow: hidden; }
.comment_list div { position: relative; margin: 20px 0 20px 60px; }
.comment_list div .name { margin: 0; font-size: 16px; line-height: 30px; }
.comment_list div .name small { font-size: 12px; color: #bbb; }
.comment_list div .name a:hover { text-decoration: none; }
.comment_list div .count { position: absolute; top: 5px; left: -60px; display: block; width: 48px; height: 48px; background: #eee; background-position: 50% 50%; background-repeat: no-repeat; overflow: hidden; text-indent: -1000px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.comment_list div .count:hover { background: #3d7cb1; text-decoration: none; }
.comment_list div p { margin-bottom: 10px; }
.comment_list div h1 { margin-bottom: 10px; font-size: 16px; }
.comment_list div h2 { margin-bottom: 10px; font-size: 16px; }
.comment_list div h3 { margin-bottom: 10px; font-size: 16px; }
.comment_list div h4 { margin-bottom: 10px; font-size: 16px; }
.comment_list div h5 { margin-bottom: 10px; font-size: 16px; }
.comment_list div h6 { margin-bottom: 10px; font-size: 16px; }
.comment_list div blockquote { border-left: 1px solid #ddd; }
.comment_list div blockquote p { font-family: georgia, times, serif; font-style: italic; color: #777; }
.comment_list div.me { padding: 5px 10px; background-color: #f9f9f9; border: 1px solid #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.comment_list div.me .name { line-height: 25px; }
.comment_list div.me .count { top: 0; }
.comment_list div.me .date { border-color: #eee; color: #999; }

/* AUDIO SET INLINE */
.audio_set_inline .audio_player { padding: 5px; height: 35px; background: #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.audio_set_inline .playlist { padding: 0 !important; margin: 0 !important; border-left: none !important; font-size: 13px; border-bottom: 1px solid #ddd; }
.audio_set_inline .playlist li a { display: block; padding: 3px 5px; border-bottom: 1px solid #ddd; }
.audio_set_inline .playlist li a:hover { text-decoration: none; background: #eee; }
.audio_set_inline .playlist li.on a { color: #777; }
.audio_set_inline .playlist li.on a:hover { background: none; }

/* AUDIO INLINE */
.audio_inline .audio_player { padding: 5px; height: 35px; background: #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

/* LISTS */
.item { margin-bottom: 20px; zoom: 1; }
.item:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.item a { color: #3d7cb1; }
.item .thumbnail { display: block; float: left; margin-right: 20px; width: 80px; height: 60px; overflow: hidden; }
.item .thumbnail img { width: 100px; }
.item .body { float: left; width: 420px; }
.item p { margin-bottom: 5px; }
.item .date { margin-bottom: 0; font-size: 12px; color: #bbb; }

/* WORK */
.piece { position: relative; margin-bottom: 80px; zoom: 1; }
.piece:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.piece .jcarousel-container { float: left; margin-right: 50px; background: #333; border: 1px solid #ddd; }
.piece .jcarousel-container img { display: block; }
.piece .jcarousel-direction-rtl { direction: rtl; }
.piece .jcarousel-list { list-style: none; margin: 0; padding: 0; }
.piece .jcarousel-container, .piece .jcarousel-clip, .piece .jcarousel-item { width: 700px; height: 530px; }

.piece h3 { margin-bottom: 10px; font-size: 25px; font-weight: bold; color: #333; }
.piece p { font-size: 13px; line-height: 18px; color: #777; }
.piece .note { margin: 0; color: #999; }
.piece .visit { font-size: 18px; font-weight: bold; }
.piece .visit a { display: block; margin-bottom: 5px; }

.piece_xl h2 { font-size: 40px; line-height: 35px; font-weight: bold; color: #333; }
.piece_xl .prev_next { position: absolute; top: 18px; right: 0; }
.piece_xl .jcarousel-container, .piece_xl .jcarousel-clip, .piece_xl .jcarousel-item { width: 1000px; height: 660px; }

.prev_next { overflow: hidden; }
.prev_next a { display: block; float: left; margin-right: 5px; overflow: hidden; text-indent: -1000px;
  background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ddd));
  background: -moz-linear-gradient(top center, #fff, #ddd);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.15);
  -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.prev_next a:hover {
  background: -webkit-gradient(linear, center top, center bottom, from(#5088b8), to(#37709f));
  background: -moz-linear-gradient(top center, #5088b8, #37709f); }
.prev_next span { display: block; width: 40px; height: 40px; }
.prev_next .prev span { background: url(../images/arrows/rounded_left.png) 50% 50% no-repeat; }
.prev_next .next span { background: url(../images/arrows/rounded_right.png) 50% 50% no-repeat; }
.prev_next .prev:hover span { background: url(../images/arrows/rounded_left_white.png) 50% 50% no-repeat; }
.prev_next .next:hover span { background: url(../images/arrows/rounded_right_white.png) 50% 50% no-repeat; }

/* HOMEPAGE */
body.homepage #header h1 a {
	color: #fff;
}
body.homepage #header h1 a:hover { background: none; cursor: default; }
body.homepage p.big { font-size: 30px; line-height: 40px; }
body.homepage p.big span { color: #ccc; }
body.homepage p.big a {}


.grid { margin: 0 -10px; overflow: hidden; }
.grid .item { margin: 5px; padding: 20px; width: 190px; background-color: #fff; }


/* PROJECTS */
body.projects #page { width: 1000px; }
body.projects .content { margin-right: 80px; }

/* IPAD */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #page { width: 550px; }
  
  body.projects #page { width: 550px; }
  body.projects .content { margin-right: 0; }

  .piece .jcarousel-container, .piece .jcarousel-clip, .piece .jcarousel-item { width: 550px; height: 415px; }
  .piece .jcarousel-container { float: none; margin-right: 0; }
  .piece .screenshots img { width: 550px; }

  .writeup { margin-top: 10px; }
  .writeup h3 { margin-bottom: 0; font-size: 25px; }
  .writeup p { margin-bottom: 0; font-size: 14px; line-height: 18px; }
  .writeup .visit { font-size: 14px; }
  .writeup .visit a { display: block; margin-bottom: 0; }
  .writeup .prev_next { margin-top: 10px; }

  .piece_xl .writeup { margin: 0 0 20px 0; }
  .piece_xl .jcarousel-container, .piece_xl .jcarousel-clip, .piece_xl .jcarousel-item { height: 360px; }
}
.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #0066A4;
	text-decoration: none;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: 1C97E1;
	filter: DropShadow(Color=ffffff, OffX=1, OffY=1,);
}