/************************************************ FILE: layout.css DESCRIPTION: file defines layout - Dimensions, display, floats, position, background, borders etc 1. = PAGE LAYOUTS 2. = GENERIC CONTENT LAYOUT (ALL Pages) 3. = MULTI PAGE CONTENT LAYOUT (SOME Pages) ************************************************/ /************************************************ 1. = PAGE LAYOUTS ************************************************/ /* HIGHEST LEVEL */ body {padding:0 26px 26px 26px; text-align:center; background:#efefef url(../img/bg_content/bg_page.jpg) center 0; font-family:"Times New Roman", serif;} /* HEADER */ #shadows {margin:0 auto; width:940px; padding:0 50px; background:url(../img/bg_content/bg_shadows.png) no-repeat;} #header {width:940px; height:270px; overflow:hidden; text-align:left; margin:0 auto; text-align:center; position:relative;} #logo {margin:30px auto 0; display:block; width:118px; height:165px;} /* Intro Text */ #intro {width:289px; position:absolute; bottom:6px; left:4px; text-align:left; color:#191919;} #intro p {font-size:12px; line-height:16px; color:#231f20; margin:0 0 20px 0; font-style:italic; font-weight:bold; font-size:14px;} #intro p strong {font-size:12px; margin:0;} /* Main Nav */ #navMain {position:absolute; right:0; bottom:29px; margin:0; padding:0; } #navMain li {float:left; margin:0; padding:0; list-style-type:none; position:relative;} #navMain a, #navMain a:link {display:block; height:19px; text-indent:-9999px; overflow:hidden;} #navMain a:hover, #navMain a:focus, #navMain a:active {color:#fff;} #navMain .home {background: url(../img/header/nav_sprite.png) no-repeat 0 0; width:52px;} #navMain .home:hover, #navMain strong .home {background: url(../img/header/nav_sprite.png) no-repeat 0 -19px;} #navMain .download {background: url(../img/header/nav_sprite.png) no-repeat -52px 0; width:146px;} #navMain .download:hover, #navMain strong .download {background: url(../img/header/nav_sprite.png) no-repeat -52px -19px;} #navMain .contact {background: url(../img/header/nav_sprite.png) no-repeat -198px 0; width:98px;} #navMain .contact:hover, #navMain strong .contact {background: url(../img/header/nav_sprite.png) no-repeat -198px -19px;} /* Tag Line */ #tag {background: url(../img/header/brand_and_stuff.png) no-repeat 0 0; text-indent:-9999px; overflow:hidden; width:936px; height:29px; display:block; margin:10px 0; padding: 0;} /* TEMPLATE AREA */ #template {width: 940px; margin:0 auto; text-align:left; background: url(../img/header/dots.png) repeat-x 0 top; padding-top:20px;} /* FOOTER */ #footer {width:940px; padding:9px 4px 0 4px; margin:0 auto;} #footer small {color:#505050; font-size:11px;} #footerLinks {margin:0 195px 0; float:left;} #footerLinks li {float:left; height:51px; list-style:none; position:relative; margin-right:15px; line-height:51px;} #footerLinks li a {display:block;} #footerLinks .blog {background: url(../img/content/blog.png) no-repeat 0 0; width:51px; text-indent:-9999px; overflow:hidden; height:51px;} #footerLinks .blog:hover {background: url(../img/content/blog_ro.png) no-repeat 0 0;} #footerLinks .moyMadeThis {background: url(../img/content/moymadethis.png) no-repeat 0 0; width:51px; text-indent:-9999px; overflow:hidden; height:51px;} #footerLinks .moyMadeThis:hover {background: url(../img/content/moymadethis_ro.png) no-repeat 0 0;} #footerLinks .precept {background: url(../img/content/precept.png) no-repeat 0 0; width:51px; text-indent:-9999px; overflow:hidden; height:51px;} #footerLinks .precept:hover {background: url(../img/content/precept_ro.png) no-repeat 0 0;} /************************************************ 2. = GENERIC CONTENT LAYOUT (ALL Pages) ************************************************/ /* QUICKFIX Classes */ .hide {display: none;} .floatL {float: left;} .floatR {float: right;} .clear {clear:both; font-size:1px; height:1px; line-height:1px; margin:0px; padding:0px; width:100%;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* TYPOGRAPHY */ h1, h2 , h3, h4, h5, h6 {margin:0; padding:0;} h1 {margin:0 0 20px 0;} /* LISTS */ ul, ol {padding: 0 0 16px 16px; } ul ul, ol ol {padding: 8px 0 8px 16px;} ul li {padding: 0 8px 0 0; list-style-type:square;} ul li li {list-style-type:circle;} ol li {list-style-type: decimal; margin-left:16px;} ol li li {list-style-type: lower-alpha;} dl {float:left; display:block; margin:8px 0;} dt {width:80px; float:left; clear:left; margin:4px 0; padding-left:16px;} dd {width:300px; float:left; clear:right; margin:4px 0;} /* MISC */ a, a:link, a:visited {color:#2c2b2b; text-decoration:none;} a:hover, a:focus, a:active {color:#000;} /************************************************ 3. = MULTI PAGE CONTENT LAYOUT (SOME Pages) ************************************************/ /* Selected Works */ #selectedWorks h2 {color:#2c2b2b; font-size:16px; margin:0 0 12px 0; color:#231f20; font-style:italic; font-weight:bold; } #selectedWorks ul {margin:0; padding:0;} #selectedWorks li {padding:0; margin:0 56px 22px 0; list-style-type:none; float:left;} #selectedWorks .rightMost {margin-right:0;} #selectedWorks a, #selectedWorks a:link, #selectedWorks a:visited {display:block; width:271px; height:182px; overflow:hidden; text-decoration:none; background:url(../img/bg_content/selected_works_active_2.png) 0 0; position:relative;} #selectedWorks a:hover, #selectedWorks a:focus, #selectedWorks a:active {background:url(../img/bg_content/selected_works_2.png) 0 0;} /* Its Content */ #selectedWorks * {line-height:16px;} #selectedWorks img {margin:10px 0 5px 10px; border:none;} #selectedWorks h3 {font-size:12px; margin:0 0 3px 12px; font-weight:normal; color:#333; text-decoration:none;} #selectedWorks a:hover h3 {color:#000;} #selectedWorks h3 strong {color:#fff; font-weight:normal;} #selectedWorks small {display:block; bottom:25px; margin:0 0 0 12px; color:#fff; font-size:11px;} #selectedWorks a:hover small {color:#f0f894;} /* About Me */ #about h2 {color:#2c2b2b; font-size:19px; font-weight:bold; margin:0 0 12px 0; font-style:italic; font-weight:bold; } #about h3 {color:#191919; font-size:14px; margin:0; padding:0; line-height:20px; font-style:italic; font-weight:bold; } #about p {color:#191919; font-size:12px; padding:0; margin:0 0 18px 0;} #about .img {float:left; width:200px; height:174px; padding:10px 0 0 10px; margin:0 31px 0 0; background: #0f0f0f url(../img/bg_content/about.jpg) 0 0;} #about .copy {float:left; width:483px;} /* The Adress */ #about address {float:right; display:block; margin:0 110px 18px 0; display:block; width:180px; color:#191919; line-height:16px; font-style:normal; font-size:12px;} #about address strong {font-size:14px; color:#191919; font-style:italic; font-weight:bold; } #about address a, #about address a:link, #about address a:visited {font-size:14px; color:#191919; text-decoration:none; font-size:12px;} #about #back {display:block; clear:both; text-align:right; font-size:12px; font-weight:bold; margin:0 15px 12px 0;} /* Project */ #project h1 {color:#2c2b2b; font-size:19px; font-weight:normal; margin:0 0 12px 0; font-style:italic; font-weight:bold; } #project h1 strong {font-weight:bold;} #project h2 {font-size:14px; color:#191919; line-height:16px; font-style:italic; font-weight:bold; } #project p {font-size:12px; line-height:16px; color:#191919; margin:0 0 18px 0;} #project #back {display:block; clear:both; text-align:right; font-size:12px; margin:0 15px 12px 0;} /* Media */ #project #media {position:relative; float:left; width:568px; height:387px;} #project #media img {position:absolute; top:0; left:0; margin: 0 23px 0 0; padding:10px; background: #131313 url(../img/bg_content/about.jpg) 0 0 no-repeat;} #project #media ul {position:absolute; top:366px; left:0; margin:0; padding:0;} #project #media li {float:left; margin:0 2px 0 0; padding:0; list-style-type:none;} /* The links */ #project #media a:link, #project #media a:visited {display:block; width:26px; height:22px; line-height:22px; text-align:center; font-size:12px; font-weight:bold; color:#fff; background: #131313 url(../img/bg_content/about.jpg) -10px -10px no-repeat;} #project #media a:hover, #project #media a:focus, #project #media a:active {background:url(../img/bg_content/selected_works_active.png) -10px -10px no-repeat;} #project #media .active a:link, #project #media .active a:visited, #project #media .active a:hover, #project #media .active a:focus, #project #media .active a:active {cursor:default; background:url(../img/bg_content/selected_works_active.png) -10px -10px no-repeat;}