/* Mike Kivikoski kivodesigns.com v5.1 5.5.09 8.12.09 Please, have a look around - */ /*Colors Dark Red #912d11; Light Brown #ba965d; Green #70664f; Yellow #ffc05c; Orange #d1832a; Dark Brown #4d1901; */ /*-----------Reset----------------------*/ html, body, div, span, applet, object, iframe, h1, 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: "" "";} strong{font-weight:bold;} em{font-style:italic;} html{background:#fff;} body{color:#70664f; font:normal 100%/1.6 Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif/* "Lucida Sans", Lucida, Verdana, Arial, sans-serif */;} a, a:link, a:visited, a:hover, a:active{color:#70664f;} h4{color:#d1832a; display:block; font:italic normal 14px "Lucida Sans", Lucida, Verdana, Arial, sans-serif;} .button{background:#4d1901; border:1px solid #4d1901; color:#fff; cursor:pointer; display:block; height:42px; font:normal 16px/42 "Lucida Sans", Lucida, Verdana, Arial, sans-serif; text-transform:uppercase;} .button:hover{background:#fff; color:#4d1901;} #wrapper{padding:0 20px; overflow:auto; width:960px;} /*Logo*/ h1{background:url(/assets/imgs/graphics/) no-repeat 0 0; height:81px; margin:35px 22.5px 0; text-indent:-99999px; width:176px;} /*Navigation*/ ul#navigation{ float:right; height:71px ;margin:46px 20px 0 0;} ul#navigation li{ display:inline; float:left; margin-right:1px;} ul#navigation li a{background:url(/assets/imgs/graphics/navigation.png) no-repeat 0 0; cursor:pointer; display:block; height:71px; text-indent:-99999px;} ul#navigation li a:hover{} /*Information*/ ul#navigation li#n-information a{background-position:0 0; width:170px; } ul#navigation li#n-information a:hover{background-position:0 100%; } /*Samples*/ ul#navigation li#n-samples a{background-position:-171px 0; width:133px;} ul#navigation li#n-samples a:hover{background-position:-171px 100%;} /*Articles*/ ul#navigation li#n-articles a{background-position:-305px 0; width:133px;} ul#navigation li#n-articles a:hover{background-position:-305px 100%;} /*Contact*/ ul#navigation li#n-contact a{background-position:-439px 0; width:140px;} ul#navigation li#n-contact a:hover{background-position:-439px 100%;} /*Headshot*/ #headshot{display:inline; float:left; margin:46px 0 0 0; position:relative; width:221px;} #headshot h2{background:url(/assets/imgs/graphics/dotted-lines.gif) repeat-x 0 100%; color:#4d1901; font:normal 12px/28px Georgia, "Times New Roman", Times, serif; height:30px; letter-spacing:0.05em; text-align:center;} #headshot h2 em, i.amp {font:italic normal 16px Baskerville, Palatino, "Book Antiqua", serif;} #headshot h2 strong{background: rgba(77, 25, 1, .6); color:#fff; display:block; height:32px; font:normal 18px/32px Georgia, "Times New Roman", Times, serif; letter-spacing:0; position:absolute; bottom:35px; width:100%;} #headshot img{border:1px solid #4d1901;} /*Sections*/ ol#sections{clear:both; margin:431px 20px 0 0; overflow:auto;} ol#sections li{background: url(/assets/imgs/graphics/dotted-line-separator.gif) repeat-x -20px 100%; clear:both; margin-top:50px; overflow:auto; padding-bottom:50px; width:100%; } ul li{margin:0 0 0 0;} /*Headers*/ h3{background:url(/assets/imgs/graphics/section-headers.gif) no-repeat 0 0; color:#ffc05c; display:block; float:left; height:92px; font:normal 30px/120px Georgia, "Times New Roman", Times, serif; text-transform:uppercase; position:relative; text-indent:-99999px;} h3 em{color:#e2e0dc; font-size:120px; letter-spacing:-1em; position:absolute; left:10px; top:0;} #information h3{background-position:-4px 0; width:245px;} #samples h3{background-position: -265px 0; width:157px;} #contact h3{background-position:-429px 0; width:163px;} #footer h3{background-position:-595px 0; width:145px;} #why h3{background-position:-745px 0; width:81px;} #how h3{background-position:-838px 0; width:90px;} #legal h3{background-position:-928px 0; width:113px;} #why h4, #how h4, #legal h4 {float:right; margin-bottom:15px; width:580px;} /*Paragraphs*/ #information p, #why p, #how p, #legal p {color:#70664f; float:right; margin:0 0 15px; width:580px;} #information h3 + p, #why h3 + p, #how h3 + p, #legal h3 + p {margin-top:39px;} /*HI*/ #information p{display:block; position:relative;} #information p.first:first-line{color:#912d11; font-size:90%; text-transform: uppercase;} b.hi{background:url(/assets/imgs/graphics/bg-hi.gif) no-repeat 0 0; display:block; height:36px; text-indent:-99999px; width:54px; position: absolute; top:4px; left:-62.5px;} #information p.testimonial{background: url(/assets/imgs/graphics/left-quote.gif) no-repeat 0 0; color:#ba965d; display:block; padding-left:60px; width:520px;} #information p.testimonial strong{display:block; margin-top:10px;} /*Samples */ #samples p{display:inline; font-size:16px; margin-bottom:15px; } #samples img{display:inline;} #samples ul{display:inline; float:right;} #samples ul li{background:none; display:block; font-weight:bold; font-size:12px; margin: 0 0 0 0; padding:0 0 0 0;} #samples ol li h4{margin-bottom:10px;} /*#samples img{float:right;}*/ #samples ol li{background:none; float:right; margin:0 0 75px 0; width:580px;} #samples ul.tools{display:inline; float:right; font-family:"Lucida Sans", Lucida, Verdana, Arial, sans-serif ; padding-left:15px; width:85px;} #samples ul.tools li{border-left:5px solid #ffc05c; float:right; margin:0 0 0 0; padding:0 0 0 5px; width:80px;} /*--Twitter Project*/ #samples ol li#twitter-project h4{} #samples ol li#twitter-project p{display:block; margin:0 0 10px; width:280px;} #samples ol li#twitter-project img{} /*-- Vector T-shirts*/ #samples ol li#vector-shirts{background:url(/assets/imgs/portfolio/vector-tshirts.jpg) no-repeat 100% 100%; height:440px; padding-bottom:200px;} #samples ol li#vector-shirts h4{background:rgb(255,255,255); background:rgba(255,255,255,0.85); margin-left:300px;} #samples ol li#vector-shirts p{background:rgb(255,255,255); background:rgba(255,255,255,0.85); display:block; margin-left:300px; width:280px;} #samples ol li#vector-shirts ul.tools li{} /*-- AMEX Wishlist*/ #samples ol li#amex-wishlist{} #samples ol li#amex-wishlist h4{ float:left; width:107px;} #samples ol li#amex-wishlist img{display:inline; float:right;} #samples ol li#amex-wishlist p{clear:left; display:block; width:100%;} #samples ol li#amex-wishlist ul.tools{margin-top:-20px;} #samples ol li#amex-wishlist ul.tools li{} /*-- How Magazine*/ #samples ol li#how-magazine{} #samples ol li#how-magazine img{display:block; margin:0 auto;} #samples ol li#how-magazine p{display:block;margin-bottom:15px;} #samples ol li#how-magazine ul.tools{} /*-- QUEST Seminars*/ #samples ol li#quest-seminars{} #samples ol li#quest-seminars p{float:left; display:block; margin:0 0 15px 0; width:160px; } #samples ol li#quest-seminars p.last{margin-left:15px; width:300px;} #samples ol li#quest-seminars img{border:1px solid #4d1901;} #samples ol li#quest-seminars img#q-home{float:right; margin:0 0 5px 5px;} #samples ol li#quest-seminars img#q-courses{float:right; margin:25px 0 15px 5px;} #samples ol li#quest-seminars ul.tools{} /*-- Data Foyer*/ #samples ol li#data-foyer{} /* #samples ol li#data-foyer p{background:#f0f; width:300px;} */ #samples ol li#data-foyer img{border:1px solid #4d1901; float:left; margin:10px 0 0 25px;} #samples ol li#data-foyer img.thumb{float:right;margin:0 0 0 10px;} #samples ol li#data-foyer ul.tools{float:left; margin:10px 0 0 100px; width:80px;} #samples ol li#data-foyer ul.tools li{width:80px;} /*-- Praticos*/ #samples ol li#praticos{} #samples ol li#praticos img{border:1px solid #4d1901; float:left; margin-right:25px;} #samples ol li#praticos ul.tools{float:left; padding-left:5px;} #samples ol li#praticos ul.tools li{margin-left:0;} /*-- VW */ #samples ol li#vw-form{} #samples ol li#vw-form h4{float:left;} #samples ol li#vw-form p{float:left; width:520px;} #samples ol li#vw-form img{float:left; margin-bottom:10px;} #samples ol li#vw-form ul.tools{float:left; margin-left:0; padding-left:5px;} /*-- And More*/ #samples ol li#and-more{} #samples ol li#and-more h4{} #samples ol li#and-more p{} #samples ol li#and-more img{margin-top:15px;} /*Contact Form*/ #contact form, #thanks {float:left; margin:0 0 0 197px; width:220px;} #contact legend, #thanks h4 { color:#d1832a; display:block; font:italic normal 14px "Lucida Sans", Lucida, Verdana, Arial, sans-serif; } #thanks h4{padding-bottom:15px;} #thanks p{color:#70664f;} #contact label{color:#70664f; display:block; font:normal bold 16px "Lucida Sans", Lucida, Verdana, Arial, sans-serif; margin-top:15px; text-transform:uppercase;} #contact label.error{background:#912d11; color:#fff; display:block; margin-bottom:10px; text-transform: uppercase; padding:5px; } #contact input[type=text], #contact textarea {border:1px solid #4d1901; font-size:16px; margin:5px 0 0; padding:5px 0 5px 5px; width:213px;} #contact input[type=text]:focus, #contact textarea:focus {background:#eee;} #contact input[type=text]{height:20px; } #contact textarea{margin-bottom:5px;} #contact .button{float:right;} /*Twitter */ #twitter {float:right; width:260px;} #twitter h4{background:url(/assets/imgs/graphics/dotted-line-separator.gif) repeat-x 270px 100%; padding:0 0 0 20px;} #twitter h4 a{color:#4d1901; display:block; margin:15px 0 0 0; padding:0 0 15px 0; text-decoration:none;} #twitter h4 a:hover{text-decoration:underline;} #twitter p{ background: url(/assets/imgs/graphics/dotted-line-separator.gif) repeat-x 270px 100%; color:#70664f; margin:18px 0 0; padding:0 20px 18px 20px;} #twitter p a {color:#70664f;} #twitter p a:hover{text-decoration:none;} /* Footer */ #footer h4{ margin:0 0 15px;} #footer ul li{background:none; margin:0 0 0 0; padding:0 0 0 0;} #footer a{color:#70664f;} #reading{float:left; margin:0 0 0 215px; width:220px;} #reading img{float:left; width:60px; margin-right:5px;} #reading strong{display:block;} #friends, #clients {float:right; padding:0 20px; width:220px;} #clients{margin:104px 0 0 0;} #skills{float:left; margin:104px 0 0 359px; width:220px;} #skills ul{margin:0 0 0 0; float:left; width:110px;} #skills #languages{} #skills a{clear:both; float:left; margin:24px 0 0;} /*404*/ #four-o-four{background:url(/assets/imgs/graphics/bg-shitter.jpg) no-repeat 95% 100%; clear:both; display:block; float:left; margin:30px 0 50px 360px; } #four-o-four h3{background:url(/assets/imgs/graphics/bg-404.gif) no-repeat 0 0; display:block; height:178px; margin-bottom:25px; text-indent:-99999px; width:404px;}