/* design.css (extends core.css) contains all design specific colors, images and text formatting All style rule attributes in alpha-numeric order starting from 0-9 A-Z x = horizontal, y = vertical property: trbl, tb rl, t rl b, t r b l; */ /* COLORS ----------------------------------------------------------------------------- #262725 Grey (Background) #bbe2ff Blue (Background) #7d9885 Dk. Green (Link, Default) #3d4446 Dk. Grey (Blog Footer) #59676e Lt. Grey (Blog Footer) #3d4446 Dk. Grey (Blog Content, Font) #59676e Blue Grey (Blog Footer, Font) #79937c Lt. Green (Blog Footer, Link) #b1b1b1 Lt. Grey (Footer Header) #979797 Lt. Grey (Footer Font) #3d4446 Grey (Twitter Font) #add1eb Lt. Blue-Grey (Widget Background) */ /* TABLE OF CONTENTS ----------------------------------------------------------------------------- _FORMS _WRAP _HEADER _MAIN NAV _CONTENT-WRAP _PORTFOLIO _LEFT COLUMN _RIGHT COLUMN _FOOTER */ body{ background-color: #262725; color: #979797; } a:link, a:visited{ color: #7d9885; text-decoration: none;} a:hover, a:active{ color: #fff; text-decoration: none;} img.left, img.right, img.center{ background-color: #FFFFFF; border: 1px solid #999999; margin: 0 10px 5px; padding: 3px; } img.left{ margin-left: 0; } img.right{ margin-right: 0; } img.center{ margin: 15px auto; } img.none{ background-color: transparent; border: 0; padding: 0; } /* _FORMS ----------------------------------------------------------------------------- */ .btn{ text-align: right; } label{ display: block; font-weight: bold; } input, textarea{ background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 5px 10px; width: 400px; } .short input{ width: 100px; } .wide input{ width: 600px; } .inline input, .btn input{ width: auto; } textarea{ height: 150px; resize: none; } .btn input{ border: 0; text-transform: uppercase; } .inline input, .inline label{ float: left; } .inline input{ background-color: transparent; border: 0; margin-right: 10px; } /* _WRAP ----------------------------------------------------------------------------- */ .wrapper-wide {width: 100%; float: left; clear: both; height: auto;} .wrapper-wide.nav {background-image:url('img/portnav-bg.jpg'); background-repeat:repeat-x; background-color: #eef8ff;} .wrapper-wide.footer {background-image:url('/css/img/footer-topline.jpg'); background-repeat:repeat-x;} .wrapper-center {width: 960px; margin: 0 auto; height: auto;} /* _HEADER ----------------------------------------------------------------------------- */ #header {width: auto; height:82px;} #logo {width: 244px; height: 25px; margin: 8px auto; clear: both;} #hdr-port-toggle {width: 80px;height: 16px;float: left;position: absolute;display: block;background: url('/css/img/button-hide-open-portfolio.gif') no-repeat 0 -16px;top: 10px;right: 20px;text-indent: -5000px} #port-nav .hidden, #hdr-port-toggle.hidden {background-position: 0 0;} /* _MAIN NAV ------------------------------------------------------------------------- */ #hdr-nav {width: 754px; margin: 0 auto; height: 32px;} #hdr-nav li {list-style: none; width: auto; float: left; margin: 0px 10px; padding: 11px 0px; height: 14px;} #hdr-nav li a:link, #hdr-nav li a:visited {height: 14px; display: block; text-indent: -5000px; background-image: url('/css/img/mainnav.gif'); background-repeat: no-repeat;} #hdr-nav li a:link:hover, #hdr-nav li a:visited:hover {background-position: 0 -12px;} #hdr-nav .conceptual a:link, #hdr-nav .conceptual a:visited {width: 64px; background-position: 0px 2px;} #hdr-nav .conceptual a.active, #hdr-nav .conceptual a:link:hover, #hdr-nav .folio-1 a:visited:hover {background-position: 0px -12px;} #hdr-nav .fashion-beauty a:link, #hdr-nav .fashion-beauty a:visited {width: 90px; background-position: -83px 2px;} #hdr-nav .fashion-beauty a.active, #hdr-nav .fashion-beauty a:link:hover, #hdr-nav .fashion-beauty a:visited:hover {background-position: -83px -12px;} #hdr-nav .saints a:link, #hdr-nav .saints a:visited {width: 55px; background-position: -193px 2px;} #hdr-nav .saints a.active, #hdr-nav .saints a:link:hover, #hdr-nav .saints a:visited:hover {background-position: -193px -12px;} #hdr-nav .toy-lifestyle a:link, #hdr-nav .toy-lifestyle a:visited {width: 69px; background-position: -269px 2px;} #hdr-nav .toy-lifestyle a.active, #hdr-nav .toy-lifestyle a:link:hover, #hdr-nav .toy-lifestyle a:visited:hover {background-position: -269px -12px;} #hdr-nav .spiritus-obscura a:link, #hdr-nav .spiritus-obscura a:visited {width: 92px; background-position: -357px 2px;} #hdr-nav .spiritus-obscura a.active, #hdr-nav .spiritus-obscura a:link:hover, #hdr-nav .spiritus-obscura a:visited:hover {background-position: -357px -12px;} #hdr-nav .illustration a:link, #hdr-nav .illustration a:visited {width: 66px; background-position: -469px 2px;} #hdr-nav .illustration a.active, #hdr-nav .illustration a:link:hover, #hdr-nav .illustration a:visited:hover {background-position: -469px -12px;} #hdr-nav .biography a:link, #hdr-nav .biography a:visited {width: 58px; background-position: -555px 2px;} #hdr-nav .biography a.active, #hdr-nav .biography a:link:hover, #hdr-nav .biography a:visited:hover {background-position: -555px -12px;} #hdr-nav .contact a:link, #hdr-nav .contact a:visited {width: 47px; background-position: -632px 2px;} #hdr-nav .contact a.active, #hdr-nav .contact a:link:hover, #hdr-nav .contact a:visited:hover {background-position: -632px -12px;} #hdr-nav .blog a:link, #hdr-nav .blog a:visited {width: 29px; background-position: -698px 2px;} #hdr-nav .blog a.active, #hdr-nav .blog a:link:hover, #hdr-nav .blog a:visited:hover {background-position: -698px -12px;} /* _CONTENT-WRAP ----------------------------------------------------------------------------- */ .wrapper-portfolio{background-color: #bbe2ff; overflow-x: hidden;} .wrapper-blog{background-color: #eef8ff;} .wrapper-footer{background-color: #252725;} /*FOR ROUNDED BG: background: url() no-repeat bottom center;*/ /* _PORTFOLIO ------------------------------------------------------------------------- */ #port-imagewrapper {float: left; height: 510px; width: 20000px;position: relative; overflow-y: hidden;} #port-imagewrapper li {list-style: none;float: left;width: auto;height: 500px;margin: 5px 5px 5px 0px} #port-imagewrapper li.loading {width: 400px; background: url(/css/img/port-item-loader.gif) 48% 230px no-repeat;} #port-imagewrapper li img {height: 500px;border: 0} #port-nav {width: 960px;height: 50px;margin: 0 auto;clear: both} #port-navleft:link,#port-navleft:visited {width: 83px;height: 50px;float: left;display: block;text-indent: -5000px;background: url('/css/img/portnav-thisway.gif') no-repeat 0 0} #port-navleft:link:hover,#port-navleft:visited:hover {background-position: 0 -50px} #port-navleft.hidden, #port-navleft.hidden:hover {background-position: 0 -100px} #port-navright:link,#port-navright:visited {width: 83px;height: 50px;float: left;display: block;text-indent: -5000px;background: url('/css/img/portnav-thatway.gif') no-repeat 0 0} #port-navright:link:hover,#port-navright:visited:hover {background-position: 0 -50px} #port-navright.hidden, #port-navright.hidden:hover {background-position: 0 -100px;} #twitter-feed {width: 794px;height: 50px;background-image: url('/css/img/twitter-bg.jpg');background-repeat: no-repeat;margin: auto;float: left;} #twitter-feed p {padding-top: 27px; padding-left: 98px; color: #768c9a; font-size: .7em; font-family: "Arial","Helvetica",sans-serif;} #twitter-feed p a:link,#twitter-feed p a:visited {color: #586973;} /* _LEFT COLUMN ------------------------------------------------------------------------- */ #bl-leftcolumn{width: 550px; margin: 65px 0 0 10px; float: left;} .bl-entry-wrap h1 {color:#252725; font-size: 1.38em; padding: 0 0 10px 0; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif; background:url("/css/img/blog-entry-sep.jpg") repeat-x scroll left bottom transparent; } .bl-entry-wrap p {color:#3d4446; margin: 17px 0 0 0; font-size: .85em; font-family:"Arial", Helvetica, sans-serif; line-height: 160%;} .bl-entry-wrap img {margin: 17px 0 0 0;} /*.bl-divider {width: 66px; height: 6px; margin: 10px 0 0 0;}*/ .bl-postmetadata { width: 550px; height: 40px; margin: 24px 0 0 0; color: #59676e; font-size: .75em; font-family:"Arial", Helvetica, sans-serif; background-image:url('/css/img/blog-entry-footer.gif'); background-repeat:no-repeat; float: left;} .bl-postmetadata-bm {margin-bottom: 50px;} .bl-postmetadata-date {width: auto; height: auto; margin: 14px 5px 14px 20px; float: left; text-transform: uppercase;} .bl-postmetadata-divider {width: auto; height: auto; margin: 14px 5px; float: left;} .bl-postmetadata-tags {width: auto; height: auto; margin: 14px 5px; float: left;} .bl-postmetadata-tags a:link, .bl-postmetadata-tags a:visited, .bl-postmetadata-tags a:hover, .bl-postmetadata-tags a:visited:hover { color: #7D9885; } .bl-postmetadata-commentcount {width: auto; margin: 12px 12px 0 0; color: #bbe2ff; font-size: 1.5em; font-weight: bold; font-family:"Arial", Helvetica, sans-serif; float: right;} .bl-entry-nav {width: 550px; height: auto; margin: 30px 0 50px 0; float: left;} .bl-entry-nav a:link, a:visited, .bl-entry-wrap h1 a:link:hover, .bl-entry-wrap h1 a:visited:hover {color: #79937c;} .bl-entry-nav a:active, a:link:hover, a:visited:hover, .bl-entry-wrap h1 a:link, .bl-entry-wrap h1 a:visited {color: #3d4446;} .entry-pager {float: left; clear: both; width: 100%; padding: 0 0 100px 0; margin-top: -55px; position: relative;} .bl-entry-older, .bl-entry-newer, .entry-pager .prev, .entry-pager .next {width: auto; font-size: .85em; font-weight: bold; font-family:"Arial", Helvetica, sans-serif;} .bl-entry-older {float: left;} .bl-entry-newer {float: right;} .entry-pager a:link, .entry-pager a:visited {font-size: 12px; display: block;} .entry-pager a.prev:link, .entry-pager a.prev:visited {position: absolute; top: 40px; left: 0;} .entry-pager a.next:link, .entry-pager a.next:visited {position: absolute; top: 40px; right: 0;} /* COMMENT STYLING */ .comment-wrapper {clear:both;} .name-date-wrapper {width: 550px; border-style: solid; border-width: 5px 0 0 0; border-color: #d5dfe6; float: left;} .name {float: left; padding: 7px 0 0 0; width: auto; height: auto; color: #3d4446; font-size: .85em; font-weight: bold; font-family:"Arial", Helvetica, sans-serif;} .date {float: right; padding: 7px 0 0 0; width: 155px; height: 31px; background: url('/css/img/sep-comment-date.jpg') no-repeat 0 0;} .date p {width: 155px; margin: 0 auto; font-size: .75em; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif; text-align: center;} .comment {margin: -5px 0 40px 0; clear: both; float: left;} /* FORM STYLING */ #form, #comment_form {width: 550px;} .hiddenFields {width: 548px; color: red; background-color: #f5fbff; border: 0px; border-style: solid; border-color: #d5dfe6; font-size: .85em; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif; display: none;} #form .form-error-msg, #comment_form .form-error-msg { color: #a41818; font-style: italic; font-size: 12px; line-height: 12px; font-weight: bold; border: 1px solid #a41818; padding: 9px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #eecdcd;} #form legend, #comment_form legend { display: none; } #form fieldset, #comment_form fieldset {width: 100%; height: auto; float: left; margin: 0 0 12px 0; position: relative;} #form #enews_signup {float: left; clear: both; width: 15px; text-align: left; border: 0; margin: 10px 0 0 5px;} #form #fs-form-email span { display: block; float: left; font-size: 12px; line-height: 12px; font-style: italic; margin: 12px 0 0 8px; } #fs-form-name, #form #fs-form-name {margin-top: 20px; clear: both;} #fs-form-name label, #fs-form-email label, #fs-form-url label, #fs-form-comment label { display: none; } #fs-form-name input, #fs-form-email input, #fs-form-url input, #fs-form-comment textarea, #fs-form-captcha input {border: 1px solid #d5dfe8; width: 525px; padding: 12px; height: auto; color: #a5acb2; font-size: 12px; line-height: 12px; font-weight: bold; -moz-border-radius: 4px; -webkit-border-radius: 4px;} #fs-form-name input:focus, #fs-form-email input:focus, #fs-form-url input:focus, #fs-form-comment textarea:focus, #fs-form-captcha input:focus {border: 1px solid #bec6cc;} #fs-form-comment textarea {line-height: 18px;} #fs-form-captcha label {font-weight: normal; font-size: 12px; display: block; margin-bottom: 8px;} #form-captcha-image {float: left; width: auto; margin: 0 15px 0 0;} #form-captcha-image img {margin: 5px 0 0 0;} #form-captcha-input {float: left; width: 200px;} #form-captcha-input input {width: 370px;} #fs-form-buttons { padding-bottom: 35px; } #fs-form-buttons input { color: #f3fbfe; width: auto; display: block; background: #d5e0e6; font-weight: bold; text-transform: uppercase; font-size: 12px; line-height: 12px; padding: 10px 13px 8px 13px; border: 0; -moz-border-radius: 4px;-webkit-border-radius: 4px;} #fs-form-buttons input:hover {color: #3c4447;} #fs-form-buttons #comment-preview { display: none; } #form input.error, #comment_form input.error, #form textarea.error, #comment_form textarea.error {border: 1px solid #a41818; color: #a41818;} #comment_form #comment-form-error-msg {position: absolute; left: 162px; top: 0; } #form #contact-form-error-msg {position: absolute; left: 90px; top: 0; } #contact-thanks { border: 1px solid #AFD2EB; background: #f7fbfe; margin: 20px 0 0 0; padding: 25px 20px 20px 20px; font-size: 14px; line-height: 14px; font-weight: bold; color: #475257; font-style: italic; -moz-border-radius: 4px;-webkit-border-radius: 4px;} /* _RIGHT COLUMN ------------------------------------------------------------------------- */ #bl-rightcolumn{width: 350px; margin: 10px 0 150px 50px; float: left;} #rssicon {width: 112px; height: 84px; float:left; position: relative; display: block; background: url('/css/img/button-rss.png') no-repeat 0 0; top: 76px; left:238px; text-indent: -5000px;} .bl-widget {margin: 0 0 20px 0; float: left; clear: both; width: 100%;} .widget-content {float: left; clear: both; width: 100%;} .widget-content li {list-style: none; height:24px; background-color:#afd2eb; border-bottom: 1px solid #bbe2ff; color:#475257; font-size: .9em; font-family:"Arial", Helvetica, sans-serif;} .widget-content li a:link, .widget-content li a:visited {color: #475257; font-weight: normal; font-size: .9em; display: block; text-decoration: none; height: 27px; line-height: 27px; padding: 0 0 0 10px;} .widget-content li a:hover {background-color: #eef8ff;} .widget-top, .widget-bottom {width: 100%; height: 14px; float: left; clear: both;} .widget-top {border-bottom: 1px solid #bbe2ff; background:url('/css/img/blog-widget-top.gif') 0 0 no-repeat;} .widget-bottom {background:url('/css/img/blog-widget-bottom.gif') 0 0 no-repeat;} .widget-title {width: auto; height: 27px; background:url('/css/img/widget-title-right.gif') no-repeat top right; float:left; clear: both; position: relative;} .widget-title div {width: auto; height: 27px; display: block; background: url('/css/img/widget-title-left.gif') no-repeat 0 0; float: left; clear: both;} .widget-title div img {float: left; margin: 6px 10px;} .widget-banner {margin: 25px 0 0 0; border: 0px;} /* _FOOTER ----------------------------------------------------------------------------- */ #footer-col1 {width: 290px; height: auto; margin: 50px 15px 50px 10px; float:left;} #footer-col1 h2 {color: #979797; margin-bottom: 15px; font-size: .85em; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif;} #footer-col1 ul {color: #777; list-style-type: none; margin-bottom: 15px; font-size: .85em; font-family:"Arial", Helvetica, sans-serif; line-height: 160%;} #footer-col1 ul li strong {color: #979797;} /*#footer-col1 li {margin: 5px 0;}*/ #footer-col2 {width: 290px; height: auto; margin: 50px 15px 50px 0; float:left;} #footer-col2 h2 {color: #979797; margin-bottom: 15px; font-size: .85em; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif;} #footer-col2 ul, p {color: #777; list-style-type: none; margin-bottom: 15px; font-size: .85em; font-family:"Arial", Helvetica, sans-serif; line-height: 160%;} #footer-col2 ul li strong {color: #979797;} /*#footer-col2 li {margin: 5px 0;}*/ #footer-col3 {width: 298px; height: auto; margin: 50px 10px 50px 0; float:left;} #footer-col3 h2 {color: #979797; margin-bottom: 15px; font-size: .85em; text-transform: uppercase; font-family:"Arial", Helvetica, sans-serif;} #footer-col3 p {color: #777; margin-bottom: 15px; line-height: 160%;} #footer-col3 ul li strong {color: #979797;} .footer-divider {width:1px; height:190px; margin: 50px 15px 50px 0; background-image:url('/css/img/footer-divider.jpg'); background-repeat:no-repeat; float:left;}