/* GATEWAY CSS/CORE Copyright (c) 2009, Ernesto Mendez http://der-design.com */ body { } /* GLOBAL CLASSES */ .upper, .xtitle { text-transform: uppercase; } a.readmore { white-space: nowrap; } .container { position: relative; width: 860px; padding: 0 59px; background: url('../images/bg-middle.png') repeat-y; margin: 0 auto; z-index: 1; } #content, #portfolio, .wrap { height: auto !important; height: 300px; min-height: 300px; } /* HEADER */ #header { position: relative; z-index: 100; width: 860px; height: 147px; padding: 9px 59px 0; background: url(../images/bg-top.png) top no-repeat; margin: 11px auto 0; } #header a.logo { position: absolute; top: 27px; left: 57px; width: 320px; height: 77px; display: block; } #header a.rdd { position: absolute; top: 25px; left: 440px; width: 108px; height: 92px; display: block; } #header a.nvs { position: absolute; top: 55px; left: 733px; width: 250px; height: 53px; display: block; } #header .language { position: absolute; top: 46px; left:865px; display: block; } #header #header-sep { position: absolute; top: 166px; width: 860px; height: 7px; background: #ff6801; xbackground:#8a3b92; font-size: 0; /* IE6 Fix */ } #header ul li { list-style: none; background: none; } /* NAVIGATION, Values with () are linked/related */ #header ul#navigation { /* Navigation Top Coordinate */ top: 112px; /* Equal to the Links Separation (5) */ right: -30px; } #header ul#navigation li ul li a.alt { /* Alternating Color for Menus */ background-color: #fb9b40; } #header ul#navigation { position: relative; float: right; margin: 0; padding-top: 17px; z-index: 3; /* Menu Font Family */ font-family: "Trebuchet MS"; xfont-family: Verdana, Arial, Helvetica, sans-serif; /* Menu Font Size */ font-size: 15px; /* Menu Link Kerning */ letter-spacing: 1.25px; /* Menu Text Transform */ text-transform: uppercase; /* Menu Background */ background: none; } #header ul#navigation li { float: left; margin: 0; padding: 0; } #header ul#navigation li a { display: block; padding: 0 0 20px 0; /* Menu Links Separation (right) (5) */ margin: 0 30px 0 10px; /* Normal Menu Link's Color (2) */ color: #241e1e; /* Menu Height (1) */ line-height: 15px; /* Menu Font Weight */ font-weight: bold; } #header ul#navigation li a:hover { /* Normal Menu Link's Color (Hover) (2) */ /* color: #534c4f; per tatsuo's request */ color: #f76405; /* Menu Link's Text Decor (Hover) (2) */ text-decoration: none; } #header ul#navigation li a.active { /* Menu Link's Active Color (3) */ color: #ff6801; } #header ul#navigation li a.active:hover { /* Menu Link's Active Color (Hover) (3) */ color: #ff6801; } #header ul#navigation li ul { position: absolute; margin: 0 0 0 0; /* Submenu Padding (to keep hover) (1) */ padding: 0 0 0 0; /* Submenu Font Size */ font-size: 13px; /* Submenu Link Kerning */ letter-spacing: 0.4px; /* Submenu Top Offset (1) */ top: 35px; /* Set to block to Show Submenus */ visibility: hidden; /* Outer Menu Width (4) */ width: 190px; /* Submenu Text Transform */ text-transform: uppercase; /* Submenu Background */ background: none; } #header ul#navigation li:hover > ul { visibility: visible; } #header ul#navigation li ul li { position: relative; display: block; margin: 0; padding: 0; height: auto; } #header ul#navigation li ul li a { float: none; display: block; height: 100%; margin: 0; /* Submenu Font Weight */ font-weight: bold; /* Submenu Link Width (4) */ width: 170px; /* Submenu Link Horizontal Padding (4) */ padding: 0 10px; /* Submenu Link Height */ line-height: 35px; /* Submenu Link Color */ color: white; /* Submenu Link Background */ background: #ff8a2d; } #header ul#navigation li ul li a:hover, #header ul#navigation li ul li.dir:hover > a { /* Submenu Link's Color (Hover) */ color: #665555; /* Submenu Link's Background (Hover) */ background: #ffdcb9; } #header ul#navigation li ul li ul { position: absolute; top: 0px; margin: 0; padding: 0; /* Submenu Left Offset (4) */ left: 190px; } /* CUB3R */ #cub3r-container { width: 860px; height: 332px; padding: 17px 59px 0; background: url(../images/bg-middle.png) repeat-y; } #cub3r-container #cub3r { } #cub3r-container #cub3r a.getflash { display: block; height: 860px; text-align: center; } #cub3r-container #cub3r a.getflash img { margin-top: 175px; } /* FEATURED */ #featured { position: relative; z-index: 1; width: 860px; height: 379px; padding: 17px 59px 0; background: url(../images/bg-middle.png) repeat-y; margin: 0 auto; } #featured .loader { display: none; position: absolute; z-index: 6; right: 69px; bottom: 4px; } #featured .trans { position: absolute; z-index: 3; width: 860px; height: 332px; padding-top: 17px; } #featured .trans li img { } #featured .progress { position: absolute; z-index: 4; bottom: 30px !important; bottom: 29px; display: block; width: 860px; height: 5px; font-size: 0; } #featured .progress .bar { display: block; font-size: 0; width: 0px; height: 5px; background: url(../images/interface/progress-bg.png) repeat-x; } #featured .separators { position: relative; z-index: 5; top: 17px; } #featured .separators li { position: absolute; display: block; width: 10px; height: 332px; background: url(../images/bgcolor.jpg) repeat; } #featured .separators .left { left: 282px; } #featured .separators .right { left: 568px; } #featured .separators .pause { display: none; left: 10px; top: 10px; width: 40px; height: 40px; background: url(../images/icons/pause-icon.png) center no-repeat; } #featured .slides { display: none; position: absolute; z-index: 4; top: 17px; left: 59px; width: 860px; height: 332px; overflow: hidden; } #featured .slides li { position: absolute; top: -332px; display: block; width: 282px; height: 332px; overflow: hidden; } #featured .slides li img { position: relative; display: block; } #featured .slides .s1 { left: 0px; background-position: 0 0; } #featured .slides .s2 { width: 276px; left: 292px; background-position: -292px 0; } #featured .slides .s2 img { left: -292px; } #featured .slides .s3 { left: 578px; background-position: -578px 0; } #featured .slides .s3 img { left: -578px; } #featured .meta { position: absolute; z-index: 2; bottom: 0px; width: 860px; height: 30px; background: #e2e7ea; } #featured .meta a.info { position: absolute; left: 20px; line-height: 30px; font-weight: normal; color: #ff380a; letter-spacing: 0.7px; } #featured .meta a.info:hover { text-decoration: none; } #featured .meta a img { display: block; position: relative; top: 10px; /* IE6/7 Fix */ } #featured .meta a.left, #featured .meta a.pause, #featured .meta a.right { position: absolute; display: none; width: 6px; height: 30px; padding: 0 10px; line-height: 30px; bottom: 0px; } #featured .meta a.right { right: 5px; } #featured .meta a.pause { right: 30px; } #featured .meta a.left { right: 55px; } /* INTERACTIVE */ #interactive { position: relative; z-index: 1; width: 860px; height: 123px; padding: 0 59px 0; background: url(../images/bg-middle.png) repeat-y; margin: 0 auto; } #interactive div { position: relative; height: 123px; float: left; background: url(../images/interface/horizontal-separator.png) no-repeat center bottom; } #interactive .twitter { width: 573px; background-position: 0 122px; } #interactive .twitter .heading { position: absolute; top: 25px; left: 126px; padding: 0; } #interactive .twitter a.icon { position: absolute; top: 25px; left: 10px; display: block; width: 102px; height: 83px; background: url(../images/icons/twitter-icon.png) no-repeat; text-indent: -9999px; } #interactive .twitter p { position: absolute; top: 50px; left: 125px; width: 430px; line-height: 1.5em; padding: 0; letter-spacing: 0.5px; } #interactive .twitter .loader { display: none; position: absolute; width: 16px; height: 11px; top: 70px; left: 300px; background: url(../images/ajax-loader.gif); } #interactive .email { width: 287px; background-position: -573px 122px; } #interactive .email a.icon { display: block; width: 287px; height: 123px; background: url(../images/icons/email-studio.png) center no-repeat; text-indent: -9999px; } #interactive .email .separator { position: absolute; left: 0px; display: block; width: 1px; height: 123px; background: url(../images/interface/small-separator.png) center no-repeat; } /* MAIN CONTAINER */ #content { width: 860px; padding: 17px 59px 0; background: url(../images/bg-middle.png) repeat-y; margin: 0 auto; z-index: 1; } #content .posts { width: 554px; padding: 0 19px 0 0; float: left; } #content .sidebar { width: 268px; padding: 3px 0 0 19px; float: left; letter-spacing: 0.2px; } #content .wrap { position: relative; width: 100%; height: 100%; background: url(../images/interface/vertical-separator.png) repeat-y; background-position: 573px 6px; } #content .wrap .border-fix { position: absolute; width: 10px; height: 100px; background: url(../images/interface/border-fix.png) no-repeat; left: 568px; bottom: 0px; } /* POSTS STYLING */ #content .posts .title { padding-bottom: 25px; } #content .posts .title h1 { font-size: 18px; } #content .posts .post { position: relative; width: 100%; xpadding-bottom: 15px; } #content .posts .post p {margin:0px; padding-top:0.8em;} #content .posts .single { padding-top: 31px; } .posts .post .post-meta { position: relative; width: 100%; height: 141px; z-index: 1; } #content .posts .post .post-meta .post-img { position: absolute; top: 0px; left: 0px; } #content .posts .post .post-meta .heading { position: absolute; bottom: 12px !important; bottom: 11px; width: 100%; padding: 6px 0 9px; z-index: 2; background: url(../images/interface/post-heading-block.png) repeat-y; } #content .posts .post .post-meta .heading .top, #content .posts .post .post-meta .heading .bottom { position: absolute; left: 0px; width: 100%; height: 1px; background: url(../images/interface/post-heading-line.png) repeat-x; } #content .posts .post .post-meta .heading .top { top: 0; } #content .posts .post .post-meta .heading .bottom { bottom: 0 !important; bottom: -15px; } #content .posts .post .post-meta .heading a.post-title { display: block; width: 288px; margin: 0 0 4px 15px; font-size: 18px; color: #241e1e; font-weight: normal; letter-spacing: 0.5px; padding: 0 0 1px 0; } #content .posts .post .post-meta .heading a.post-title:hover { text-decoration: none; } #content .posts .post .post-meta .heading small.info { display: block; width: 300px; margin: 0 0 0 15px; padding: 0 0 1px 0; font-size: 11px; } #content .posts .post .post-meta .heading a.comments { position: absolute; left: 305px; bottom: 6px; display: block; width: 31px; height: 33px; background: url(../images/interface/comments-bubble.png) no-repeat; text-align: center; font-size: 12px; font-weight: bold; color: white; line-height: 26px; } #content .posts .post .post-meta .heading a.comments:hover { text-decoration: none; background-position: 0 -33px;} #content .posts .post .post-meta .heading span.date { position: absolute; width: 52px; left: 356px; bottom: 9px; text-align: center; color: #ff6801; font-weight: bold; } #content .posts .post .post-meta .heading span.date big { display: block; font-size: 21px; padding-bottom: 1px; } #content .posts .post .post-meta .heading span.date small { display: block; font-size: 12px; } #content .posts .post .post-content { padding: 0 15px 17px; } /* PAGINATION */ #pagination { font-size: 13px; width: 100%; height: 32px; padding: 10px 0 20px 0; } #pagination .pages { display: block; height: 32px; line-height: 32px; float: right; color: #9c9494; } #pagination .current, #pagination a { display: block; width: 30px; height: 30px; line-height: 30px; font-weight: bold; text-align: center; background: #ff6801; border: solid 1px #ff6801; margin-right: 5px; float: left; color: white; } #pagination a:hover { text-decoration: none; background-color: #241e1e; color: #e2e7ea; border-color: #241e1e; } #pagination .current { background: white; color: #241e1e; border-color: #ff6801; } #pagination .page { } /* WIDGET (GENERIC) */ #content .sidebar .widget { margin: 30px 0; } #content .sidebar .widget .title { padding: 0; margin-bottom: 0px; font-size: 16px; } #content .sidebar .widget ul li { list-style: none; } #content .sidebar .widget table tbody tr, #content .sidebar .widget table tbody tr, #content .sidebar .widget table tbody td { border: none; } #content .sidebar .widget table caption { text-align: left; } /* LINKS WIDGET */ #content .sidebar .widget ul li { text-indent: 10px; list-style: square; list-style-position: inside; color: #ff9f42; } #content .sidebar .widget ul.check li { text-indent: 0px; list-style: none; color: #241e1e; } #content .sidebar .widget ul li a { font-size: 14px; color: #ff6801; } #content .sidebar .widget ul li a:hover { color: #f64300; text-decoration: none; } #content .sidebar .widget ul li:hover { color: #241e1e; } /* SEARCH WIDGET */ #content .sidebar #search-widget form#search { height: 32px; width: 100%; padding-top: 5px; margin-bottom: 0 !important; margin-bottom: -20px; } #content .sidebar #search-widget form#search input.search { width: 212px; float: left; margin: 0; padding-left: 7px; } #content .sidebar #search-widget form#search input.submit { width: 40px; height: 32px; float: left; margin: 0; padding: 0; overflow: hidden; font-size: 100em; background: url(../images/interface/search-icon.png) #ff6801 center no-repeat; } #content .sidebar #search-widget form#search input.submit:hover { cursor: pointer; } /* PORTFOLIO WIDGET */ #content .sidebar #portfolio-widget { } #content .sidebar #portfolio-widget .heading { position: relative; height: 20px; } #content .sidebar #portfolio-widget .heading .title { float: left; margin: 0; padding: 0; } #content .sidebar #portfolio-widget .heading a { float: right; line-height: 20px; color: #9c9494; margin-top: 2px; } #content .sidebar #portfolio-widget .thumbs { width: 268px; } #content .sidebar #portfolio-widget .thumbs ul.layout li { margin: 0; text-indent: 0; padding: 0; } #content .sidebar #portfolio-widget .thumbs .thumb { position: relative; width: 268px; height: 130px; overflow: hidden; position: relative; padding-top: 20px; } #content .sidebar #portfolio-widget .thumbs .thumb a { position: absolute; bottom: 0; left: 0; z-index: 1; } #content .sidebar #portfolio-widget .thumbs .thumb a.hover { display: none; z-index: 2; } /* SPOTLIGHT WIDGET */ #content .sidebar #spotlight-widget { margin-top: 40px; } /* RECENT COMMENTS WIDGET */ #content .sidebar .widget ul#recentcomments li { font-size: 12px; list-style: none; color: #241e1e; } #content .sidebar .widget ul#recentcomments li a { font-style: italic; font-size: 13px; } #content .sidebar .widget ul#recentcomments li a.url { font-style: normal; } /* FOOTER */ #footer { position: relative; width: 860px; padding: 12px 59px 20px; font-size: 12px; background: url(../images/bg-middle.png) repeat-y; margin: 0 auto; } #footer p.copyright { padding-top: 0px; text-align:center; } #footer #back-to-top { position: absolute; top: 15px !important; top: 18px; right: 59px; } #footer .footer-top { margin-top:10px; position: absolute; top: 0px; display: block; width: 860px; height: 1px; background: url(../images/interface/horizontal-separator.png) center no-repeat; } #body-bottom { position: relative; width: 860px; padding: 0 59px 54px; height: 23px; background: url(../images/bg-bottom.png) top center no-repeat; margin: 0 auto;} /* PAGE-META */ #page-meta { height: auto !important; height: 168px; min-height: 168px; } #page-meta .title { position: absolute; top: 40px; left: 204px; font-size: 22px; margin: 0; padding: 0; } #page-meta p.description { position: absolute; top: 65px; left: 204px; font-size: 15px; margin: 0px; padding: 0px; } #page-meta img.icon { position: absolute; width: 125px; height: 135px; top: 20px; left: 59px; } #page-meta .links { width: 712px; height: auto !important; height: 6px; min-height: 6px; margin: 102px 0 32px 0; background: #ff6801; border: solid 1px #ff6801; float: right; } #page-meta .links a { display: block; height: 32px; padding: 0 15px; float: left; line-height: 32px; font-family: "Trebuchet MS", sans-serif; font-weight: bold; color: white; text-transform: uppercase; white-space: nowrap; } #page-meta .links a:hover { text-decoration: none; background-color: #ff7819; } #page-meta .links a.active { background-color: white; color: #ff6801; } #page-meta .links a.active:hover { background-color: white; } #page-meta .border-bottom { position: absolute; bottom: 0px; display: block; width: 860px; height: 1px; background: url(../images/interface/horizontal-separator.png) bottom center no-repeat; } /* PORTFOLIO PAGE */ #portfolio { width: 864px; padding: 0 57px; } #portfolio .wrap { } #portfolio .wrap .thumbs { width: 100%; padding: 23px 0 20px 0; } #portfolio .wrap .thumbs .thumb { position: relative; display: block !important; display: inline; width: 212px; height: 260px; margin: 2px 2px 2px 2px; float: left; } #portfolio .wrap .thumbs .thumb img { width: 212px; height: 260px; position: absolute; top: 0px; left: 0px; } #portfolio .wrap .thumbs .thumb span { display: block; } #portfolio .wrap .thumbs .thumb .hover { display: none; } #portfolio .wrap .thumbs .thumb .hover a img.top { display: none; z-index: 2; } #portfolio .wrap .thumbs .thumb .hover .heading { display: none; z-index: 3; position: absolute; bottom: 27px; width: 100%; background: url(../images/interface/post-heading-line.png) top repeat-x; } #portfolio .wrap .thumbs .thumb .hover .heading a { display: block; width: 150px; padding: 16px 10px; margin: 0 auto; background: white; text-transform: uppercase; font-family: "Trebuchet MS", sans-serif; font-size: 12px; line-height: 1.4em; font-weight: bold; color: #ff6801; letter-spacing: 1.3px; } #portfolio .wrap .thumbs .thumb .hover .heading a:hover { text-decoration: none; } #portfolio .wrap .thumbs .thumb .hover .heading .bottom { position: absolute; bottom: 0px !important; bottom: -15px; width: 100%; height: 1px; background: url(../images/interface/post-heading-line.png) repeat-x; } #portfolio .wrap .thumbs .thumb a img.base { z-index: 1; } /* FULLWIDTH PAGE */ #content .full-width { background: none; padding: 15px 0 50px; } #content .full-width p { } #content .full-width p, #content .full-width br, #content .full-width ul li, #content .full-width ol li,#content .full-width dl { line-height: 2em; } /* CONTACT FORM */ form.alternate { padding-top: 25px; } form.alternate p { padding-bottom: 17px; } form.alternate input { display: inline; } form.alternate label { display: inline; padding-left: 10px; font-weight: bold; font-family: "Trebuchet MS", sans-serif; } /* COMMENTS STYLING */ #comments { padding-top: 30px; } #comments form.alternate { margin: 0; padding: 0; } #comments form label { font-size: 12px; letter-spacing: 0.2px; } #comments .title { } #comments .leave-comment { margin-bottom: 0; padding-bottom: 0; } #comments .comment { display: block; position: relative; padding-bottom: 25px; height: auto !important; height: 64px; min-height: 64px; } #comments .comment .heading { position: absolute; top: 0px; right: 0px; width: 440px; padding-bottom: 6px; border-bottom: solid 1px #ff6801; } #comments .comment .heading a.autor { color: #ff6801; font-size: 18px; font-family: "Trebuchet MS", sans-serif; } *:first-child+html #comments .comment .heading { padding-bottom: 0px; } * html #comments .comment .heading { padding-bottom: 0px; } /* IE6/7 */ *:first-child+html #comments .comment .heading a.date { top: -9px; } * html #comments .comment .heading a.date { top: -9px; } /* IE6/7 */ #comments .comment .heading a.date { position: relative; color: #9C9494; float: right; font-size: 12px; top: 5px; } #comments .comment .heading a:hover { text-decoration: none; color: #241e1e; } #comments .comment .text { font-family: "Trebuchet MS", sans-serif; width: 440px; float: right; padding-top: 20px; font-size: 12px; } #comments .comment .text p { } #comments .comment img.avatar { position: absolute; top: 0px; left: 0px; }