/*----------------------------------------------------------------- - theme: Simply The Web - main - uri: screen.css - author: Darko Lončar - Stonesurfer - last modified: 23.02.2009 - version: 0.1 -------------------------------------------------------------------*/ /*Printer style*/ @media print { * { background: #fff; color: #222 } html { font: 100%/1.5 Helvetica, Arial serif } } /* CSS Reset */ * { margin: 0px; padding: 0px } /* Globals */ html { } body { font: 62.7%/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff url('gfx/background.jpg') } /* Links */ a { color: #00f } a:visited { color: #555 } a:active { color: #000 } h2 { clear: both; font: italic 2.4em/1.7em Georgia, serif; color: #000; padding: 0px 0px; margin: 10px 20px; border-bottom: 1px solid #999; border-top: 1px solid #999 } h3 { clear: both; font: bold italic 1.4em/1.7em Georgia, serif; color: #000; padding: 0px 0px; margin: 10px 20px } p { font-size: 1.3em; line-height: 1.4em; margin: 0px 20px 10px 20px; color: #333 } /* Images */ img { border: 0px; display: inline } img.social { clear: both } img.sign { padding-right: 12px } img.thumb { width: 128px; float: left; padding-right: 12px; padding-top: 12px } img.front { padding: 10px; background: #fff; border: 1px solid #eee; -webkit-box-shadow: 0px 0px 16px #333;-moz-box-shadow: 0px 0px 16px #333 } /* Classes */ .space_lt { margin-left: 24px } .sub_text { font-size: 0.6em; color: #666; font-variant: small-caps; line-height: 0.6em; font-style: normal } /* Skipper */ #skip { position: absolute; left: -9999px; top: -9999px } /*Navigation Block*/ #navigation { width: 100%; height: 50px; background: #000 url('gfx/menu_back.png') } #navigation ul { margin: 0px auto; width: 960px; text-align: right } #navigation li { display: inline; list-style-type: none } #navigation a { font: bold 1.4em/50px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; padding: 5px 15px; margin: 0px 14px; text-decoration: none; font-variant: small-caps } #navigation a:hover { text-decoration: none; background: #666; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px } #navigation a.current { background: #db9321; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px } /* Content wrapper */ #wrap { margin: 0px auto; width: 960px } /* Brand */ h1#brand { margin: 45px 0px 5px 10px; width: 410px; height: 55px; text-indent: -9999px; font-size: 0em; line-height: 0em; background: transparent url('gfx/simplytheweb.png') 10px 0px; background-repeat: no-repeat } /* Showcase */ #showcase { float: left; width: 960px; padding: 20px 0px } /* Spotlight */ #spotlight { float: right; width: 482px; height: 300px; background: transparent url('gfx/photo_back.png'); padding: 0px; margin: 0px } #spotlight img { width: 430px; height: 240px; background: #fff; margin: 30px 0px 20px 28px } /* Info */ #info { float: left; width: 448px; height: 300px } #info p { font: bold 1.3em/1.5em Arial; color: #333; padding: 10px 20px; margin: 0px 0px 8px 0px; font-variant: small-caps } #info a#portfolio_button { font: bold 1.6em Arial, sans-serif; float: left; padding: 15px; color: #fff; width: 200px; text-align: center; margin: 8px 40px 20px 20px; border: 1px solid #ca8210; background: #db9321; text-decoration: none; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -webkit-box-shadow: 0px 0px 16px #aaa; -moz-box-shadow: 0px 0px 16px #aaa; background: -moz-linear-gradient(top, #db9321, #a86000 25px) } #info a#portfolio_button:hover { background: #eca432; background: -moz-linear-gradient(top, #eca432, #b97111 25px) } /*Boxes*/ .box { float: left; width: 290px; padding: 10px; background: #fff; margin: 0px 5px 20px 5px } .box h2 { clear: both; font: italic 2.4em/1.7em Georgia, serif; color: #000; padding: 0px; margin: 10px 0px; border-bottom: 1px solid #999; border-top: 1px solid #999 } .box p { font-size: 1.3em; color: #333; margin: 16px 0px 8px } /*Portfolio entries*/ .work { display: block; float: left; width: 450px; height: 270px; background: #fff; border: 1px solid #ccc; margin: 10px 0px 10px 20px; text-align: center; padding-top: 10px } .work p { font-variant: small-caps; text-align: left; padding-left: 10px; margin: 0px 10px; background: #000; color: #fff } .work a { font-variant: normal; color: #ca8210; text-decoration: none; font-weight: bold } .work a:hover { color: fff } /*Footer*/ #footer { width: 100%; clear: both; padding: 10px 0px 10px 0px; height: 100% } #footer p { text-align: center; color: #000; font-weight: bold; font-variant: small-caps } /* 2 column layout pages */ #left { float: left; width: 600px; border-right: 1px solid #999 } #right { float: right; width: 358px } /*Forms*/ form p { margin: 12px 20px 18px 20px } input.txt, textarea { padding: 4px; border: 1px solid #999; font: normal 1em "Helvetica Neue", Helvetica, Arial, "Sans-Serif"; color: #333; -khtml-border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #fff; } input.txt:hover, textarea:hover, input.txt:focus, textarea:focus { border: 1px solid #666 } label { font: bold 1em "Helvetica Neue", Helvetica, Arial, "Sans-Serif" } input.button { font: bold 1em "Helvetica Neue", Helvetica, Arial, "Sans-Serif"; padding: 4px } blockquote { margin: 18px 68px 18px 48px; padding: 28px; font: italic 1.4em/1.5em "Georgia", serif; background: #fff; color: #666; line-height: 1.7em; text-shadow: #ccc 1px 1px 1px; border-left: 1px solid #ccc } /* Clearfix */ .clearfix:after { clear: both; content: " "; display: block; font-size: 0; line-height: 0; height: 0; visibility: hidden; width: 0; } /* input[type=text] */ /* -khtml-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; */ /* -webkit-box-shadow: 0px 0px 16px #333;-moz-box-shadow: 0px 0px 16px #333 */ /* -khtml-border-bottom-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px */ /* text-shadow: #999 0px 0px 2px */ /* ul { list-style: square inside url('image.png') } */ /*@font-face { font-family: [FONT NAME]; src: url('[URL]') }*/