/* * Filename: style.css * Version: 0.7 (2010-07-08) * Website: http://www.brokenkode.com/ * Author: Khaled Abou Alfa * Description: Broken Kode :: No8 - 6 Years design. To infinity and beyond! */ /* Formula: Element(px) / 16(px) = Element(em) 750px / 16px = 46.875em 650px / 16px = 40.625em 550px / 16px = 34.375em 450px / 16px = 28.125em 11px / 16px = 0.6875em 12px / 16px = 0.75em 13px / 16px = 0.8125em 14px / 16px = 0.875em 550 / 750 = 73.333% 500 / 750 = 66.666% 480 / 750 = 64% */ /* General Settings ----------- */ * {margin:0; padding:0;} html {overflow-y:scroll;} body {background-color:#040f1a; color:#7e7e7e; font-family:Verdana, Geneva, Tahoma, sans-serif; padding:0; font-size:100%; line-height:0.875em; } /* Navigation ----------------- */ #BGOpenClose {background: transparent url(images/menu_pointer.png) no-repeat center 0; height: 30px; margin: -7px 0 0 0; padding: 10px 0 0 0; font-style: normal; font-weight: normal; font-size: 1.1em; } #Navigation {background-color: #5f0000; } #NavigationContent {color: #190606;} #OpenClose {width:100%; text-align: center; border-top: 7px solid #5F0000; height: 20px; background: transparent url(images/bgshelf.png) repeat-x center 0; padding-top: 10px; } #OpenClose a {font-style: normal; font-weight: normal; color: white; font-size: 0.625em; height: 30px;} #OpenClose a:hover {background-color: #040f1a; color: #b8b8b8;} /* Links ---------------------- */ a {color: white; text-decoration:none;} a:visited {} a:hover {text-decoration:none; color: #464646; background-color: white;} p {font-size:0.6875em;line-height: 1.66666em; margin-bottom: 0.88888888em; } strong {margin:140px 0 40px 0; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; clear: both; } blockquote {width: 28em; margin: 1.6666666em auto; padding: 5px 35px 0 35px; line-height:1.5em; background: url(images/openquote.png) no-repeat left top; } /* Headings ------------------- */ h1 {padding:0; margin:0;} h2 {font-weight: normal; text-transform: uppercase; letter-spacing: 2px; font-size: 0.6875em; clear: both; margin: 1.666666em 0 0 0;} h3, h4 {font-weight: normal; letter-spacing: 2px; padding: 55px 0 10px 0; } h3 {text-transform: uppercase; font-size: 0.6875em;} h4 {font-style: italic; font-size: 0.625em;} #CommentFormat h2 {text-transform:none; letter-spacing: 0; clear: both; margin: 0;} /* Site Logo ------------------- */ h1#SiteTitle {display: block; width: 200px; height: 80px; text-indent: -9999px; margin: 110px auto 110px auto; background: transparent url(images/logo_title.png) no-repeat center 0; } h1#SiteTitle a {display: block; width:200px; height: 80px; outline: none; background: transparent url(images/logo_title.png) no-repeat -299 0 0 0; } h1#SiteTitle a:hover {display: block; background: transparent url(images/logo_title_hover.png) no-repeat center 0;} h2.Title {text-align: center; margin: 0 auto 20px auto; font-family: "Vegur", "League_Gothic", "Gill Sans", Verdana,"Bitstream Vera Sans",sans-serif; font-size: 1.3em;} /* Structure ----------------- */ #PageNav, #Navigation .Links1 ul li, #Navigation .Links2 ul li, .NavigationSidebar ul li, #Toggle, .previous, .next, .commentauthor, .owner, #Tweet, .success, .error, .Separator, .AsidePost {font-size: 0.6875em;} #NavigationContent, .Permalink, #PageNav, #Toggle, .commentauthor, .owner, #name, #email, #url, .success, .error, #Footer, .SearchResults, #pagenav, .error, .Again , #Featured {text-align: center;} #Wrapper {max-width: 46.875em; margin: 0 auto; padding: 0 1em;} #NavigationContent {max-width:34.375em; padding: 0 1em; } #Header, #Content, #Footer {width:66.666%; margin: 0 auto; } #PrimaryContent, #Comments, #NavigationContent { margin:0 auto;} #Content, #Footer, #Comments, .Clear {clear: both;} #PageNav, .SearchResults, #pagenav, .error, .Again, .SearchEntry {margin: 0 0 90px 0;} #Footer {padding: 0 0 50px 0;} #Wrapper {border-top:1px solid #040f1a; /* background: transparent url(images/201002_BG_01.png) no-repeat center 0; */} #Comments {padding: 70px 0 0 0;} .Permalink {background: transparent url(images/permalink.png) no-repeat center 0; } #Information h2 {margin:20px 0 20px 0; font-size: 2.5em; } #About {width: 20em; line-height: 1em;} #Information {float:right; text-align: left; padding:20px 0 0 0; width:50%;} .Links1, .Links2 {padding:20px 0 0 0; float:left; text-align: right; width:25%; } #IllustrationContent {text-align: center; width: 100%; margin: 0 auto; } #IllustrationContent img {max-width: 100%;} .IllustrationSingle {margin: 0 0 5px 0;} .IllustrationSingle img {max-width: 100%;} /* Navigation ------------------ */ #Navigation .Links1 ul li, #Navigation .Links2 ul li {margin:0 0 10px 0; list-style-type: none; padding: 0 15px 0 0; letter-spacing: 1px; font-family: "Gill Sans", Verdana,"Bitstream Vera Sans",sans-serif; } #Navigation .Links1 ul li a, #Navigation .Links2 ul li a {text-transform: uppercase; font-style: normal; font-weight: normal; padding:0; margin: 0; } #Navigation .Links1 ul li a:hover, #Navigation .Links2 ul li a:hover {color:#5f000; border-bottom:none; background-color: #fff; padding-left: 5px;} #Navigation .Links1 ul li a:visited, #Navigation .Links2 ul li a:visited {font-style: normal;} .FeaturedNav {margin: 0 auto 80px auto; text-align: center; } .FeaturedNav p {margin: 0;} .FeaturedNav ul li {list-style-type: none; padding: 0 10px; display: inline; font-size: 0.6875em;} .Separator {clear: both; text-align: center; border-top: #404040 1px solid; margin:0 auto 75px auto; padding: 10px 0 0 0; background: transparent url(images/comment.png) no-repeat center top; width: 100%} .Entry .Separator {clear: both; text-align: center; border-top: #404040 1px solid; margin:0 auto 25px auto; padding: 10px 0 0 0; background: transparent url(images/comment.png) no-repeat center top; width: 100%;} /* Structure & Post ------------ */ .Posts, .Asides, .SearchPost, .FeaturedPosts {margin-bottom: 6em; clear:both;} .Asides, .SearchEntry {font-style: italic; } .AsidePost {line-height: 1.66666em; word-spacing:1px;} .Asides blockquote {font-size: 1em; font-style: normal; width: 31em;} .Entry blockquote {font-size: 1em;} .Posts a, .Asides a, .SearchPost a, .FeaturedPosts a {border-bottom-color: #a7ced3; border-bottom:1px dotted;} .asides img {background-color: #05080d; clear:both; border:1px solid #255b87; padding: 5px 0; max-width: 100%;} .Posts img, .FeaturedPosts img, .PostSingle img, .AsidePost img , .Entry p img {clear:both; padding: 5px; height: auto; display: block; margin: 0 auto; border: solid 1px #7e7e7e; max-width: 100%;} #FeaturedProjects {margin: 5px auto; width: 600px; border-bottom: 1px solid #7e7e7e; border-top: 1px solid #7e7e7e;} #FeaturedProjects ul li { text-align: center; border:1px solid white;} #FeaturedProjects ul li a {width:150px;display: inline;} #Sidebar {text-align: right; width: 12em; margin: 30px 0 0 0; float: left; } .Entry ol {font-style: italic; list-style:decimal-leading-zero; font-size: 0.6875em; color: white; padding: 0 25px 20px 25px; color:#7e7e7e ; line-height: 17px;} .Entry ol p, .ArchivesEntry ol p {font-style: normal; color:#7e7e7e;font-size: 1em; margin: 5px 0;} .Entry ul li { font-size: 0.678em; padding-left: 15px; margin: 0 0 5px 15px} .Entry ul {margin-bottom: 30px;} .ArchivesEntry ul li {list-style-type: none; margin-bottom: 5px; } .FurtherLinks { margin: 0 0 30px 0; /* padding: 10px 0 0 0; border-top: 1px solid #404040; */ text-align: center;} /* Archives ------------ */ #monthly_archives li {margin-top: 10px; font-size: 0.75em;} ul#monthly_archives li a { text-align: center;} #monthly_archives li ul.archive_entry li { font-size: 0.875em; } ul.archive_entry { margin-bottom: 50px; border-top-width: 1px; border-style: dotted; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; margin-top: 15px; } .Cal {padding: 0; margin:0; } .Calendar { margin:0;} .AsidesCal {margin: 0; font-size: 0.5em;} .Title {font-size: 0.6875em; margin: 0;} .PostSingle h2 {font-style: normal; font-weight: normal; padding: 10px 0 0 0; font-size: 1.5em; font-family: "Gill Sans", Verdana,"Bitstream Vera Sans",sans-serif; } .PostSingle .Calender {padding:15px 0 10px 0; margin:0 auto; border-bottom: 1px solid #7e7e7e; width: 20em;} .previous {float:left;} .next {float:right;} #comments_form, .comment-content {margin: 50px 0 0 0;} .commentauthor, .owner {padding:10px 0 30px 0;} .commentauthor {border-top: 1px solid #404040; background: transparent url(images/comment.png) no-repeat center top; } ul#commentlist ol.commentlist li.comments {list-style-type: none;} .owner {border-top: 1px solid #ffffff; background: transparent url(images/me.png) no-repeat center top;} label {float: left; width:45%; text-align: right; } input {float:right; padding: 0; margin: 0; width: 45%;} textarea {width: 100%; height:15em;} #name, #email, #url {margin: 0 auto; width:100%; clear: both; padding: 0 0 30px 0;} .submit input {width: 25%;} #Tweet {float: left;} #Search input {float: none; margin: 70px 0 0 0;} #Copyright {font-size: 0.875em; margin: 0 0 50px 0;} .success, .error {padding: 5px 0; margin: 30px 0;} .error {color: #7a140d; margin: 50px 0 30px 0;} .Again {width: 15em; margin: 0 auto;} #Information {float: none; width: 100%; text-align: center; clear: both;} .Links1 {float: left; width: 50%; } .Links2 {float: right; text-align: left; width: 50%;} #About {float: none; width: 60%; text-align: center; margin: 0 auto 10px auto;} #Navigation {border-bottom: 1px solid #5f0000;} div.Calender { margin-top: 10px; } #CommentFormat h2 { margin-top: 10px; font-size: 1em; } #comment_email { margin-bottom: 5px; } #comment_url { margin-bottom: 5px; } div.formcontrol input { margin-top: 5px; } #comment_name { margin-bottom: 5px; } div.formcontrol label { font-size: 0.75em; margin-top: 9px; } #Tweet { margin-top: 5px; } form p label { width: 100%; text-align: left; padding-bottom: 10px; } @media screen and (max-width: 480px) { #Information {float: none; width: 100%; text-align: center; } #About {float: none; width: 75%; text-align: center; margin: 0 auto 10px auto;} #Navigation {border-bottom: 1px solid #5f0000;} .FeaturedNav ul li { padding: 0 5px 0 0; } #Header, #Content, #Footer {width: 100%; font-size: 1em; padding: 0;} blockquote {width: 50%; margin: 1.6666666em auto; padding: 5px 35px 0 35px; line-height:1.5em; background: none; } } @media screen and (max-width: 480px) { html {-webkit-text-size-adjust: none;} }