/* CSS Document */ /* */ * { margin: 0; padding: 0; border: 0; font-size: 100%; } body {line-height: 1; color: #ccc; background: #f7f7f7 url(../images/template/bg2.jpg) repeat-x; font-family:Helvetica, Arial, sans-serif; font-size: 70%; } h1 {color: #a7a9ac; margin: 0 0 0.5em 0; font-size: 210%; font-weight: bold; font-family:Helvetica, Arial, sans-serif; line-height: 1.3em } h2 {color:#000; margin: 0em 0 5px 0; font-size: 130%; font-weight: bold; padding-bottom: 8px } h3 {color:#333; margin: 0 0 5px 0; font-size: 120%; font-weight: normal } h4 { color: #999; font-weight: lighter; font-size: 130%; margin-bottom: 10px } p {color: #999; line-height: 1.3; margin-bottom: 10px; font-size: 120% } span.largetext {font-size: 120%} span.red {color:#ed1c24;} span.black {color:#000} span.blackwide {color:#000; margin-left: 20px} a:link, a:visited {color:#ed1c24; text-decoration: none } a:hover {text-decoration: none; color:#000 } a.arrowlink:link, a.arrowlink:visited {font-weight: bold; background:url(../images/template/arrow.png) 100% 3px no-repeat; padding-right: 12px } a.arrowlink:hover {background:url(../images/template/arrow_hover.png) 100% 3px no-repeat;} div.clear { clear: both;} div.hr { height: 3px; background: #fff url(../images/template/hr.jpg) repeat-x scroll center; margin: 14px 0px 14px 0px} div.hr2 { height: 3px; background: #fff url(../images/template/hr2.jpg) repeat-x scroll center; margin: 37px 0px 15px 0px; width: 920px} div.hr3 { height: 3px; background: #fff url(../images/template/hr2.jpg) repeat-x scroll center; margin: 37px 0px 15px 0px; width: 135px} div.hr hr, div.hr2 hr, div.hr3 hr { display: none;} /* START TEMPLATE STYLES */ /* -------------------------------- */ #container {width: 1024px; margin: auto; background: #e7e7e8; } #contentcontainer {width: 994px; margin: auto; background: #f3f3f4 url(../images/template/contentcontainerbg.jpg) repeat-x; } #header{padding-top: 42px;} #logo { float: left; margin-bottom: 24px} #mark {float:right; margin-right: 8px} #nav { float:left;} #nav ul {list-style-type: none; } #nav li {display: inline; } a.home {background:url(../images/template/nav_home.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.homeactive {background:url(../images/template/nav_home.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.about {background:url(../images/template/nav_about.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.aboutactive {background:url(../images/template/nav_about.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.portfolio {background:url(../images/template/nav_portfolio.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.portfolioactive {background:url(../images/template/nav_portfolio.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.sketchbook {background:url(../images/template/nav_sketchbook.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.sketchbookactive {background:url(../images/template/nav_sketchbook.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.workshop {background:url(../images/template/nav_workshop.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.workshopactive {background:url(../images/template/nav_workshop.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.diary {background:url(../images/template/nav_diary.jpg) no-repeat; width: 134px; height: 49px; display:block; float:left } a.diaryactive {background:url(../images/template/nav_diary.jpg) 0px -50px no-repeat; width: 134px; height: 49px; display:block; float:left } a.contact {background:url(../images/template/nav_contact.jpg) no-repeat; width: 130px; height: 49px; display:block; float:left } a.contactactive {background:url(../images/template/nav_contact.jpg) 0px -50px no-repeat; width: 130px; height: 49px; display:block; float:left } a.home:hover, a.about:hover, a.portfolio:hover, a.sketchbook:hover, a.workshop:hover, a.diary:hover, a.contact:hover {background-position: 0px -50px; } #footer {width: 994px; margin: auto; margin-top: 30px; padding: 0px 30px 30px 45px; color: #999; text-decoration:none ; font-weight: bold; font-size: 108% } #footer a:link, #footer a:visited {color: #999; text-decoration:none ; } #footer a:hover {color: #666 } #footer ul {list-style-type: none; } #footer li {display: inline; margin-right: 20px } #footerlinks {width: 250px; float:left; margin-right: 160px} #copyright {width: 265px; float:left} #footercontacts {width: 280px; float:left} /* END TEMPLATE STYLES */ /* -------------------------------- */ /* START CONTENT STYLES */ /* -------------------------------- */ #content {margin: auto; padding: 0px 30px 30px 30px} #maincontent {padding-top: 40px; } /* END CONTENT STYLES */ /* -------------------------------- */ /* START HOME STYLES */ /* -------------------------------- */ #banner {padding-top: 40px; } #introtext {width: 385px; float:left } #introtext h1 {margin-bottom: 82px; color: #a7a9ac; font-size: 240%;font-weight: bold;font-family:Helvetica, Arial, sans-serif; line-height: 1.3em} #carousel {position:relative;width: 518px; float:left; background: #fff; height: 298px; margin:0px 0px 20px 20px} #carousel img {padding: 14px 0px 0px 14px} #carousel a {float:left;position:absolute;} #carousel a img {border:none; cursor: default;} #carousel a.show {z-index:500} #carousel .caption {z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute;bottom:0;} #carousel .caption .content {margin:5px} #carousel .caption .content h3 {margin:0;padding:0;color:#1DCCEF;} #diaryhome {width: 357px; background: #fff; padding: 14px; margin: 24px 20px 0 0; float:left; min-height: 280px} div.diaryhome_story {float:left; } div.diaryhome_story img {float:left; margin-right: 14px} div.diaryhome_story a.arrowlink:link, div.diaryhome_story a.arrowlink:visited {font-weight: bold; background:url(../images/template/arrow.png) 100% 14px no-repeat; padding-right: 12px; float:right; padding-top: 10px } div.diaryhome_story a.arrowlink:hover {background:url(../images/template/arrow_hover.png) 100% 14px no-repeat;} #portfoliohome {width: 222px; background: #fff; padding: 14px; float:left; margin: 24px 20px 0 0; min-height: 260px} /* #portfoliohome img, #sketchbookhome img {margin-bottom: 23px; } */ #portfoliohome img, #sketchbookhome img {margin-bottom: 23px; } #portfoliohome img { width: 234px; height: 126px; } #portfoliohome a.arrowlink:link, #portfoliohome a.arrowlink:visited, #sketchbookhome a.arrowlink:link, #sketchbookhome a.arrowlink:visited {font-weight: bold; background:url(../images/template/arrow.png) 100% 14px no-repeat; padding-right: 12px; float:right; padding-top: 10px } #portfoliohome a.arrowlink:hover, #sketchbookhome a.arrowlink:hover {background:url(../images/template/arrow_hover.png) 100% 14px no-repeat;} #sketchbookhome {width: 222px; background: #fff; padding: 14px; float:left; margin-top: 24px; min-height: 260px} #portfoliohome .imageHolder, #sketchbookhome .imageHolder {display: block; overflow: hidden; width:223px; height:121px; margin: 0px 0px 10px 0px;} #diaryhome h3, #portfoliohome h3, #sketchbookhome h3 {line-height: 120%;} /* */ /* END HOME STYLES */ /* -------------------------------- */ /* START ABOUT STYLES */ /* -------------------------------- */ #aboutnav {width: 250px; float:left; margin-right: 150px } #aboutnav ul {list-style-type: none; margin-bottom: 50px} #aboutnav li {color: #a7a9ac;margin: 0 0 0.5em 0;font-size: 210%;font-weight: bold; font-family:Helvetica, Arial, sans-serif;line-height: 1.7em; border-bottom: 2px solid #ccc} #aboutnav li a:link, #aboutnav li a:visited {color: #a7a9ac} #aboutnav li a:hover, #aboutnav li a.aboutnavactive {color:#ed1c24;} ul.aboutlist {list-style-type:none} ul.aboutlist li {color: #a7a9ac;margin: 0 0 0.5em 0;font-size: 140%;font-weight: bold; font-family:Helvetica, Arial, sans-serif;line-height: 1.7em;} #copy {width: 520px; float:left; margin: 5px 0px 0px 3px;} /* END ABOUT STYLES */ /* -------------------------------- */ /* START PORTFOLIO STYLES */ /* -------------------------------- */ #sidenav {width: 250px; float:left; margin-right: 17px } #sidenav2 {width: 135px; float:left; margin-right: 135px} #sidenav2 h2 {color:#000;margin: 0;font-size: 120%;font-weight: bold;margin-bottom: -18px} #sidenav ul, #sidenav2 ul {list-style-type: none; padding-top: 18px } #sidenav li, #sidenav2 li {color: #bfc0c3;margin: 0 0 0.5em 0;font-size: 120%;font-weight: bold; font-family:Helvetica, Arial, sans-serif;line-height: 0.8em; } #sidenav li a:link, #sidenav2 li a:link{color: #a7a9ac} #sidenav li a:visited, #sidenav2 li a:visited {color: #999} #sidenav li a:hover, #sidenav li a.portfolionavactive, #sidenav2 li a:hover, #sidenav2 li a.portfolionavactive {color:#ed1c24;} #project, #project_open {width: 624px; background: #fff; padding: 14px; float:left} #project h2 {color:#6d6e71;margin: 15px 0 5px 0;font-size: 110%;font-weight: bold; padding-bottom: 8px; float:right} #project_open h2 {color:#000;margin: 0;font-size: 130%;font-weight: bold;} #project_details {width: 237px; margin-right: 15px; float:left} #project_details ul {} #project_details li {list-style-type: none;} #project_details li a:link, #project_details li a:visited {color: #999; line-height: 1.3; margin-bottom: 10px; font-size: 120%} #project_details li a:hover {color:#ed1c24;} #project_imgs {width: 372px; float:left; margin-top: -160px; position: relative; z-index: 1} #arrow_left {position:relative; z-index: 5; margin-top: 140px; margin-left: 260px} #arrow_right {position:relative; z-index: 5; margin-top: 140px; margin-right: 5px} a.arrow_leftbtn {background:url(../images/portfolio/arrow_left.png) no-repeat; width: 22px; height: 22px; display:block; float:left } a.arrow_rightbtn {background:url(../images/portfolio/arrow_right.png) no-repeat; width: 22px; height: 22px; display:block; float:right } a.arrow_leftbtn:hover, a.arrow_rightbtn:hover {background-position: 0px -23px; } div.arrow_leftbtn, div.arrow_rightbtn { cursor:pointer; z-index:550; } div.arrow_leftbtn {background:url(../images/portfolio/arrow_left.png) no-repeat; width: 22px; height: 22px; display:block; position: absolute; top: 150px; left:5px; } div.arrow_rightbtn {background:url(../images/portfolio/arrow_right.png) no-repeat; width: 22px; height: 22px; display:block; position: absolute; top:150px; right: 5px; } div.arrow_leftbtn:hover, div.arrow_rightbtn:hover {background-position: 0px -23px; } div.arrow_leftbtn, div.arrow_rightbtn { display:none; } #project_thumbs {margin-top: 35px; float: right;} #project_thumbs img {float:left; width: 103px; } #project_thumbs a img {vertical-align: bottom; margin-right: 3px} #project_thumbs a:hover img {border-color: #E7E7E8;} #slideshow {list-style:none; color:#fff} #slideshow span {display:none} #wrapper {float:left; position: relative; width:372px; display:none; border: none;} #wrapper * {margin:0; padding:0} #fullsize {position:relative; width:inherit; height:330px; overflow: hidden; padding:2px; background-color: transparent; border: none;} #information { display: none;} #information h3 {display: none;} #information p {display: none;} #image {width:372px; overflow: hidden;} #image img {position:absolute; z-index:25; width:auto} .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} .linkhover {background:url(images/link.gif) center center no-repeat} #thumbnails {margin:0px;} #slideleft, #slideright {cursor: pointer; z-index: 160;} /* #slideleft {float:left; width: 22px; height: 22px; background:url(../images/portfolio/arrow_left.png) no-repeat; position: relative; top: 60px; left:5px;} */ #slideleft {display: none;} #slideleft:hover {background-position: 0px -23px;} /* #slideright {float:right; width: 22px; height: 22px; background:url(../images/portfolio/arrow_right.png) no-repeat; position: relative; top:-50px; right: 5px; } */ #slideright { display: none; } #slideright:hover {background-position: 0px -23px;} /*#slidearea {float:left; position:relative; width:372px; margin:0px; height:90px; overflow:hidden} */ #slidearea {float:left; position:relative; top: 0px; right: 0px; width:625px; margin:0px; height:105px; overflow:hidden} /* #slidearea img{ margin: 0px 15px 0px 0px;} */ /* #slider {position:absolute; left:0; height:90px} */ #slider {position:absolute; right:0; height:95px} #slider img {cursor:pointer; border:5px solid #FFF; padding:0px;} /* END PORTFOLIO STYLES */ /* -------------------------------- */ /* START SKETCHBOOK STYLES */ /* --------------------------------- */ #sketchbook {width: 506px; background: #fff; padding: 18px 118px 14px 24px; float:left} #sketchbook h2 {color:#000;margin: 0;font-size: 120%;font-weight: bold;padding-bottom: 20px} div.sketchbookarticle {margin-bottom:34px} div.sketchbookarticle img {padding-bottom: 14px;} div.sketchbookarticle img.smallthumb {padding-bottom: 14px;margin-right: 10px} div.sketchbookarticle_details {margin: 14px 0px 24px 0px} /* END SKETCHBOOK STYLES */ /* -------------------------------- */ /* START DIARY STYLES */ /* --------------------------------- */ #diary {width: 624px; background:url(../images/diary/diary_bg.jpg) repeat-y; padding: 14px; float:left} div.diary_article {background:url(../images/diary/lines_bg.jpg) 0% 10px repeat-y; margin: 24px -14px 50px -14px; } div.diary_date {width: 118px; float:left; color:#40c8f4; padding-left: 15px; font-size: 100%} div.diary_img {width: 115px; overflow:hidden; float:left; margin-right: 14px;} div.diary_copy {width: 372px; float:left; } div.diary_copy h2 {color:#000;margin: 0;font-size: 110%;font-weight:normal;padding-bottom: 14px; line-height: 130%;} div.diary_copy p {margin-top: -10px; line-height: 1.4} /* END DIARY STYLES */ /* -------------------------------- */ /* START CONTACT STYLES */ /* --------------------------------- */ #form {width: 250px; float:left; margin-right:150px } #form input.textbox, #form textarea.textbox { color: #333; font-size: 12px; padding: 2px 2px 4px 2px; border: 4px solid #e7e7e8; background-color: #fff; width: 96% } #form p {margin-bottom: 2px} textarea.textbox {width: 90%; height: 140px; background-color: #f0f0f0; padding: 2px 2px 4px 2px; } input.textbox {width: 100%; margin: 5px 0px 5px 0px } input.btn{ color:#666; margin-top: 15px} input.btn:hover {color:#ed1c24;} #map {width: 492px; float:left; background: #fff; padding: 14px; } #contactleft {width: 52%; float:left; margin-bottom: 14px} #contactright {width: 48%; float:right} #contactleft a:link, #contactleft a:visited {color:#999} #contactleft a:hover {color:#ed1c24;} .form_success{font-size:180%; margin: 10px 0px 20px 0px; padding: 3px; color: #333; display: block; } /* END CONTACT STYLES */ /* -------------------------------- */