/* ======================================================================== This file contains all CSS styles used in the Neutrino Template. Use the table of contents below to find your way round. TABLE OF CONTENTS I. - GLOBAL STYLES I.01 - Reset default browser styles I.02 - styles for basic HTML ELEMENTS and TYPOGRAPHY I.02.A - Document I.02.B - Headings I.02.C - Text elements I.02.D - Lists I.02.E - Tables I.02.F - Forms I.02.G - Images and Boxouts I.03 - Document sections I.04 - Grids I.05 - Panels I.06 - Buttons I.07 - Miscelaneus global styles II. - INDIVIDUAL TEMPLATE ELEMENTS II.01 - Header + Transparent container for logo and login box + Sliding down login box + Main navigation + Search form II.02 - Footer + Overriding some global styles + Footer widgets + Footer footnotes section II.03 - Sidebar + General sidebar widget styles + RSS widget + Newsletter widget + Tabbed widget II.04 - Frontpage slider II.05 - "Galleria" image slider II.06 - Pages and blog posts + Frontpage action panel + Blog post metadata + Blog post comments + Pagination II.05 - Portfolio and gallery pages II.07 - Contact page II.08 - Grids demo page ======================================================================== */ /** * ************************** * * I. - GLOBAL STYLES * * ************************** */ /** * ================================================ * I.01 - Reset default browser styles * Based on Eric Meyer's CSS reset, v1.0 2008-02-12 * http://meyerweb.com/eric/tools/css/reset/ * ================================================ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /** * ==================================================== * I.02 - styles for basic HTML ELEMENTS and TYPOGRAPHY * ==================================================== */ /** * ----------------- * I.02.A - Document * ----------------- */ html { background: #0b1d0a url(../img/silver/green/main-bg.jpg) top center no-repeat; } html, body { font-size: 10px; line-height: 20px; color: #333; } body, label, legend, input, textarea, select, option { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif } #flash_container{width:237px; height:70px; padding:0; position:relative; left:-5px;} #Tracking{ width: 680px; height: 70px; padding: 0; position: relative; left: 260px; top: -70px; background: transparent; } #Tracking1{ width: 100px; height: 20px; padding: 0; position: relative; left: 410px; top: 0px; background: transparent; } /** * ----------------- * I.02.B - Headings * ----------------- */ h1, h2, h4, h5, h6 { color: #2a5928; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1 { font-size: 30px; line-height: 40px; margin-bottom: 15px; } h2 { font-size: 24px; line-height: 40px; margin-bottom: 5px; padding-top: 5px; } h3 { font-size: 20px; line-height: 20px; margin-bottom: 5px; padding-top: 5px; } h4 { font-size: 15px; line-height: 20px; margin-bottom: 5px; padding-top: 5px; } h5 { font-size: 13px; line-height: 20px; margin-bottom: 5px; padding-top: 5px; } h6 { font-size: 10px; line-height: 20px; margin-bottom: 5px; } h7 { font-size: 20px; line-height: 20px; margin-bottom: 5px; padding-top: 5px; } h4, h5, h6 { font-weight: bold; } /*** Headings styled as horizontal bar ***/ h1.bar, h2.bar, h3.bar, h4.bar, h5.bar, h6.bar { color: #f6f6f6; background: #718c70; border: 1px solid #718c70; border-bottom-color: #5d735c; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 2px 10px; margin-bottom: 15px; } h3.bar { padding: 7px 10px; } /** * ---------------------- * I.02.C - Text elements * ---------------------- */ a , a:link, a:visited { text-decoration: underline; color: #53592e; } a:hover, a:active { text-decoration: underline; color: #5b7f59; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: #2a5928; text-decoration: none; } p { font-size: 13px; line-height: 20px; margin-bottom: 15px; } p.large { font-size: 15px; line-height: 20px; margin-bottom: 15px; font-weight: bold; color: #777; } p.small { font-size: 11px; line-height: 20px; margin-bottom: 15px; } hr { width: 100%; border:0; line-height: 0; margin:5px 0 15px 0; padding: 0; height: 1px; background: #c9c9c9 } p + hr { margin:15px 0 15px 0; } blockquote { padding-left: 15px; margin-bottom: 15px; border-left: 10px solid #c9c9c9; font-style: italic; } q { font-style: italic; } dfn { font-weight: bold; font-style: italic; } code,samp,kbd { font-family: monospace; text-decoration: none; background: #e4e4e4; border: 1px solid #ccc; } var,cite { font-style:italic; } del { text-decoration: line-through; color: #666; } ins { text-decoration: underline; } abbr, acronym { text-decoration: underline; cursor: help; } address { font-style: normal; } big { font-size: 14px; } small, sub, sup { font-size: 10px; } sub { vertical-align: sub; } sup { vertical-align: super; } pre,tt { font-family: monospace; text-decoration: none; font-weight: normal; font-style: normal; } pre { white-space: pre; display: block; overflow-x: auto; overflow-y: hidden; font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace; font-size: 12px; line-height: 20px; margin-bottom: 15px; padding: 10px 10px 20px 10px; border: 1px solid #c9c9c9; border-left-width: 10px; background: #e0e0e0; } /** * -------------- * I.02.D - Lists * -------------- */ /*** Normal ordered and unordered lists ***/ ul,ol,dl { font-size: 13px; line-height: 20px; margin-bottom: 15px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0px; } ol, ol li { list-style: decimal; } ul, ul li { list-style: disc; } ul > li { padding-left: 0; margin-left: 20px;} ol > li { padding-left: 0; margin-left: 30px;} /*** Normal definition list ***/ dt { font-weight: bold; } dd { padding-left: 15px; margin-bottom: 15px;} /*** List displayed horizontally ***/ .horizontal-list { list-style:none; margin-bottom:0; } .horizontal-list li { display:inline; margin:0; padding:0 1em; } /*** List with items separated by lines ***/ .lines-list { border-top: 1px solid #c9c9c9; } .lines-list li { list-style: none; margin: 0; line-height: 20px; border-bottom: 1px solid #c9c9c9; padding: 3px 0; } .lines-list a { display:block; padding:0 1px; text-decoration: none; } .lines-list a:hover, ul.lines-list a:active { border:0; text-decoration:none; } /*** Lists with items marked with triangles and checkboxes ***/ .arrow-list li { list-style:none; padding-left:15px; margin-left:5px; background: transparent url(../img/silver/green/arrow-list.gif) no-repeat; background-position:0 6px; } .check-list li { list-style:none; padding-left:18px; margin-left:5px; background: transparent url(../img/silver/common/check-list.gif) no-repeat; background-position:0 6px; } .arrow-link-list li { list-style: none; margin: 0; } .arrow-link-list li a { display:block; padding: 1px 0 1px 15px; } .arrow-link-list a { background: transparent url(../img/silver/green/arrow-list.gif) no-repeat; background-position:3px 7px; text-decoration: none; } .arrow-link-list a:hover, .arrow-link-list a:active { color:#fff; background: #5b7f59 url(../img/silver/green/arrow-list-hover.gif) no-repeat; background-position:5px 7px; text-decoration: none; } .arrow-link-list.lines-list { border-top: 1px solid #c9c9c9; } .arrow-link-list.lines-list li { border-bottom: 1px solid #c9c9c9; } /** * --------------- * I.02.E - Tables * --------------- */ table { border-collapse: collapse; border-spacing: 0; width:100%; font-size: 13px; line-height: 20px; margin-bottom: 15px; border: 0; background: none; color: #333; } caption { text-align: left; font-weight: bold; color: #333; } th { padding: 5px 10px; font-weight: bold; text-align: left; border: 0; background: #666; color: #f9f9f9; } td { padding: 5px 10px; border: 0; border-bottom: 1px solid #c9c9c9; background: #fff; color: #333; } tfoot td { border: 0; background: #c9c9c9; } /** * -------------- * I.02.F - Forms * -------------- */ fieldset { display: block; margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; } label { display: block; font-size: 13px; color: #444; margin: 5px 0; } legend, input, textarea, select, option { font-size:13px; line-height:16px; color: #444; } input, select, textarea, legend { display:inline; } textarea { overflow:auto; } input.radio, input.checkbox { vertical-align:text-top; margin-right:10px; } input.text, input.password, input.fileupload, textarea, select { padding: 5px; border: 1px solid #c0c0c0; border-bottom-color: #bbb; border-top-color: #acacac; background: #d0d0d0 url(../img/silver/common/form-field-bg.gif) bottom repeat-x scroll; -moz-border-radius: 3px; -webkit-border-radius: 3px; } input.submit { display: inline-block; font-size: 13px; color: #222; margin-top:5px; padding:3px 8px; overflow: visible; border: 1px solid #aaa; border-bottom-color: #999; border-top-color: #c9c9c9; background: #ccc url(../img/silver/common/btn-bg.gif) center center repeat-x; -moz-border-radius: 3px; -webkit-border-radius: 3px; } input.submit:hover { cursor: pointer; background-position: 50% 40%; border-color: #777; color: #000; } input.text:focus, input.password:focus, input.fileupload:focus, textarea:focus, select:focus, .form-element-focus { outline: none; background: #fff; border-color: #000; color: #000; } .form-element { overflow:hidden; zoom:1; margin-bottom: 15px; } /* Use with a DIV element to wrap a form element and its label */ .form-note { font-style: italic; color: #666; } .error { color: #b03333; } /* AJAX error message */ .infield { margin: 0; font-style: italic; color: #777; } /* For a form label diplayed inside the text field (inFieldLabels jQuery plugin) */ /** * ----------------------------------------------------------- * I.02.G - Images and Boxouts * All following classes can be used with both images and DIVs * ----------------------------------------------------------- */ .alignnone { margin: 15px; margin-top: 0; } .alignright { float: right; margin: 0 0 15px 15px; } .alignleft { float: left; margin: 0 15px 15px 0; } .aligncenter {display: block; margin: 0 auto 15px auto; overflow:hidden; zoom:1; } .border { border: 1px solid #333; } .pad { padding: 10px; background: #e4e4e4; } .pad-light { padding: 10px; background: #fff; } .pad-neutral { padding: 10px; background: #f3f3f3; } .pad.border, .pad-neutral.border { padding: 9px; border: 1px solid #ccc; } .pad-light.border { padding: 9px; border: 1px solid #ccc; } .pad.round, .pad-light.round, .pad-neutral.round { padding: 9px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .pad.border.round, .pad-light.border.round, .pad-neutral.border.round { padding: 9px; border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .pad-light.border.round { border-color: #ccc; } /*** Reset bottom margin on boxed-out elements ***/ div.alignright table:last-child, div.alignleft table:last-child, div.aligncenter table:last-child, div.alignright p:last-child, div.alignleft p:last-child, div.aligncenter p:last-child, div.alignright ul:last-child, div.alignleft ul:last-child, div.aligncenter ul:last-child, div.alignright ol:last-child, div.alignleft ol:last-child, div.aligncenter ol:last-child { margin-bottom:0; } /** * ======================== * I.03 - Document sections * ======================== */ .doc { min-width:960px; margin-left: auto; margin-right: auto; position:relative; } /* Centered document wrapper */ .doc-hd, /* Header */ .doc-bd, /* Body */ .doc-ft /* Footer */ { overflow:hidden; zoom:1; position:relative; } /** * ============ * I.04 - Grids * ============ */ /*** Columns ***/ .three-columns, .two-columns, .full-column { margin:0; position:relative; overflow:hidden; zoom:1; } .column { display: inline; float: left; position:relative; margin:0 16px; } .column > :last-child { margin-bottom:0; } .three-columns .column { width: 282px; } .three-columns .column.double { width: 596px; } .two-columns .column { width: 439px; } .full-column .column { width: 910px; margin-left: 10px; margin-right: 10px; background: none; } .column.first, .column.double.first { margin-left: 10px; background: none; } .column.last, .column.double.last { margin-right: 10px; } /*** Inner grids (nested grids with percentage sizes) ***/ .inner-grid { clear: both; } .inner-grid.two-columns > .column { width:49.9%; padding:0; margin:0;} /* Used 49.9% instead of 50% to fix a problem in IE7 */ .inner-grid.three-columns > .column { width:33%; padding:0; margin:0;} .inner-grid.four-columns > .column { width:24.9%; padding:0; margin:0;} /* Used 24.9% instead of 50% to fix a problem in IE7 */ .inner-grid > .column > .column-inner { padding-right: 15px; } .inner-grid > .column > :last-child { margin-bottom:15px; } /*** Column separators ***/ .three-columns.separators { background: transparent url(../img/silver/common/panels-bg.png) repeat-y; background-position: -1919px 0; } .three-columns.separator-left { background: transparent url(../img/silver/common/panels-bg.png) repeat-y; background-position: -3007px 0; } .three-columns.separator-right { background: transparent url(../img/silver/common/panels-bg.png) repeat-y; background-position: -2693px 0; } .two-columns.separator { background: transparent url(../img/silver/common/panels-bg.png) repeat-y; background-position: -2850px 0; } /*** Horizontal separators ***/ .content-separator, .grid-separator { display: block; clear: both; margin: 0; height: 30px; overflow:hidden; zoom:1; background: transparent url(../img/silver/common/panels-bg.png); background-position: -10px -100px; } .grid-separator { margin: 0 10px; } .box-separator { display: block; clear: both; margin: 0; height: 20px; overflow:hidden; zoom:1; } /** * ============= * I.05 - Panels * ============= */ .panel { margin-left: auto; margin-right: auto; padding:25px 15px; width: 930px; position:relative; overflow:hidden; zoom:1; } .panel.round { width: 960px; padding: 15px 0; position: relative; overflow: hidden; zoom: 1; } .panel.round > .middle { width: 930px; padding: 10px 15px; background: transparent url(../img/silver/common/panels-bg.png) repeat-y; background-position: -960px 0; } .panel.round > .top, .panel.round > .bottom { display: block; width: 960px; height: 15px; position: absolute; left: 0; } .panel.round > .top { top:0; background: transparent url(../img/silver/common/panels-bg.png); background-position: 0 0; } .panel.round > .bottom { bottom:0; background: transparent url(../img/silver/common/panels-bg.png); background-position: 0 -15px; } /** * ============== * I.06 - Buttons * ============== */ a.link-btn { display: inline-block; text-decoration: none; font-size: 13px; color: #222; padding:1px 8px; border: 1px solid #aaa; border-bottom-color: #999; border-top-color: #c9c9c9; background: #ccc url(../img/silver/common/btn-bg.gif) center center repeat-x; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.link-btn:hover { text-decoration: none; background-position: 50% 40%; border-color: #777; color: #000; } a.link-btn:active { text-decoration: none; background-position: 50% 60%; border-color: #555; color: #000; } /** * ================================ * I.07 - Miscelaneus global styles * ================================ */ .no-margin-bottom { margin-bottom:0 !important; } .align-right { text-align:right; } .align-left { text-align:left; } .align-center { text-align:center; } .icon-middle { vertical-align:middle; } .margin-left-large { margin-left: 20px !important; } /** * ****************************************** * * II. - INDIVIDUAL TEMPLATE ELEMENTS * * ****************************************** */ /** * ============== * II.01 - Header * ============== */ /*** Transparent container for logo and login box ***/ #top-panel { width: 930px; height: 65px; margin: 15px auto 5px auto; overflow: visible; zoom: 1; position: relative; } #top-panel-brand { margin: 0; padding: 0; margin-left:-10px; margin-bottom:0px; position: absolute; bottom: -7px; width: 237px; height: 70px; left: 5px; } #top-panel-brand-img { display: block; } /*** Sliding-down login box ***/ #login-box { width: 304px; height: 75px; position: absolute; top: -65px; right: 0; background: transparent url(../img/silver/common/login-form.png); } #login-user-field, #login-password-field { width: 127px; height: 15px; font-size: 13px; line-height: 15px; padding: 0; background: none; border: 0; } #login-user-field { position: absolute; top: 15px; left: 14px; } #login-password-field { position: absolute; top: 15px; left: 162px; } #login-user-label { font-size: 13px; position: absolute; top: 12px; left: 14px; } #login-pass-label { font-size: 13px; position: absolute; top: 12px; left: 162px; } #login-box-slide-btn { position: absolute; bottom: 7px; left: 236px; font-size: 13px; line-height: 15px; font-weight: bold; color: #777; padding: 5px 15px 0 5px; cursor: pointer; } #login-box-slide-btn.up { background: transparent url(../img/silver/common/sprites-small.png) right bottom no-repeat; background-position:42px -19px; } #login-box-slide-btn.down { background: transparent url(../img/silver/common/sprites-small.png) right bottom no-repeat; background-position:26px 3px; } /*** Main navigation ***/ #main-nav-panel { width: 925px; height:50px; padding: 10px 25px 10px 10px; position: relative; overflow: hidden; zoom: 1; background: transparent url(../img/silver/common/panels-bg.png) no-repeat; background-position: 0 -30px; } .main-nav-list { margin: 0; padding: 0; position: relative; } .main-nav-list-item { margin: 0; padding: 0; list-style: none; position: relative; } .subnav-list { display:none } .main-nav-link, .main-nav-link:hover { outline:none; text-decoration: none; } .main-nav-list.root { display: inline-block; float: left; list-style:none; margin:0; padding:0; line-height:50px; border-right: 1px solid #fff; } .main-nav-list.root > .main-nav-list-item { display:block; float:left; height:50px; margin:0; padding:0; border-left: 1px solid #fff; border-right: 1px solid #ddd; } .main-nav-list.root > .main-nav-list-item.first { border-left:0; } .main-nav-list.root > .main-nav-list-item > a { display:block; padding:0 15px; color: #333; text-decoration: none; } .main-nav-list.root > .main-nav-list-item > a.has-subnav { padding-right:30px; } .main-nav-subnav { position:absolute; display:block; width: 160px; padding: 15px; background: #f0f0f0; border: 1px solid #f6f6f6; -moz-box-shadow: 0 2px 1px #666; -webkit-box-shadow: 0 2px 1px #666; box-shadow: 0 2px 1px #666; } div.level-1 { border-top-color: #ddd; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; } div.level-n { -moz-border-radius: 6px; -webkit-border-radius: 6px; } .subnav-list { border-top: 1px solid #ddd } .subnav-list li { display:block; list-style: none; margin: 0; line-height: 20px; border-bottom: 1px solid #ddd; padding: 0; } .subnav-list a { display:block; padding: 2px; color: #333; text-decoration: none; } .subnav-list a:hover, .subnav-list a:active, .subnav-list > .item-hover a { border:0; text-decoration:none; color:#fff; background: #5b7f59; text-decoration: none; } #main-nav-home-link { text-indent:-9999px; min-width:20px; background: transparent url(../img/silver/common/home-icon.png) no-repeat; background-position: 50% 50%; } /*** Search form ***/ #search-form { display:inline-block; margin: 0; padding:0; border:0; position: absolute; top: 22px; right: 25px; } #search-form-search-field, #search-field, #search-submit { display: block; height: 25px; width: 112px; margin: 0; padding:0; border:0; float:left; -moz-border-radius: 0; -webkit-border-radius: 0; } #search-form-submit { display: inline; } #search-form-search-field { background: transparent url(../img/silver/common/search-field.png) no-repeat; } #search-field { background: none; font-size: 13px; line-height: 24px; padding-left: 2px; } #search-field:focus { background: none; border: 0; } #search-submit { width:29px; background: transparent url(../img/silver/common/search-icon.png) no-repeat; text-indent: -9999px; } #search-label { outline:none; font-size: 13px; position: absolute; top: 2px; left: 5px; } /** * ============== * II.02 - Footer * ============== */ /*** Overriding some global styels ***/ #footer-panel { color: #c7c7c7; } #footer-panel h1, #footer-panel h2, #footer-panel h3, #footer-panel h4, #footer-panel h5, #footer-panel h6 { color: #bbb; } #footer-panel .lines-list, #footer-panel .lines-list li { border-color: #424d41 } #footer-panel .pad { background: transparent url(../img/common/white-bg-18pc-opacity.png); } /*** Footer widgets ***/ #footer-contact-form, #footer-twitter-widget { min-height: 230px; margin-bottom: 0; } #footer-contact-form .form-element { position: relative; margin-bottom: 10px; } #footer-contact-email-field, #footer-contact-message-field { width: 252px; color: #999; border-color: #2d382d; border-top-color: #1c261c; border-bottom-color: #4a5c49; background: transparent url(../img/silver/common/footer-form-field-bg.png) bottom repeat-x scroll; } #footer-contact-email-lable, #footer-contact-message-lable { position: absolute; top: 4px; left: 5px; color: #777 } #footer-contact-email-field:focus, #footer-contact-message-field:focus { outline: none; background: #fff; border-color: #000; color: #000 } #footer-form-info { font-size: 15px; font-weight: bold; } .social-media-link:hover { position:relative; top: -1px; } /*** Footer footnotes section ***/ .footnotes-separator { width: 940px; margin: 0 auto; padding: 0; height: 1px; color: #777; background: #777; } #footnotes-panel { width: 910px; margin: 15px auto; overflow: hidden; zoom: 1; color: #888; font-size: 12px; } #footnotes-panel a { color: #999; } #footnotes-copy-note { float: left; width: 596px; } #footnotes-logo { float: right; } /** * =============== * II.03 - Sidebar * =============== */ /*** General sidebar widget styles ***/ .sidebar-widget-heading { background: #3a4c3a; color: #ececec; padding:10px 10px; margin-bottom:0px; font-size: 17px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; } .sidebar-widget { display: block; overflow:hidden; zoom:1; margin: 0 auto 15px auto; padding: 9px; background: #e4e4e4; border: 1px solid #ccc; border-top: 0; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; } .sidebar-widget > :last-child { margin-bottom: 0; } .sidebar-ads-widget > img { padding: 2px; } /*** RSS widget ***/ #rss-widget-heading { margin: 0; padding:0; } #rss-widget-icon { margin: 0 10px 0 0; } /*** Newsletter widget ***/ #newsletter-sub-email { width: 180px; position: relative; float: left; margin: 0; } #newsletter-sub-email-label { position: absolute; left: 5px; top: 5px; } #newsletter-sub-email-field { width: 160px; height: 17px; } #newsletter-sub-submit { height: 29px; margin: 0; float: left; } /*** Tabbed widget ***/ ul.tabNavigation li { display: inline; margin:0; padding:0; } .tabNavigation a { display:block; overflow:hidden; float:left; text-decoration: none; color: #ececec; } .tabs { display:block; overflow:hidden; float:left; } .tab { display:block; overflow:hidden; float:left; width:120px; } .selected { background: #5b7f59 } .left-border { border-left:2px solid #ddd } #news { display: block; float:left; overflow:hidden; width:262px; } #news p { clear:both; } #articles { display: block; float:left; overflow:hidden; width:262px; } /** * ================================================== * II.04 - Frontpage slider * * jQuery Nivo Slider v1.9 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * March 2010 * ================================================== */ #slider { height: 300px; margin: 0 10px 8px 10px; } /*** The Nivo Slider styles ***/ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /*** If an image is wrapped in a link ***/ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /*** The slices in the Slider ***/ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /*** Direction nav styles (e.g. Next & Prev) ***/ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:5px; display:block; width:30px; height:30px; background:url(../img/silver/common/prev.png) no-repeat; text-indent:-9999px; } .nivo-nextNav { right:5px; display:block; width:30px; height:30px; background:url(../img/silver/common/next.png) no-repeat; text-indent:-9999px; } /*** Control nav styles (e.g. 1,2,3...) ***/ .nivo-controlNav { position:absolute; right:0px; bottom:-16px; } .nivo-controlNav a { display:block; width:10px; height:11px; background:url(../img/silver/green/slider-btn.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background:url(../img/silver/green/slider-btn-active.png) no-repeat; } /*** Ajax loader ***/ #slider { position:relative; background:url(../img/silver/common/nivo-ajax-loader.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } /** * =============================== * II.05 - "Galleria" image slider * Used in portfolio-3.html * =============================== */ #gallery-slider { height:400px; position:relative; overflow:hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; margin-bottom: 15px; background: #e4e4e4 url(../img/silver/common/gallery-ajax-loader.gif) no-repeat scroll 50% 50%; border: 1px solid #ccc; } #gallery-slider img { display:none; } .galleria-container { height:400px; position:relative; overflow:hidden; } .galleria-container img { -moz-user-select:none; -webkit-user-select:none; -o-user-select:none; } .galleria-stage { position:absolute; top:10px; bottom:50px; left:10px; right:10px; overflow:hidden; } .galleria-thumbnails-container { height:40px; bottom:0; position:absolute; left:10px; right:10px; z-index:2; } .galleria-carousel .galleria-thumbnails-list { margin-left:30px; margin-right:30px; } .galleria-thumbnails .galleria-image { height:30px; width:50px; background:#000; margin:0 5px 0 0; border:1px solid #000; float:left; cursor:pointer; } .galleria-counter { position:absolute; bottom:10px; left:10px; text-align:right; color:#fff; font:normal 11px/1 arial,sans-serif; z-index:2; } .galleria-loader { background:#e4e4e4; width:20px; height:20px; position:absolute; top:10px; right:10px; z-index:2; display:none; background: url(../img/silver/common/themes/classic/classic-loader.gif) no-repeat 2px 2px; } .galleria-image-nav { position:absolute; top:50%; margin-top:-15px; width:100%; height:31px; left:0; } .galleria-image-nav-left, .galleria-image-nav-right { opacity:.7; cursor:pointer; width:16px; height:31px; position:absolute; left:10px; z-index:2; } .galleria-image-nav-right { left:auto; right:10px; background-position:-300px 0; z-index:2; } .galleria-image-nav-left:hover, .galleria-image-nav-right:hover { opacity:.5; } .galleria-thumb-nav-left, .galleria-thumb-nav-right { cursor:pointer; display:none; background-position:-495px 0; border-right:1px solid #333; position:absolute; left:0; top:0; height:30px; width:23px; z-index:3; opacity:.8; } .galleria-thumb-nav-right { background-position:-578px 0; border-left:1px solid #333; border-right:none; right:0; left:auto; } .galleria-thumbnails-container .disabled, .galleria-thumbnails-container .disabled:hover { opacity:.2; cursor:default; } .galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover { opacity:1; background-color:#111; } .galleria-carousel .galleria-thumb-nav-left, .galleria-carousel .galleria-thumb-nav-right { display:block; } .galleria-thumb-nav-left, .galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, .galleria-image-nav-left, .galleria-image-nav-right { background-image:url(../img/silver/common/classic-map.png); background-repeat:no-repeat; } /** * ============================ * II.06 - Pages and blog posts * ============================ */ /*** Frontpage action panel ***/ #action-panel-col-1 { background: transparent url(../assets/images/silver/action-panel-1.png) no-repeat; background-position: 1px 17px; } #action-panel-col-2 { background: transparent url(../assets/images/silver/action-panel-2.png) no-repeat; background-position: 1px 17px; } #action-panel-col-1 > h3, #action-panel-col-1 > h7, #action-panel-col-1 > p, #action-panel-col-2 > h3, #action-panel-col-2 > h7, #action-panel-col-2 > p { padding-left: 115px; } /*** Blog post metadata ***/ .post-info { margin-bottom:15px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; color: #666; } .post-info a { text-decoration: none; } .post-info a:hover { text-decoration: underline; } .post-info-date, .post-info-author, .post-info-category, .post-info-comments { font-size:11px; padding-left:20px !important; background:transparent url(../img/silver/common/post-icons.png) no-repeat; } .post-info-date { background-position:-60px -2px; } .post-info-author { background-position:0 -62px; } .post-info-category { background-position:-40px -22px; } .post-info-comments { background-position:-20px -42px; } /*** Blog post author box ***/ #author-info-txt { padding-left: 140px; } /*** Blog post comments ***/ #comments-heading { position:relative; overflow:hidden; zoom:1; } #leave-comment-link { position:absolute; right:10px; top:7px; display: inline; font-size: 15px; line-height:25px; margin:0; padding: 2px 20px 2px 10px; color: #fff; background: #86a685 url(../img/silver/green/arrow-list-hover.gif) no-repeat; background-position:130px 11px; border: 1px solid #677f66; border-bottom-color: #5d735c; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #leave-comment-link:hover { border-color: #595959; background-color: #9abf99; } .comment-list { list-style: none; margin: 0 0 15px 0; padding: 0; } .comment-list-item { list-style: none; display: block; margin: 15px 0 0 0; padding: 0; overflow: hidden; zoom: 1; } .children { margin-top: 9px; } .children .comment-list-item { margin-top: 9px; } .comment-txt, .children { margin-left: 83px; } .children .comment-txt, .children .children { margin-left: 63px; } .comment-txt { background: #fff; padding: 9px; border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .comment-author-avatar { display: block; float: left; background: #fff; padding: 6px !important; border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .comment-author { margin-bottom: 0; } .comment-date { font-size: 11px; } #comment-form input.text, #comment-form textarea { width:385px; } /*** Pagination ***/ .pagination { overflow:hidden; zoom:1; margin:0 0 15px 0; } a.pagination-link, .pagination-link.current { display:block; float:left; margin-right:3px; padding:1px 8px; font-size:13px; text-decoration:none; color: #222; } .pagination-link { border: 1px solid #aaa; border-bottom-color: #999; border-top-color: #c9c9c9; background: #ccc url(../img/silver/common/btn-bg.gif) center center repeat-x; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .pagination-link:hover { text-decoration: none; background-position: 50% 40%; border-color: #777; color: #000; } .pagination-link:active { text-decoration: none; background-position: 50% 60%; border-color: #555; color: #000; } .pagination-link.current { color: #555; background: #ccc; border: 1px solid #aaa; } /** * =================================== * II.06 - Portfolio and gallery pages * =================================== */ #gallery-page-heading { margin-bottom: 15px; } .gallery-image { margin-bottom:10px !important; display:block; cursor:pointer; } .gallery-row { margin-bottom: 30px; } .gallery-row.last { margin-bottom: 5px; } .gallery-item > p { margin-bottom: 10px; } .prettyPhotoOverlay { cursor:pointer; } #portfolio-page-heading { margin-bottom: 15px; } .portfolio-item-image { margin-bottom: 0 !important; display: block; cursor: pointer; } .portfolio-item-text { width: 294px; float: left; } #page-heading { margin-bottom: 15px; } .page-item-image { margin-bottom: 0 !important; display: block; cursor: pointer; } .page-item-text { width: 294px; float: left; } /** * ==================== * II.07 - Contact page * ==================== */ #contact-page-heading { font-size: 24px; margin-bottom: 15px; } #contact-form { clear: both; } #contact-form input.text, #contact-form textarea { width: 418px; } #form-info { font-size: 22px; line-height: 40px; display:block; background: #fff; padding: 9px; border: 1px solid #ccc; clear: both; -moz-border-radius: 4px; -webkit-border-radius: 4px; display:none; } #contact-address { float: left; width: 450px; } #addr { padding-left: 40px; background: transparent url(../img/silver/common/envelope-icon.gif) no-repeat; background-position: 0px 3px; } #tel { padding-left: 40px; background: transparent url(../img/silver/common/telephone-icon.gif) no-repeat; background-position: 1px 3px; } /** * ======================= * II.08 - Grids demo page * ======================= */ .grids-page-grid-heading { width: 980px; margin-left: auto; margin-right: auto; margin-top: 15px; color: #eee; } .grids-page-grid-comment { width: 980px; margin-left: auto; margin-right: auto; color: #eee; } #panel-7 .column , #panel-8 .column , #panel-9 .column, #panel-10 .column, #panel-11 .column { background: transparent url(../img/common/white-bg-18pc-opacity.png); color: #eee; }