body { background: #101010; color: white; font-family: "Helvetica Neue", "Arial", "Helvatica", sans-serif; font-size: 14px; overflow: hidden; } a { text-decoration: none; } p a { display: inline !important; color: #acf; } p a:hover { color: #fff; } #page { position: absolute; top: 40%; margin-top: -230px; width: 100%; } #container { padding-top: 20px; } #wrapper { background: #101010; } #header { position: relative; background: #0082bf; height: 308px; } #header a { display: block; height: 308px; width: 308px; } #header a:hover { background: rgba(255,255,255,0.1); } #header img { padding: 0; margin: 0; position: absolute; bottom: 18px; right: 20px; } #footer { background: #333; color: black; text-align: right; height: 28px; } #footer p { margin: 0 10px; } .sg-5, .sg-7, .sg-11, .sg-17, .sg-35 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a, .sg-35 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .sg-5 { height: 140px; } .sg-5 a { position: relative; display: block; color: white; height: 140px; width: 140px; } .sg-7 { height: 196px; } .sg-7 a { position: relative; display: block; color: white; height: 196px; width: 196px; } .sg-11 { height: 308px; } .sg-11 a { display: block; height: 308px; width: 308px; } .sg-17 { height: 476px; } .sg-17 a { display: block; width: 476px; height: 476px; } .about { background-color: #99BF00; } .portfolio { background-color: #C03232; } .contact { background-color: #777; } .about a:focus, .portfolio a:focus, .contact a:focus { background: rgba(255,255,255,0.1); } .about a:hover, .portfolio a:hover, .contact a:hover { background: rgba(255,255,255,0.2); } .about a span, .portfolio a span, .contact a span { position: absolute; top: 10px; right: 20px; } .category { position: relative; } .category a, .photo a { display: block; color: white; text-decoration: none; } .category a .arrow { position: absolute; font-size: 2em; bottom: 20px; left: 20px; } .category a:focus, .photo a:focus { background: rgba(255,255,255,0.1); } .category a:hover, .photo a:hover { background: rgba(255,255,255,0.2); } .blank-category, .blank-photo { background: #222; outline: 1px dashed #444; } .category h3 { position: absolute; top: 16px; right: 0; text-align: right; margin: 0 20px; font-weight: normal; font-size: 1.1em; line-height: 1em; } img { } .page-links { background: #666; } .prev-link, .next-link { color: white; font-size: 2em; position: relative; display: block; } .prev-link div, .next-link div { position: absolute; bottom: 15px; } .prev-link div { left: 20px; } .next-link div { right: 20px; } .prev-link:hover, .next-link:hover { background: rgba(255,255,255,0.2); } .about-content { background: #444; color: #ccc; } .about-content div { padding: 15px 20px; } .about-content div p { margin-bottom: 0.6em; line-height: 1.4em; } /* FORM */ .contact-form { background: #ddd; } .field_with_errors { display: inline; } form { padding: 10px 20px; } form p { margin: 10px 0; } form p { color: #555; } form label { color: #666; display: block; width: 100px; float: left; } form textarea { height: 150px; width: 315px; } form textarea, form input[type='text'] { font-family:"Helvetica Neue","Arial","Helvatica",sans-serif; font-size:14px; padding: 3px; color: #333; border: 2px solid #999; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #alert { background: #fffeef; color: #664400; border-width: 2px 0; border-style: solid; border-color: #996600; padding: 0 10px 2px; margin-top: 15px; } #notice { background: #efffef; color: #446600; border-width: 2px 0; border-style: solid; border-color: #669900; padding: 0 10px 2px; margin-top: 15px; } .field_with_errors input, .field_with_errors textarea { background: #ffefef; border-color: #cc3333 !important; } form input[type='submit'] { background: #666; font-family:"Helvetica Neue","Arial","Helvatica",sans-serif; font-size:14px; padding: 3px; color: white; border: 2px solid #333; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }