/* Theme Name: Shaspa Theme URI: http://shaspa.com/ Author: Shaspa.com Author URI: http://shaspa.com/ Description: shaspa.com Version: 1.1 Tags: */ /* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) ::-moz-selection { background: #fff600; color: #2e3f5b; text-shadow: none; } ::selection { background: #fff600; color: #2e3f5b; text-shadow: none; } */ /* ============================================================================= Links ========================================================================== */ a { color: #50740b; text-decoration: none; } a:hover, a:active { color: #71a809; } a:visited { color: #50740b; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */ button, input { line-height: normal; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Re-set default cursor for disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ============================================================================= Chrome Frame Prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ==|== primary styles ===================================================== ========================================================================== */ body { font-family: arial,helvetica,sans-serif; font-size: 12px; color: #666; background: url('img/layout/body.gif') top repeat-x; } h1,h2,h3,h4,h5,h6, ul, ul li, ol, ol li, p, fieldset { margin: 0; padding: 0; list-style: none; font-weight: normal; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ @font-face { font-family: 'Conv_GOTHIC'; src: url('fonts/GOTHIC.eot'); src: local('☺'), url('font/GOTHIC.woff') format('woff'), url('font/GOTHIC.ttf') format('truetype'), url('font/GOTHIC.svg') format('svg'); font-weight: normal!important; font-style: normal; } @font-face { font-family: 'Conv_GOTHICB'; src: url('fonts/GOTHICB.eot'); src: local('☺'), url('font/GOTHICB.woff') format('woff'), url('font/GOTHICB.ttf') format('truetype'), url('font/GOTHICB.svg') format('svg'); font-weight: normal; font-style: normal; } header { height: 88px; position: relative; margin: 0 auto; width: 940px; } header h1 a { display: block; text-indent: -5000px; height: 85px; width: 180px; background: url('img/layout/logo.gif') no-repeat; } header ul { position: absolute; right: 0; top: 40px; background: url('img/layout/header_nav_divider.gif') top right no-repeat; } header ul li { float: left; text-transform: uppercase; font-weight: bold; color: black; background: url('img/layout/header_nav_divider.gif') top left no-repeat; padding: 0 0; } header ul li a { display: block; float: leftt; font-size: 19px; color: #838383; font-family: 'Conv_GOTHIC'; height: 46px; margin: -5px 0 0 0; padding: 0 30px; } header ul li a:hover { color: #5d870d; } header ul li a:visited { color: black } header ul li.current-menu-item a, header ul li.current-page-ancestor a{ font-family: 'Conv_GOTHICB'; color: #5d870d; background: url('img/layout/header_active.gif') bottom center no-repeat; } #slideshow { background: url('img/layout/new-slider-background-3.png') top center repeat-x; height: 445px; margin-top: -1px;} /* gallery */ #gallery { width: 940px; height: 441px; margin: 0 auto; position: relative; font-family: 'Conv_GOTHIC'; } #gallery .slides { width: 940px; height: 440px; margin: 0 auto; /*background:#628b15;*/ } #gallery .slides li {height: 440px; } #gallery h3 { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background: url('img/layout/slideshow_heading.png') no-repeat; width: 302px; height: 40px; color: #fff; text-transform: uppercase; position: absolute; left: 0; bottom: 0; z-index: 1001; padding-right: 40px; text-align: center; font-size: 30px; } #gallery h2 { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background: url('img/layout/slideshow_slogan.png') no-repeat; width: 565px; height: 59px; font-size: 24px; color: #fff; text-transform: uppercase; text-align: center; top: 0; left: 190px; position: absolute; padding-top: 6px; } /* #gallery .slides li.item-3 h2 { background: url('img/layout/wide_slogan.png') no-repeat; width: 773px; left: 86px; }*/ #gallery img { width: auto; height: auto!important; position: absolute; top: 0; /*right: 0;*/ } #gallery ul.buttons { display: none; } #gallery .pagination { position: absolute; bottom: 11px; left: 360px; } #gallery .pagination li { float: left; } #gallery .pagination li a { display: block; background: url('img/icons/dots.png') no-repeat; float: left; width: 22px; height: 22px; text-indent: -5000px; margin-right: 18px; } #gallery .pagination li.current a { background-position: bottom; } #bridge { background: url('img/layout/shaspa_bridge.png') no-repeat; width: 302px; height: 214px; position: absolute; bottom: 1px; right: 0; z-index:10001; padding-left: 40px; } #bridge p { font-size: 30px; color: #fff; text-transform: uppercase; text-align: center; padding-top: 174px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;} .inner { width: 940px; margin: 0 auto; position: relative; } .inner h2 { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-size: 25px; color: #71a809; font-family: 'Conv_GOTHIC'; margin-bottom: 15px; text-transform: uppercase; } .inner .alignright { float: right; margin: 0 0 35px 35px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .inner .heading h2 { display: inline-block; margin: 0 18px 10px 0; } .inner .heading h3 { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; font-size: 25px; color: #666;font-family: 'Conv_GOTHIC'; border-left: 1px solid #666; padding-left: 18px; } .inner p, #intro .inner { font-size: 15px; color: #666; line-height: 1.3; } a.btn, .gform_wrapper input[type="submit"] { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; background: url('img/layout/btn.gif') top repeat-x; /*border-top: 1px solid #c5df73; border-left: 1px solid #a8cd3f;*/ /*border-right: 1px solid #4e6f06; border-bottom: 1px solid #1f3903;*/ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 31px; line-height: 31px; padding: 0 15px; color: #fff; font-size: 19px; font-family: 'Conv_GOTHIC'; } #cta a.btn { width: 420px; padding: 0; font-size: 40px; height: 69px; line-height: 69px; background: url('img/layout/btn_cta.gif') top repeat-x; position: absolute; right: 0; top: 5px; text-align: center; text-transform: uppercase; } a.btn:hover, .gform_wrapper input[type="submit"]:hover { background: #71a809!important; } a.btn:active { border-bottom: 1px solid #c4df73; border-left: 1px solid #385d04; border-top: 1px solid #1e3903; border-right: 1px solid #74a639; background: url('img/layout/btn.gif') bottom repeat-x!important; } #cta a.btn:active { background: url('img/layout/btn_cta.gif') bottom repeat-x!important; } .gform_wrapper li { margin-bottom: 15px; } .gform_wrapper li label { font-size: 12px; display: block; margin: 0 0 5px 0; } .gform_wrapper li .ginput_container input, textarea { padding: 8px; border: 1px solid #d6d6d6; border-radius: 5px; min-width: 400px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .gform_wrapper input[type="submit"] { cursor: pointer; } #contact-login, #menu { background: url('img/layout/contact_login-new.gif') top repeat-x; } #contact-login .inner { height: 55px; padding-top: 20px; } #contact-login .custom { position: absolute; right: 0; top: 20px; font-size: 19px; color: #98c60c; font-family: 'Conv_GOTHIC'; } #contact-login .custom a { margin-left: 14px; } #intro, #smarts, #inside, #getting-started, #cta, .main, #partners, #news { background: url('img/layout/intro.gif') top repeat-x; padding-top: 28px; padding-bottom: 10px; } #intro .heading { background: url('img/layout/divider.gif') bottom center no-repeat; padding-bottom: 20px; margin-bottom: 18px; } #intro .inner { margin-bottom: 40px; } #smarts ul { background: url('img/layout/smarts_list.png') 0 23px no-repeat; margin-bottom: 25px; } #smarts ul li { float: left; width: 280px; margin-right: 50px; } #smarts ul li.last { margin-right: 0; } #smarts ul li img { margin-bottom: 50px; } #smarts ul li p { margin-bottom: 15px; } #inside .heading { margin: 0; } #inside ul { padding-top: 25px; } #inside ul li { background: url('img/layout/divider.gif') top left no-repeat; padding-top: 30px; padding-left: 195px; padding-right: 105px; position: relative; margin-bottom: 25px; margin-bottom: 20px; } #inside ul li a.btn { position: absolute; right: 0; top: 33px; } #inside ul li img { position: absolute;left: 15px; top: 28px; } #inside ul li.item-1 img { top: 38px; } #inside ul li.item-3 img { top: 22px; left: 35px; } #inside ul li h4 { display: inline-block; font-size: 15px; color: #71a809; } #inside ul li p { display: inline-block; font-size: 15px; color: #666; } #inside ul li p strong { color: #71a809; text-transform: uppercase; background: url('img/layout/inside_divider.gif') right 3px no-repeat; padding-right: 16px; margin-right: 11px; } #getting-started { padding-top: 40px; padding-bottom: 40px; } #getting-started .heading { margin-bottom: 25px; } #getting-started ul li { float: left; margin-right: 50px; } #getting-started ul li.last { margin: 0; } #getting-started h2 { text-transform: none; text-align: center; } #cta { padding-top: 35px; padding-bottom: 60px; } #cta .heading { padding-top: 22px; } #overview { background: url('img/layout/overview-green.jpg') top center repeat-x; margin-top:-1px; overflow:visible} #overview .inner { height: 445px; } #overview #image { background: url('img/other/shaspa_web_overview-v2.jpg') no-repeat; background-position: center top; height: 528px; position: relative; } #overview .info { position: absolute; width: 20px; height: 20px; background: url('img/icons/info.png') no-repeat; cursor: pointer; } /*#overview .info.item-1 { left: 238px; top: 145px; } #overview .info.item-2 { left: 369px; top: 135px; } #overview .info.item-3 { left: 640px; top: 154px; } #overview .info.item-4 { left: 810px; top: 185px; } #overview .info.item-5 { left: 766px; top: 469px; } #overview .info.item-6 { left: 596px; top: 305px; } #overview .info.item-7 { left: 372px; top: 390px; } #overview .info.item-8 { left: 345px; top: 270px; } #overview .info.item-9 { left: 177px; top: 362px; } #overview .info.item-10 { left: 92px; top: 450px; } #overview .info.item-11 { left: 68px; top: 240px; } old css rules for info items, if client will ask to change back image size */ #overview .info.item-1 { left: 273px; top: 120px; } #overview .info.item-2 { left: 390px; top: 8px; } #overview .info.item-3 { left: 640px; top: 154px; } #overview .info.item-4 { left: 755px; top: 165px; } #overview .info.item-5 { left: 720px; top: 400px; } #overview .info.item-6 { left: 580px; top: 250px; } #overview .info.item-7 { left: 390px; top: 320px; } #overview .info.item-8 { left: 370px; top: 230px; } #overview .info.item-9 { left: 220px; top: 305px; } #overview .info.item-10 { left: 145px; top: 380px; } #overview .info.item-11 { left: 130px; top: 200px; } #overview .tooltip { padding: 8px 15px 30px 15px; font-size: 15px; color: #fff; background: url('img/layout/tooltip.png') bottom no-repeat; width: 340px; border-top: 2px solid #fff; position: absolute; top: -120px; left: -17px; display: none; z-index: 10000; } #overview .tooltip p { color: #fff; } #overview .info:hover .tooltip { display: block; } #overview .info.item-3 .tooltip, #overview .info.item-4 .tooltip, #overview .info.item-5 .tooltip, #overview .info.item-6 .tooltip { background: url('img/layout/tooltip_custom.png') bottom no-repeat; left: -334px; } #overview .info.item-2 .tooltip{ padding: 8px 15px 30px 15px; font-size: 15px; color: #fff; background: url('img/layout/tooltip.png') bottom no-repeat; width: 340px; border-top: 2px solid #fff; position: absolute; top: -100px; left: -17px; /*display: none;*/ z-index: 10000; } #overview .info.item-2 .tooltip p { font-size: 12px; } #menu { padding: 30px 0 0 0; /*background: url('img/layout/menu.gif') 0 126px no-repeat;*/ width: 940px; margin: 0 auto; } #menu li { float: left; } #menu li a { display: block; float: left; width: 148px; height: 49px; position: relative; text-align: center; padding-top: 114px; font-size: 19px; color: #A7A7A7; font-family: 'Conv_GOTHIC'; margin-right: 37px; margin-bottom: 10px; } #menu li a.residential { background: url('img/icons/1ico.png') no-repeat; margin-left: 27px; background-position: center 0} #menu li a.smart-grid { background: url('img/icons/2ico.png') no-repeat; background-position: center 0} #menu li a.commercial { background: url('img/icons/3ico.png') no-repeat; background-position: center 0} #menu li a.assisted-living { background: url('img/icons/6ico.png') no-repeat; background-position: center 0} #menu li a.e-mobility { background: url('img/icons/4ico.png') no-repeat; margin: 0; background-position: center 13px} #menu li a:hover { /*background-position: 0 -638px!important;*/-webkit-transform: scale(1.2); -moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2); transform: scale(1.2);color: black; font-size:16px} #menu li.active a { /*background-position: 0 -338px!important;*/ } #menu.custom { /*background: url('img/layout/menu.gif') 0 130px no-repeat;*/ } #menu.custom li a { width: 290px; margin-right: 10px; padding-top: 120px; } #menu.custom li a.shespa-bridge { background: url('img/icons/bridge-ico.png') no-repeat; background-position: center 15px; margin-left: 27px; } #menu.custom li a.service-delivery-framework { background: url('img/icons/cloud-ico.png') no-repeat; background-position: center 15px } #menu.custom li a.shaspa-store { background: url('img/icons/cart.png') no-repeat; background-position: center 15px} #menu.custom li a:hover { /*background-position: 0 -534px!important;*/ } #menu.custom li.active a { /*background-position: 0 -234px!important;*/ } .main { padding-bottom: 40px; } .main .heading, #partners .heading, #news .heading { background: url('img/layout/divider.gif') bottom left no-repeat; padding-bottom: 22px; margin-bottom: 25px; } .main p { margin-bottom: 15px; } .blog #main-content { float: left; width: 600px; } .blog #main-content .post { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; } .blog.single #main-content .post { border: none; } .blog #main-content .post a { color: #71A809; } .blog #main-content .post .misc p { font-size: 11px; } .blog #main-content .post .misc em { font-size: 11px; margin-bottom: 15px; display: block; } .blog #main-content .post a.btn { color: #fff; font-size: 14px; padding: 0 10px; height: 26px; line-height: 26px; } .blog #main-content #pagination { position: relative; } .blog #main-content #pagination a { color: #71A809; } .blog #main-content #pagination a.older { position: absolute; right: 0; top: 0; } .blog #main-content .post .tags { font-size: 11px; } .blog #main-content .post .alignleft { float: left; margin: 0 15px 15px 0; } .blog #main-content .post .alignright { float: right; margin: 0 0 15px 15px; } .blog #sidebar { float: right; width: 294px; } .blog #sidebar a { color: #71A809; } .blog #sidebar ul { margin-bottom: 20px; clear: both; } .blog #sidebar ul li { float: left; width: 141px; padding: 5px 3px; border-bottom: 1px solid #ccc; } .blog #sidebar ul li a { } .blog #sidebar h3 { clear: both; font-size: 20px; font-family: 'Conv_GOTHIC'; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; margin-bottom: 5px; } #partners .column h3 { color: #71a809; border-left: 1px solid #71a809; margin-bottom: 20px; padding-left: 12px; font-size: 20px; font-family: 'Conv_GOTHIC'; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } #partners .column { float: left; } #partners .column.item-1 { width: 180px; margin-right: 70px; } #partners .column ul li { margin-bottom: 25px; text-align: center; } #partners .column ul li img { display: inline-block; } #partners .column.item-2 { width: 400px; } #partners .column.item-2 li { width: 200px; float: left; } #partners .column.item-3 { float: right; width: 220px; } .partners li { position: relative; min-height: 130px; padding-left: 220px; background: url('../img/layout/divider.gif') bottom left no-repeat; padding-bottom: 22px; margin-bottom: 25px; } .partners li img { position: absolute; left: 0; top: 5px; width: 190px; } .partners li:last-child { margin-bottom: 0; padding-bottom: 0; background: none; } .partners li h3 { color: #71a809; margin-bottom: 8px; font-size: 20px; color: #71a809; font-family: 'Conv_GOTHIC'; } #news { padding-bottom: 60px; } #news ul { margin-top: -15px; } #news li { background: url('img/layout/divider.gif') bottom left no-repeat; padding: 0 130px 0 205px; padding-bottom: 12px; margin-bottom: 10px; position: relative; min-height: 50px; } #news li span { width: 172px; height: 49px; background: url('img/layout/date-new.gif') no-repeat; position: absolute; top: 0; left: 0; text-indent: 12px; padding-top: 3px; color: #fff; font-size: 20px; font-family: 'Conv_GOTHIC'; } #news li img { float: right; margin: 0 -130px 0 0; width: 105px; -moz-box-shadow: 1px 0 5px #b8b8b8;-webkit-box-shadow: 1px 0 5px#b8b8b8; box-shadow: 1px 0 5px #b8b8b8; } #news p { margin-left: 35px; } footer { /*background: #568814 url('img/layout/footer.gif') top repeat-x;*/ height: auto; padding-top: 45px; padding-bottom: 45px; margin-top: -90px } footer .inner { margin: 0 auto; width: 940px; } footer .column { width: 140px; float: left; margin-right: 30px; margin-top: -45px } footer .column h4 { color: #fff; font-size: 24px; font-family: 'Conv_GOTHIC'; margin-bottom: 10px; } footer .column ul ul li { padding-left: 10px; } footer .column ul ul li:last-child { border:none!important; } footer .column ul li { /*border-bottom: 1px solid #aaa;*/ } footer .column ul li a { text-shadow: 1px 1px 1px rgba(0,0,0,0.4); color: #fff; font-size: 11px; padding: 5px 9px; display: block; background: url('img/layout/footer_arrow.gif') 0 9px no-repeat; } footer .column.last { float: right; width: 420px; margin: 0; } footer .column.last p { font-size: 11px; /*text-shadow: 1px 1px 1px rgba(0,0,0,0.4); color: #fff;*/ color: black; margin-bottom: 15px; line-height: 1.5; } footer .column.last h5 { font-size: 19px; margin-bottom: 5px; font-family: 'Conv_GOTHIC'; /*color: #b5b7b0;*/ color: black; } footer .recent-posts-plus a { color: #fff;} footer .ctc a { text-shadow: 1px 1px 1px rgba(0,0,0,0.4); color: #fff; font-size: 11px; } footer .ctc a:hover, footer .ctc a:active { text-decoration: underline;} #copyright { background: #415e09; font-size: 11px; color: #fff; text-shadow: 1px 1px 1px #222; } #copyright .inner { width: 940px; margin: 0 auto; padding: 15px 0; position: relative; } #copyright p { font-size: 11px; color: #fff; margin-top: -14px; } #copyright .top { color: #fff; position: absolute; right: 55px; top: 17px; } #copyright ul { position: absolute; right: 0; top: 15px; } #copyright ul li { float: left; } #copyright ul li a { color: #bbb; display: block; float: left; margin-left: 8px; width: 16px; height: 16px; text-indent: -5000px; } #copyright ul li.item-1 a { background: url('img/icons/rss.gif') no-repeat; } #copyright ul li.item-2 a { background: url('img/icons/twitter.gif') no-repeat; }