/* Theme URI: http://pordesign.eu Version: 1.0 Author: Por Design Author URI: http://pordesign.eu */ /* TABLE OF CONTENTS - start */ /* = start =============GENERAL============== */ /* = start =============STRUCTURE============== */ /* external structure (elements that make up for external page layout (eg. #wrapper, #container) The rest of styling for these selectors can be found in corresponding sections of this css file */ /* internal structure */ /*columns*/ .clear { clear:both; } /*= start =============SITE-WIDE CUSTOM STYLES + CONTENT==============*/ /*main-heading*/ /*main-heading slider*/ /*first-letter*/ /*pull-quote*/ /*blockquote*/ /*tooltip*/ /*social icons (news) */ /*social-2 icons (header and footer) */ /*nivo-slider*/ /*boxes*/ /*toggle boxes*/ /*image frame*/ /*separators / dividers*/ /*iframe (video)*/ /*buttons*/ /*sitemap list*/ /*categories-2 list*/ /*testimonials*/ /* news-overview */ /* news */ /* news > comment form */ /* news > comments / discussion */ /*success-stories*/ /*introduction (video+description)*/ /*highlights (4 columns)*/ /*gallery*/ /*pagination*/ /*pagination compact (expandible arrows only)*/ /*flickr feed*/ /*popular recent posts / news-overview-2 */ /*recent tweets */ /*contact form*/ /*search form*/ /*= start =============HEADER==============*/ /*logo*/ /*nav */ /*helpdesk*/ /*= start =============FOOTER==============*/ /*nav */ /*archives*/ /*copyright */ /*slider nav*/ /*partners*/ /*= start =============LIGHTBOX==============*/ /* TABLE OF CONTENTS - end */ /* = start =============GENERAL============== */ body { font: 10pt/150% Helvetica, Arial, sans-serif; margin: 0; padding: 0; color: #737373; background: url(images/gr-1.gif) 0 0 repeat;} a { text-decoration: none; } a:visited { } a:hover, a:focus { text-decoration: underline; } a:active { } a img { border: none; } table { border-collapse: separate; border: 1px solid #333; margin: 20px auto; border-right: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf;font-size: 1.2em; border-bottom: #707070; -webkit-box-shadow: #555 0 1px 1px; -moz-box-shadow: #555 0 1px 1px; box-shadow: #555 0 1px 1px; padding: 0; background-position: 0 0; border-top: none; -webkit-border-radius: 4px; border-radius: 4px; -moz-border-radius: 4px; background-image: url(images/table-bg.png); background-position: 0 bottom; background-repeat: repeat-x; background-color: #f6f6f6;} .table-wrapper > table { width: 100%; } table td, table th { border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; margin: 0;text-align: center; padding: 13px 10px; color: #454545; } table.contentalignleft td, table.contentalignleft th { text-align: left; } table.contentalignright td, table.contentalignright th { text-align: right; } table th { font-weight: normal; color: #000; font-size: 1em; } table td { font-size: .9em; } table tr:first-child { background: #eee; } table th:last-child, table td:last-child { border-right: none; } table th:first-child, table td:first-child { border-left: none; } table.js .tooltip { display: block; font-size: .8em; line-height: 1em;} table .tooltip span { background-image: none; padding-left: 20px;} h1, h2, h3, h4 { /*padding: 20px 0 20px; */margin-top: 30px; margin-bottom: 25px; font-weight: normal; color: #48A2A3; } h1 span, h2 span, h3 span, h4 span { padding: 0; /*be careful with underline sprite when changing bottom padding*/ letter-spacing: -1pt; display: inline;clear: left; margin-bottom: 0px;} * + h1, * + h2, * + h3, * + h4 { margin-top: 10px; } h1 { font-size: 2em; } h2 { font-size: 1.9em; } h3 { font-size: 1.5em } h4 { font-size: 1.5em; color: #595959; } h5 { font-size: 110%; text-transform: uppercase; font-weight: normal; line-height: 1.3em;margin-top: 25px; margin-bottom: 25px; } h6 { font-size: 100%; text-transform: uppercase; font-weight: normal; line-height: 1.3em;margin-top: 25px; margin-bottom: 25px; } h3 span { padding-bottom: 1px; } h4 span { padding-bottom: 1px; background: url(images/underline-1-gray.png) 0 bottom repeat-x;} * > h1:first-child, * > h2:first-child,* > h3:first-child,* > h4:first-child {margin-top: 0; padding-top: 5px;} h2 span a { color: #48A2A3; } h2 span a:hover, h2 span a:focus { text-decoration: none; } p { margin: 20px 0; padding: 0 0 3px; text-align: justify;} p strong { } abbr { font-size: 150%; } dl { margin: 10px 0; } dt { font-weight: bold; margin: 0; padding: 5px 5px 2px 0;} dd { margin: 0 0 5px; padding: 2px 0 5px; } ul, ol { margin: 20px 0; padding: 0; list-style-position: outside;} ul li, ol li { margin: 5px 0 0 1.5em; padding: 0 0 5px; } form { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border: none; } fieldset {margin: 0; padding: 0;border: none; } form ul, form li { list-style: none; margin: 0; padding: 0; float: left; width: 100%;} form li { margin: 3px 0; display: block;} form ul li.half {width: 45% !important;margin-right: 10%;} form ul li.half + li.half {margin-right: 0;} input[type="text"], textarea {-webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #a1a1a1; border-left: 1px solid #c4c4c4; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; background: #fff;/* background: url(images/form-item-bg-1.gif) 0 0 repeat-x;*/ color: #868686; font: 10pt/150% Helvetica, Arial, sans-serif;/* width: 98%;*/display: block; /*padding: 5px 2% can't use this because of FIREFOX bug with handling percentage paddings for inputs. STACK OVERFLOW solution is used below instead to avoid any dodgy workarounds*/ ;font-size: .9em; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; padding-right: 10px;} /*STACK OVERFLOW solution for 100% px width fluid inputs*/ input[type="text"], textarea { display:block; padding:5px 10px; width:100%; box-sizing: border-box; /* css3 rec */-moz-box-sizing: border-box; /* ff2 */ -ms-box-sizing: border-box; /* ie8 */ -webkit-box-sizing: border-box; /* safari3 */ -khtml-box-sizing: border-box; /* konqueror */ } input[type="text"]:hover,input[type="text"]:focus,textarea:hover,textarea:focus { color: #000; } form a { color: #000; } form .valid { background: url(images/valid.png) 100% 4px no-repeat; } form .error { background: url(images/error.png) 100% 4px no-repeat; } /* = end =============GENERAL============== */ /* = start =============STRUCTURE============== */ /* external structure (elements that make up for external page layout (eg. #wrapper, #container) The rest of styling for these selectors can be found in corresponding sections of this css file */ #wrapper { float: left; width: 100%; overflow: hidden; position: relative;} #container { width: 1020px; margin: 0 auto; padding: 0; } #container:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; } #header, #content, #footer {width: 100%; float: left; } #header { position: relative; z-index: 999;/*for the subnavs not to get covered by anything*/ } #footer { width: 1600px; margin: 0 -310px; /*special treatment due to the background*/} #footer .wrapper { padding: 0px 290px 35px; float: left; width: 1020px;position: relative;} /* internal structure */ /* single main column */ .main { width: 1020px; float: left; margin-left: -20px; } /* main column + right sidebar */ .main.left { width: 684px; float: left; margin-left: -20px;} /* main column */ .sidebar.right { width: 336px; float: left;} /* right sidebar */ /* main column + left sidebar */ .main.right { width: 684px; float: right; margin-right: 20px;} /* main column */ .sidebar.left { width: 336px; float: left; margin-left: -20px; } /* left sidebar */ /*columns*/ .columns { width: 100%; padding-top: 0px; padding-bottom: 20px; clear: left;} .columns:first-child { padding-top: 20px; } .columns, .columns > div{ float: left; /*background: #fff*/ } .columns.single > div{ width: 100%; } .columns.two > div{ width: 50% } .columns.three > div{ width: 33% } .columns.three > div:first-child { width: 34%; margin-left: -1px; /*IE7*/ } /* to make up for one percent lost (3x33+1=100)*/ .columns.four > div{ width: 25% } .columns > div.fourth{ width: 25%;} .columns.three > div.fourth{ width: 25%;} .columns > div.three-fourth, .columns > li.three-fourth { width: 75%; } .columns > div.third, .columns > li.third { width: 33%; } .columns > div.third:first-child{ width: 34%; } .columns > div.two-third { width: 66%; } .columns > div.two-third:first-child { width: 67%; } .columns > div.half{ width: 50%; } .columns .columns > div { margin-right: -1px; } .columns > div > * { margin-left: 40px; /*background: #aaa;*/} .columns .columns { margin-left: 0px; /*background: #bbb;*/ margin-bottom: -20px;} .columns .columns:first-child { padding-top: 0; /*background: red;*/} /* = end =============STRUCTURE============== */ /*= start =============SITE-WIDE CUSTOM STYLES + CONTENT============== */ ul[class*="style"] { padding-left: 0; } ul[class*="style"] li { background-position: 0 1pt; background-repeat: no-repeat; list-style: none; padding-left: 12px; margin-left: 0; padding-left: 35px;} ul.style-1 li { background-image: url(images/list-styles/check/1.png); } ul.style-2 li { background-image: url(images/list-styles/check/2.png) } ul.style-3 li { background-image: url(images/list-styles/check/3.png) } ul.style-4 li { background-image: url(images/list-styles/check/4.png) } ul.style-5 li { background-image: url(images/list-styles/check/5.png) } ul.style-6 li { background-image: url(images/list-styles/check/6.png) } ul.style-7 li { background-image: url(images/list-styles/check/7.png) } ul.style-8 li { background-image: url(images/list-styles/arrows/1.png) } ul.style-9 li { background-image: url(images/list-styles/arrows/2.png) } ul.style-10 li { background-image: url(images/list-styles/arrows/3.png) } ul.style-11 li { background-image: url(images/list-styles/arrows/4.png) } ul.style-12 li { background-image: url(images/list-styles/arrows/5.png) } ul.style-13 li { background-image: url(images/list-styles/arrows/6.png) } /*fake shadow*/ .border { border: 1px solid #ddd; border-top: 1px solid #eee; border-bottom: 1px solid #bbb;} /*main-heading*/ /* info for gabshot - I suggest that instead of setting the heading height explicitly it'll autoexpand depending on what's inside */ #main-heading {float: left; width: 1600px; margin: 0 -290px 0; color: #fff; max-height: 445px;} #main-heading .wrapper { float: left; width: 980px; padding: 30px 310px 0px; margin: 0; background: url(images/main-heading-bottom-shadow.png) 0 100% repeat-x;} /*title*/ #main-heading h2 { padding-bottom: 7px; font-size: 24pt; display: block; background: none; color: #fff; margin: 0 0 -6px; padding: 0 0 30px; } #main-heading.error .wrapper { padding-bottom: 25px; } #main-heading.error h2 {color: #fff88d; text-shadow: #333 1px 1px 1px; width: 100%; text-align: center; font-size: 10em; font-weight: bold; margin: 10pt 0 0pt;float: left; line-height: 1em;} #main-heading h2 span { background: none; color: #fff88d; } /*breadcrumb*/ #breadcrumb, #breadcrumb ul, #breadcrumb li { margin: 0; padding: 0; list-style: none; display: inline;} #main-heading #breadcrumb { float: left; width: 100%; font-size: .8em; padding-bottom: 15px;} #main-heading .wrapper > #breadcrumb:first-child, #main-heading .wrapper > .social-2 + #breadcrumb { padding-bottom: 5px; margin-top: -19px; } /*catchphrase*/ #main-heading .catchphrase { font-size: 1em; margin: 15px 0 10px; padding: 0; float: left; width: 60%;} #main-heading h2 + .catchphrase { margin-top: -15px; font-size: 14px; } #main-heading h2 + #breadcrumb { margin-top: -25px; } #main-heading.error .catchphrase { margin-left: 20%; margin-right: 20%; width: 60%; text-align: center; font-size: 2em; line-height: 1.2em;color: #fff;} #main-heading.error h2 + .catchphrase { margin-top: 0px; margin-bottom: 0; padding-bottom: 20px;} #main-heading .wrapper > .catchphrase:first-child, #main-heading .wrapper > .social-2 + .catchphrase, #main-heading .wrapper > .social-2-holder + .catchphrase { padding-bottom: 5px; margin-top: -10px;margin-bottom: 0; padding-bottom: 12px;} /*main-heading slider*/ #main-heading.slider { margin-bottom: 40px; } #main-heading.slider .wrapper { /*height: 275px;*/ } /*main heading specific nivo-slider-holder*/ #main-heading .nivo-slider-holder { position: relative; z-index: 1; margin-bottom: -20px;} #main-heading[class*="align"] .nivo-slider-holder { width: 640px; background: url(images/main-heading-slider-shadow.png) 0 100% no-repeat; height: 335px;} #main-heading.alignleft .nivo-slider-holder { margin-left: -60px !important; padding-left: 60px; padding-right: 50px; float: left; margin-bottom: -60px;} #main-heading.alignright .nivo-slider-holder {float: right; margin-right: -70px !important; padding-right: 60px; padding-left: 50px; margin-bottom: -60px; } /*#main-heading[class*="align"] .nivo-slider { width: 630px; }*/ /*info*/ #content #main-heading .info { float: left; width: 290px; position: relative; clear: none !important;padding-bottom: 70px; margin-bottom: -26px; min-height: 230px;} #main-heading .info h2 { line-height: 1.2em; padding-bottom: 5px; } #main-heading .info p { font-size: 1em; width: 100%; margin-top: 25px; text-align: left;} #main-heading .info .button { position: absolute; bottom: 0; width: 100%;} #main-heading .info .button.alignleft { left: 0; width: auto;} #main-heading .info .button.alignright { right: 0; width: auto;} #main-heading.alignright .info { text-align: right; } #main-heading.alignright .info p { text-align: right; } /*main-heading specific social-2 styles*/ #main-heading .social-2-holder { float: left; position: relative; width: 20%;margin-left: 80%;margin-top: -5px; margin-bottom: -32px; z-index: 1} #main-heading .social-2 { width: auto; margin-right: -10px; float: right; position: relative; z-index: 1;} #main-heading .social-2 li { position: relative; } #main-heading .social-2 li a { margin-right: 10px; position: relative; z-index: 999;} /*main-heading twitter kind specific styles*/ #main-heading.twitter .wrapper { padding-top: 35px; padding-bottom: 15px; } #main-heading.twitter h2 { font-size: 2.6em; } #main-heading.twitter h2 + #breadcrumb { margin-top: -5px; } /*first-letter*/ .first-letter span.dropcap { float: left; margin-bottom: -5px; padding-right: 5px;margin-top: 10px;font-size: 3em;} /*pull-quote*/ q.pull-quote { font-size: 1.2em; width: 88%; display: block; /* 100% width by default*/background: url(images/gr-2.gif) 0 0 repeat; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 20px 6%; margin: 30px; margin-left: 0; line-height: 1.6em; color: #1a1a1a; line-height: 1.5em; } q.pull-quote.alignleft { float: left; margin-left: 0; width: 30%; text-align: left;} q.pull-quote.alignright { float: right; margin-right: 0; width: 30%; margin-left: 30px; text-align: right;} /*blockquote*/ blockquote {font-size: 1.2em; background: url(images/gr-2.gif) 0 0 repeat; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0;margin: 20px 0;line-height: 1.2em; color: #1a1a1a;} blockquote p { padding: 30px 30px 30px 85px; background: url(images/blockquote.png) 22px 22px no-repeat; margin:0; line-height: 1.5em; } /*tooltip*/ .tooltip {position: absolute; padding: 9px 0 0; background: url(images/tooltip-foot.png) 100% 0 no-repeat; width: 200px; display: none; /*hide the tooltips when js is disabled*/ z-index: 999;} .tooltip.js {display: block; } /* show the tooltips when js is on */ .tooltip span { display: block; float: right;width: auto; padding: 8px 18px !important;line-height: 1.3em; text-align: center;font-size: 1em; color: #515153; background: #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-shadow: rgba(29,15,7,.35) 1px 1px 3px; -moz-box-shadow: rgba(29,15,7,.35) 1px 1px 3px; box-shadow: rgba(29,15,7,.35) 1px 1px 3px;} .tooltip strong { font-size: 1.2em; } /*social icons (news) */ .social { margin: 0 0px 0 -25px; float: left; width: 540px; padding: 0 0 0 200px; position: relative; float: left; background: url(images/share-me.png) 30px 20px no-repeat; min-height: 160px;} .social h2 { margin-top: 20px !important; } .social ul { margin: 20px 0 0 -10px; list-style: none; padding: 0;} .social li { float: left; position: relative; width: 66px;list-style: none; padding: 0; margin: 0;} .social a { float: left; color: #111; text-decoration: none; height: 50px;background: url(images/social/social-shadow.png) 50% 29px no-repeat; position: relative; width: 100%;} .social a:hover, .social a:focus { background-position: 50% -119px; } .social img { margin: 0 auto 0; display: block; } .social a:hover img, .social a:focus img { margin: -10px auto 0px; padding: 0 0 10px; } .social li > a > span { display: block; padding: 5px 0 10px; margin: 0 0 -20px; position: relative; text-align: center; font-size: 8pt; } .social a:hover span, .social a:focus span {} /*social-2 icons (header and footer) */ /*gabshot - approximate visuals*/ .social-2, .social-2 li { margin: 0; padding: 0; list-style: none; border: none !important; float: left;} .social-2 { width: 110%} .social-2 li { } .social-2 a { width:32px; height: 32px; overflow: hidden; display: block; margin-right: 32px;} .social-2 a img { display: block; } .social-2 a:hover img, .social-2 a:focus img { margin-top: -32px; } /* social-2 specific tooltip*/ .social-2 .tooltip * { background-image: none; padding-left: 20px;} /*nivo-slider*/ /*js info - .nivo slider - has to have container div added with js in order to apply border in browsers that dont support box-shadow*/ .nivo-slider-holder {} .nivo-slider-holder.alignright { float: right; width: auto; } .nivo-slider-holder.alignleft { float: left; width: auto;} .nivo-slider { border: 5px solid #fff;-webkit-box-shadow: #333 0 1px 2px; -moz-box-shadow: #333 0 1px 2px; box-shadow: #333 0 1px 2px; } .nivo-slider-holder.alignright .nivo-slider { float: right; width: auto; } .nivo-slider-holder.alignleft .nivo-slider { float: left; width: auto;} .nivo-directionNav { display: none !important; } /*js info - .nivo-controlnav has to be centered with js */ .nivo-controlNav {position: absolute; bottom: -2px; z-index: 9999 !important;} .nivo-controlNav a { float: left; text-indent: -9999px; width: 11px; height: 11px; background: #fff url(images/nivo-control-nav-item-bg.png) 0 0 no-repeat; border: 4px solid #fff; boder-bottom: 3px solid #fff;} .nivo-controlNav a.active, .nivo-controlNav a:hover, .nivo-controlNav a:focus { background-color: #96C61A; } /*boxes*/ /* info - frame needs to have borders added via js for browsers that dont support box-shadow property*/ .box { min-width: 260px; margin-bottom: 20px; margin-top: 20px; -webkit-box-shadow: #333 0 1px 2px; -moz-box-shadow: #333 0 1px 2px; box-shadow: #333 0 1px 2px; padding: 0; background-position: 0 100%; background-repeat: repeat-x;} .box[attr*="style"] { min-width: 0px; } .box span { padding: 30px 25px 25px 90px; display: block; color: #000; font-size: 1.1em; background-position: 0 0; background-repeat: no-repeat; min-height: 25px;} /*box aligned left*/ .box.alignleft { width: 40%; float: left; margin-right: 40px;} /*box aligne right*/ .box.alignright { width: 40%; float: right;} .box.alignright span { padding-right: 90px; padding-left: 35px; background-position: 100% 0;} /*box aligned center*/ .box.aligncenter { width: 50%; margin: 0 auto; clear: both;} /*info box*/ .box.info { background-color: /*c1d1e2*/#ebf5fe; background-image: url(images/info-box-gr.png);} .box.info span { background-image: url(images/icons/info.png) } /*warning box*/ .box.warning { background-color: /*f5bdbf*/#fce0e3; background-image: url(images/warning-box-gr.png) } .box.warning span { background-image: url(images/icons/warning.png)} /*note box*/ .box.note { background-color: /*fff1bf*/#fffde3; background-image: url(images/note-box-gr.png) } .box.note span { background-image: url(images/icons/note.png)} /*download box*/ .box.download { background-color: /*d2e9b1*/#f0ffda; background-image: url(images/download-box-gr.png) } .box.download span { background-image: url(images/icons/download.png)} /*toggle boxes*/ a.toggle { background: url(images/toggle-content.png) 0 0px no-repeat; padding-left: 35px; line-height: 20px; text-transform: uppercase; color: #737373; display: block; margin-top: 10px; margin-bottom: 10px;} a.toggle + * { display: none; padding: 20px 35px; background: url(images/gr-2.gif) 0 0 repeat; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada;} /*toggle content is hidden by default*/ /*apply new additional class to .toggle with js when toggle content is shown*/ a.toggle.hide { background-position: 0 -20px; } a.toggle.hide + * { display: block; } /*image frame*/ .frame { padding: 5px; background: #fff; display: block; -webkit-box-shadow: #333 0 1px 2px; -moz-box-shadow: #333 0 1px 2px; box-shadow: #333 0 1px 2px; margin: 20px 0; text-decoration: none; position: relative;} .frame:hover, .frame:focus { text-decoration: none; } .frame[align="left"], .frame.alignleft { margin-left: 0; float: left; margin-right: 35px;} .frame[align="right"], .frame.alignright { margin-right: 0; float: right; margin-left: 35px;} .frame[align="center"], .frame.aligncenter { margin-right: 0; margin-left: 0;} .frame[align="center"] img, .frame.aligncenter img { margin: 0 auto; } .frame span.title-description { text-align: center; color: #737373; display: block; text-align: center; padding: 5px 0 1px; font-size: .9em; line-height: 1em; color: #000; } .frame img { display: block; margin: 0 auto;} .frame[class*="align"] img { margin: 0; /*IE7 needs this, otherwise img left/right margins expand the frame to 100% width of the container*/} /*image frame specific tooltip styles*/ /*if the image has .frame class applied - it can be centered without messing with the width in any way, unlike when a is a .frame, for it as a block takes up 100% of the space by default and nothing can be done about it without specyfying width for the a element explicitly */ img.frame { margin: 20px auto; } .frame .tooltip span { background: #fff url(images/zoom.png) 5px 50% no-repeat; padding-left: 30px !important;} /*separators / dividers*/ a[href="#header"] { display: block; background: url(images/separator-1.gif) 0 50% repeat-x; text-align: right;text-decoration: none; margin-top: 15px;min-height: 1px; clear: both;} a[href="#header"] span { background: url(images/gr-1.gif) 0 0 no-repeat; color: #bbb; padding-left: 10px; font-size: .8em;} a[href="#header"]:hover span, a[href="#header"]:focus span { color: #000; } span.separator { display: block; background: url(images/separator-1.gif) 0 50% repeat-x; text-decoration: none; margin-top: 15px;min-height: 1px; text-indent: -9999px; clear: both;} /*when the separator is put outside the columns and .columns block is its direct parent*/ .columns > a[href="#header"], .columns > span.separator { margin-left: 40px;} /*iframe (video)*/ iframe { display: block; } /*buttons*/ /*add border attribute with js for browsers that don't support shadows*/ p .button { margin-top: 20px; } .button { padding: 0; display: block; font-size: 1.3em; background-position: 100% 0; background-repeat: no-repeat; float: left; text-decoration: none; margin: 10px 0; margin-right: 20px; /*alignleft by default*/ overflow: hidden; -webkit-border-radius: 3px; -webkit-box-shadow: #333 0 1px 2px; -moz-border-radius: 3px; -moz-box-shadow: #333 0 1px 2px; border-radius: 3px; box-shadow: #333 0 1px 2px; overflow: hidden; border: none; line-height: 47px; padding-right: 76px; padding-left: 20px; height: 47px;outline: none;} .button:hover, .button:focus { text-decoration: none; background-position: 100% -48px; } .button:active {background-position: 100% -47px;/*alternate button bg gradient --> 100% -94px;*/ /*move the button text one pixel to the bottom to simulate press effect --> */ padding-top: 1px; height: 46px; } /*button underline*/ .button span, .button input { line-height: 47px; height: 47px; float: left; margin: 0; background-position: 0 29px; background-repeat: repeat-x;border: none; cursor: pointer;} .button input { font-size: 12pt !important; background: none !important;border: none !important; padding-left: 0px; margin-left: -5px;} /*#content h2 + .button { clear: both; }*/ /*right aligned (buttons are left aligned by default */ .button.alignright { float: right; margin-right: 0; margin-left: 20px;} /*wide (buttons expand relatively to the text they contain by default)*/ .button.wide { float: none; clear: both; margin-right: 0; } .button.wide[style] { margin-right: auto; margin-left: auto;} /*arrow-only - these buttons should have some text added nevertheless */ .button.arrow-only { padding-left: 0; padding-right: 0 ;/*width: 1px;*/ /*margin: 0 29px 0 20px;*/ width: 50px; text-indent: -9999px;} .button.arrow-only span {/* text-indent: -9999px; padding: 0; width: 1px; margin-left: -1px; margin: 0 29px 0 20px; */ display: none;} /*button background colors. NOTE: to change text color go to color specific styles */ .button.gray { background-image: url(images/button-gray-bg.png); } .button.yellow { background-image: url(images/button-blue-bg.png);} .button.blue { background-image: url(images/button-blue-bg.png); color: #000;} .button.yellow span, .button.yellow input { color: #a03fab; /*background image here is color theme dependant*/} .button.gray span, .button.gray input { color: #96C61A; /*background-image: url(images/button-underline-2.png);*/} .button.blue span, .button.blue input { color: #41474c; /*background-image: url(images/button-underline-3.png);*/} .button.border { border: 1px solid #ddd; border-top: 1px solid #eee; border-bottom: 1px solid #bbb;} /*sitemap list*/ .sitemap { overflow: hidden; } .sitemap, .sitemap ul, .sitemap li { margin: 0; padding: 0; list-style: none; } .sitemap a { font-size: 1.1em; color: #000; padding: 15px 0 15px 230px; display: block; background: url(images/icons/category.gif) 200px 13pt no-repeat;} .sitemap a:hover, .sitemap a:focus { background-color: #f2f2f2; text-decoration: none;} .sitemap > li { border-top: 1px solid #e5e5e5; clear: left; margin-left: -200px; } .sitemap li li { padding-left: 30px; border-top: 1px solid #e5e5e5 !important; } /*.sitemap li li a { margin-left: 30px; } .sitemap li li li a { margin-left: 60px; } .sitemap li li li li a { margin-left: 90px; } .sitemap li li li li li a { margin-left: 120px; } .sitemap li li li li li li a { margin-left: 150px; } more dodgy but safer solution, kept just in case, don't worry about it*/ .sitemap > li:first-child { border: none; float: left; width: 100%;} .sitemap > li:first-child a { width: 100%; } /*categories-2*/ .categories-2, .categories-2 ul, .categories-2 li { margin: 0; padding: 0; list-style: none; } .categories-2 { margin-bottom: 20px; } .categories-2 a { font-size: 1.1em; color: #000; padding: 15px 0 15px 30px; display: block; background: url(images/icons/newspaper.png) 0 13pt no-repeat;} .categories-2 > li > a:hover, .categories-2 > li > a:focus { background-color: #f2f2f2; text-decoration: none;} .categories-2 li { border-top: 1px solid #e5e5e5; clear: left;} .categories-2 > li:first-child { border: none; background: none;} .categories-2 li.current > a { text-align: right; text-align: right; color: #67346f; font-weight: bold;padding: 15px 56px 15px 0px; background-position: 100% 13pt; border-right: 4px solid #67346f; } .categories-2 li.current > ul { } .categories-2 li.current > ul > li {border: none; font-size: .8em; } .categories-2 li.current > ul > li:first-child {border-top: 1px solid #e5e5e5;} .categories-2 li.current > ul > li > a { color: #67346f; text-align: right; background: url(images/arrow-2.png) 100% 7pt no-repeat; padding: 5px 60px 5px 0; } /*testimonials*/ /*js info - probably will need some nifty setting of the .testimonials height*/ /*js info - need to set li width to the .testimonials width in pixels minus 200px - reason: testimonials are fluid width to fit column of every size. When js is disabled, they take 100% of the space by default and appear one under another, when js is enabled, they are supposed to SCROLL horizontaly. Do your magic, can't css that. After making the list element display horizontally, the container (.testimonials) height will adjust automatically (to the size of the longest li) That heigh needs to be adjusted dynamically with js, too, with some nice and smooth sliding shrinking/expanding effect no .js styling is required in the css for that*/ .testimonials {padding: 0;margin: 20px 0; position: relative;font-size: 1.4em; background: url(images/gr-2.gif) 0 0 repeat; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; line-height: 1.2em; color: #1a1a1a; } .testimonials:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; } .testimonials .items, .testimonials .items li { margin: 0; padding: 0; list-style: none; } .testimonials .items { margin: 0 10%; } .testimonials .items li { padding: 25px 0; width: 100%; float: left;} .testimonials .items blockquote, .testimonials p { background: none; border: none; margin: 0; padding: 0;} .testimonials blockquote {letter-spacing: -1px; } blockquote p { padding: 30px 30px 30px 85px; background: url(images/blockquote.png) 22px 22px no-repeat; margin:0;} .testimonials p { text-align: center; font-size: .9em; line-height: 1em;} /*testimonials specific slider-nav*/ .testimonials .slider-nav { position: absolute; top:50%; left: 0; margin-top: -12px;} .testimonials .slider-nav a { background-image: url(images/arrows-1b.png); } .testimonials .slider-nav li.prev { margin-left: 3%; } .testimonials .slider-nav li.next { margin-right: 3%; } .testimonials .meta { margin-top: 5px; } /*testimonials - alternate styling for columns narrower than 50%; */ .columns.three .testimonials p.meta, .columns.four testimonials p.meta, .sidebar .testimonials p.meta{margin-top: 20px; line-height: 2em; } .columns.three .testimonials .slider-nav, .columns.four testimonials .slider-nav, .sidebar .testimonials .slider-nav { top:auto; bottom: 34px;} .columns.three .testimonials .slider-nav li.prev, .columns.four testimonials .slider-nav li.prev, .sidebar .testimonials .slider-nav li.prev { margin-left: 11%;} .columns.three .testimonials .slider-nav li.next, .columns.four testimonials .slider-nav li.next, .sidebar .testimonials .slider-nav li.next { margin-right: 11%;} /* news-overview */ .news-overview { list-style: none; margin: 0; padding: 0; } .news-overview li { list-style: none; margin: 0; padding: 7px 0 0 30px; background: url(images/icons/newspaper.png) 0 10px no-repeat; color: #737373; border-top: 1px solid #e5e5e5;} .news-overview li:first-child { border-top: none; } .news-overview h3 { font-size: 1em; margin: 0 0 0px !important; padding: 0 0 3px !important; line-height: 1em;} .news-overview p { padding-bottom: 10px !important; } .news-overview li > span { font-size: .8em; display: block; margin-bottom: 5px; padding-top: 0; line-height: 1em;} .news-overview a { color: #48A2A3; text-decoration: none; } .news-overview a:hover, .news-overview a:focus { text-decoration: none; } /* news list */ .news, .news > li { margin: 0 0 0; padding: 0; list-style: none; } .news > li { margin: 20px 0 0;} .news > li:first-child { margin: 0px 0 0;} /* news > header */ .news .header { position: relative; padding-left: 70px; padding-bottom: 10px;} .news .header h2 {/*stays the same as all main h2 headings, if there are any more h2 headings inside the content of the post, they are a bit smaller*/ padding-bottom: 8px !important; margin-top: 0; padding-top: 0px; margin-bottom: 0;} .news .header h2 a { color: #000; /*hover and active states defined in the color specific styles*/} .news .header p { margin: 0; padding: 0 0 3px; font-size: .8em; } .news .header p span { padding-left: 20px; padding-right: 10px;background-image: url(images/icons/news-meta-icons.png); background-repeat: no-repeat; padding-bottom: 3px;} .news .header span.day { width: 45px; height: 50px; position: absolute; top: 0; left: 0; padding-top: 15px; text-align: center;padding-left: 0; background: url(images/icons/calendar.png) 0 0 no-repeat; font-size: 1.7em; color: #333; font-weight: bold; text-shadow: #fff -1px -1px 0;} .news .header .author { padding-left: 20px; background-position: 0 0;} .news .header .category { background-position: 0 -38px;} .news .header .comments-count { background-position: 0 -60px; } /* news > comment form */ .comment { margin-top: 20px; } .comment .facebook-connect { float: right; margin: -3.2em 0px 0em 0px;} .comment .frame { margin-right: 20px; } /* comment specific - button style */ .comment .button { margin-top: -20px; } /* news > comments / discussion */ .comments { margin-top: 10px; list-style: none; padding: 0 0 0 80px;} .comments:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; } .comments > li { padding-left:0px; width: 100%; clear: both; float: left; margin: 0 0 25px; clear: left;} .comments ul li { width: 100%; margin: 0; padding: 0; list-style: none; } .comments ul { margin-top: -15px; margin: 0; padding: 0; list-style: none; } .comments li > div { margin: 0 0 0 30px; padding: 15px 15px 25px;background: #fff; box-shadow: rgba(29,15,7,.35) 0px 1px 3px; -webkit-box-shadow: rgba(29,15,7,.35) 0px 1px 3px; -moz-box-shadow: rgba(29,15,7,.35) 0px 1px 3px; position: relative; z-index: 10;} .comments ul li > div { position: relative; padding-top: 25px; padding-bottom: 30px; background: #f7f4ef; border-bottom: 1px solid #fff; border-top: 1px solid #ddd; } .comments dl { margin: 0; padding: 0 } .comments dt { margin: 0 0 0 -135px; padding: 0 0 5px 135px; background:url(images/comment-bg.png) 102px 0 no-repeat; color: #000; font-size: 1.1em; } .comments dd { margin: 0; padding: 0;} .comments dd:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; } .comments ul dl { float: none; display: block;} .comments ul dt { margin: 0; padding: 0; background: none;} .comments li dt a { color: #000; font-weight: bold;} .comments li dt a:hover, .comments li dt a:focus { text-decoration: none; } .comments li dt a span { padding: 0px; width: 80px; float: left; margin: -15px 0 0 -125px; color: #000;} .comments li dt span img { display: block; border: none; width: 80px; height: 80px;} .comments ul li dt a span { display: none;} .comments .footer { font-size: 8pt; margin: 0;} .comments .footer p, .comments .footer a { color: #a6a6a6; margin: 0;} .comments .date { float: left; } .comments .reply { float: right; padding-right: 15px; background: url(images/reply-ico.png) 100% 50% no-repeat;} /* comments sublevel indicator */ .indicator { position: absolute; top: 0px; left: 10px; height: 100%; background: #f5f2e7 url(images/sub-comment-bg-2.gif) 0px 0 repeat-y; } .indicator .top { background: #f5f2e7 url(images/sub-comment-bg-1.gif) 0px 100% no-repeat;position: absolute; top: 0; left: 0; height: 20px;} .indicator .bottom { position: absolute; bottom: 0; height: 24px;background: #f5f2e7 url(images/sub-comment-bg-3.gif) 0px 0 no-repeat;} .comments ul li + li {margin-top: -10px; margin-bottom: 20px;} .comments ul li + li > div { padding-top: 10px; } .comments li > div > .indicator .top { height: 32px;} .comments li + li > div > .indicator .top { height: 15px; } .comments > li > div { position: relative; z-index: 11;} .sub-1 > li > div { z-index: 10; padding-left: 32px;} .sub-2 > li > div { z-index: 9; padding-left: 48px;} .sub-3 > li > div { z-index: 8; padding-left: 64px;} .sub-4 > li > div { z-index: 7; padding-left: 80px;} .sub-5 > li > div { z-index: 6; padding-left: 96px;} .sub-6 > li > div { z-index: 5; padding-left: 112px;} .sub-7 > li > div { z-index: 4; padding-left: 128px;} .sub-8 > li > div { z-index: 3; padding-left: 144px;} .sub-9 > li > div { z-index: 2; padding-left: 160px;} .sub-10 > li > div { z-index: 1; padding-left: 176px;} .sub-1 .indicator, .sub-1 .top, .sub-1 .bottom { width: 16px; } .sub-2 .indicator, .sub-2 .top, .sub-2 .bottom { width: 32px; } .sub-3 .indicator, .sub-3 .top, .sub-3 .bottom { width: 48px; } .sub-4 .indicator, .sub-4 .top, .sub-4 .bottom { width: 64px; } .sub-5 .indicator, .sub-5 .top, .sub-5 .bottom { width: 80px; } .sub-6 .indicator, .sub-6 .top, .sub-6 .bottom { width: 96px; } .sub-7 .indicator, .sub-7 .top, .sub-7 .bottom { width: 112px; } .sub-8 .indicator, .sub-8 .top, .sub-8 .bottom { width: 128px; } .sub-9 .indicator, .sub-9 .top, .sub-9 .bottom { width: 144px; } .sub-10 .indicator, .sub-10 .top, .sub-10 .bottom { width: 160px; } /*success-stories*/ /*has additional js functionality*/ .success-stories { float: left; width: 300px; position: relative;} .success-stories ul.items { list-style: none; margin-top:0; margin-bottom: 0; margin-right: 0; padding: 0; background: #dd;} .success-stories ul.items li {list-style: none; display: block; margin: 0 20px 20px 0; padding: 0; height: 330px; width: 300px; float: left; } .success-stories h3 { font-weight: normal; text-align: center; margin: 0; padding: 0;} .success-stories h3 a:hover, .success-stories h3 a:focus { color: #000; } .success-stories p { margin: 25px 0 0; word-wrap:break-word;} .success-stories p a { color: #48A2A3; text-decoration:none; } .success-stories.js ul.items { height: 330px; width: 9999px; /*<- temp value, set automatically when js is enabled*/} /*success-stories specific frame*/ .success-stories .frame { margin: 0 0 40px; float: none; display: block; width: 290px;} .success-stories .frame img { padding-bottom: 38px; margin-bottom: -38px; background: url(images/frame-shadow-1.png) 50% 100% no-repeat; } /*success-stories-r*/ /*REFERENZEN*/ .success-stories-r { float: left; width: 300px; position: relative;} .success-stories-r ul.items { list-style: none; margin-top:0; margin-bottom: 0; margin-right: 0; padding: 0; background: #dd;} .success-stories-r ul.items li {list-style: none; display: block; margin: 0 20px 20px 0; padding: 0; height: 230px; width: 300px; float: left; } .success-stories-r h3 { font-weight: normal; text-align: center; margin: 0; padding: 0;} .success-stories-r h3 a:hover, .success-stories h3 a:focus { color: #000; } .success-stories-r p { margin: 25px 0 0; word-wrap:break-word;} .success-stories-r p a { color: #48A2A3; text-decoration:none; } /*success-stories specific frame*/ .success-stories-r .frame { margin: 0 0 40px; float: none; display: block; width: 290px;} .success-stories-r .frame img { padding-bottom: 38px; margin-bottom: -38px; background: url(images/frame-shadow-1.png) 50% 100% no-repeat; } /*success-stories-r*/ /*REFERENZEN*/ /*success-stories specific slider-nav*/ .success-stories.js .slider-nav { position: absolute; top: 177px; left: 0; display: block !important;} /*introduction (video+description)*/ .introduction { margin-bottom: 20px; padding-bottom: 0; background: url(images/separator-2.png) 100% 100% no-repeat;} .introduction > div {} .introduction .video { } .introduction .video * * {display: block; margin: 0 auto; width: 239px; padding:0;} .introduction .video > * { background: url(images/video-frame.png) 50% 15px no-repeat; height: 230px; padding-top: 26px; margin-top: -10px; position: relative; z-index: 1;} .introduction .description { } .introduction .description .autocolumns-2 { -moz-column-count: 2; -moz-column-gap: 1em; -moz-column-rule: none; -webkit-column-count: 2; -webkit-column-gap: 1em; -webkit-column-rule: none;} .introduction .description p {text-align: justify;} .introduction .description h2 + p { } /*highlights (4 columns)*/ .highlights { padding-bottom: 0; } .highlights > div > div { padding-left: 50px; position: relative; } .highlights img { position: absolute; top: 0; left: 0; } .highlights h2 { padding-top: 8px !important;} .highlights p { text-align: left; } /*gallery*/ /*uses one and the same template everywhere*/ .gallery, .gallery li { margin: 0; padding: 0; list-style: none; } .gallery { margin-right: -400px; margin-top: 20px; width: 101%;/*IE7*/} .gallery li { margin-right: 0px; padding-bottom: 40px;/*IE7 does not like bottom-margin*/ float: left;} .gallery li .frame { margin: 0; margin-right: 40px; } .gallery li > div { width: 300px; float: left;} .gallery h3 { font-size: 1.6em; padding: 0 0 10px; margin-top: 0; margin-bottom: 0; } .gallery h3 span { padding: 0; /*be careful with underline sprite when changing bottom padding*/ font-weight: normal; letter-spacing: -1pt; display: inline; background: url(images/colors/purple/underline-1.png) 0 bottom repeat-x;clear: left; margin-bottom: 0px;/*background: #ddd;*/ color: #000;} .gallery h4 { text-transform: uppercase; font-weight: normal; font-size:1em; margin: 0; padding: 14px 0 10px;} /*pagination*/ /*js info - this needs to be js centered */ .pagination { float: left; width: 100%; padding: 0 0 0px; margin: 0 0 0px; list-style: none; text-align: center; position: relative; } .pagination li { float: left; margin: 0 7px; padding: 0;} .pagination a { background: url(images/pagination-item-bg-1.png) 0 0 no-repeat;padding: 0; line-height: 24px; /*color: #7a7a7a;*/ font-size: .9em; display: block; width: 24px;} .pagination a:hover, .pagination a:focus {background-position: 0 -24px; /* background-color defined in color specific styles*/ text-decoration: none; color: #fff;} .pagination li.prev a, .pagination li.next a { width: 16px; text-indent: -9999px; background-image: url(images/arrows-1.png); background-repeat: no-repeat; position: relative; z-index: 999;float: left;} .pagination li.prev a { background-position: 0 0; } .pagination li.prev a:hover, .pagination li.prev a:focus { background-position: 0 -24px; } .pagination li.next a { background-position: right -72px; } .pagination li.next a:hover, .pagination li.next a:focus { background-position: right -96px; } /*pagination compact (expandible arrows only)*/ .pagination.compact { } .pagination.compact li.prev { display: block; margin-bottom: 0px; } .pagination.compact li.prev a {padding-left: 16px;} .pagination.compact li.next { float: right; margin-right: 45px;} .pagination.compact li.next a {padding-right: 16px; } .pagination.compact a { text-indent: 0; width: 100px !important;} .pagination.compact a span { display: block; background: #fff;} /*back link - comes after compact pagination, displays centered 'back to something' link*/ .back-link {float: left; width: 100%; text-align: center; position: relative; width: 100%; clear: both;margin-left: 20px !important; margin-top: -24px;} /*pagination 2*/ /* articles > nav (pagination) */ .pagination-2 { padding: 0 0 10px; margin: 0; font-size: .8em; padding: 15px 0 0; list-style: none; text-align: center;} .pagination-2 li { display: inline; line-height: 1.8em; margin: 1px; padding: 0; list-style: none;} .pagination-2 a { background: #f0f0f0; border: 1px solid #ccc; padding: 0 4px; line-height: 1em; color: #7a7a7a;} .pagination-2 a:hover, .pagination-2 a:focus { color: #fff; text-decoration: none; border: 1px solid #555;} /*flickr feed*/ .flickr-feed {margin-right: -20px; width: 101%;/*IE7*/ position: relative;} .flickr-feed:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; } .flickr-feed h2 { padding-bottom: 0px; margin-top: 0; padding-top: 0; } .flickr-feed ul { margin: 0; padding: 0; list-style: none; float: left;} .flickr-feed li { float: left; margin: 0;margin-right: 20px;padding-bottom: 20px;} .flickr-feed .frame { margin: 0; } .flickr-feed.js .slider-nav { width: 50px; top: 0; position: absolute; right: 40px;display: block;} /*flickr feed specific tooltip*/ .flickr-feed .tooltip span { padding-left: 30px !important;} /*popular recent posts / news-overview-2 */ .news-overview-2:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both;} .news-overview-2 { padding: 0; list-style:none;} .news-overview-2 li { margin: 0 0 20px; padding: 0 0 0px 160px; list-style:none;/*float: left; clear: left;*/ height: 70px; clear: both; position: relative;} .news-overview-2 .frame { margin-left: -160px; margin-top: 0; /*float: none; display: block; width: 120px;*/ clear: both; margin-right: 0;} .news-overview-2 h3 { font-size: 1.5em; padding: 0px 0 5px; margin-top: 0; margin-bottom: 0; clear: none;} .news-overview-2 h3 span { padding: 0 0 1px; /*be careful with underline sprite when changing bottom padding*/ font-weight: normal; letter-spacing: -1pt; display: inline; background: url(images/colors/purple/underline-1.png) 0 bottom repeat-x; margin-bottom: 0px; clear: none; margin-top: 0; } .news-overview-2 p { padding-bottom: 0; margin-bottom: 0; position: absolute; left: 160px; bottom: 0;} /*recent tweets */ #twitter_div { /*background: red;*/ } #twitter_update_list { list-style: none; padding: 0; } #twitter_update_list li { margin: 5px 0 0; padding: 0 0 5px 44px; display: block; list-syle: none; background: url(images/icons/twitter-2.png) 7px 50% no-repeat; color: #000; font-size: .9em; border-bottom: 1px solid #e5e5e5;} /*main heading specific recent tweets rules*/ #main-heading.twitter .info { width: 250px; float: left; height: auto !important; min-height: 0 !important; padding-bottom: 30px !important} #main-heading #twitter_div { float: right; padding-left: 100px; width: 590px; background: url(images/icons/twitter-3.png) 100% 50% no-repeat;margin-top: -10px; position: relative;} #main-heading #twitter_update_list {width: 500px; float: left;} #main-heading #twitter_update_list li { color: #fff; border: none;padding: 0; background: none;float: left; width: 500px; margin-right: 10px;} #main-heading #twitter_update_list li span { font-size: 1.4em; float: left; width: 350px;} #main-heading #twitter_update_list li > a { float: right; width:200px; margin-top: 10px; } /*when js is enabled*//*#twitter_update_list needs to be put inside 500px width container with overflow hidden*/ #main-heading #twitter_div.js #twitter_update_list { width: 9999px;} /*main heading recent tweets specific slider-nav*/ #main-heading #twitter_div.js .slider-nav { clear: left; width: 50px; position: absolute; top: 12px; left: 0; display: block;} #main-heading #twitter_div .slider-nav li a { background-image: url(images/arrows-4.png);} #main-heading #twitter_div .slider-nav li a:hover, #main-heading #twitter_div .slider-nav li a:focus { background-color: transparent;} #main-heading #twitter_div .slider-nav li.prev a:hover, #main-heading #twitter_div .slider-nav li.prev a:focus { background-position: 0 -24px; } #main-heading #twitter_div .slider-nav li.next a { background-position: 0 -48px; } #main-heading #twitter_div .slider-nav li.next a:hover, #main-heading #twitter_div .slider-nav li.next a:focus { background-position: 0 -72px; } /*contact form*/ form .alt-means-of-contact { line-height: 47px; float: left; margin: 5px 10px;} /*search form*/ form.search input[type="submit"] { display: none; } /*= end =============SITE-WIDE CUSTOM STYLES + CONTENT============== */ /*= start =============HEADER==============*/ #header { position: relative; } /*logo*/ #header h1 { float: left; margin: 45px 0 0 0; padding: 0; width: 300px; position: relative; z-index: 1000;} #header h1 a { display: block; width: 300px; height: 100px; background: url(images/logo.png) 0 0 no-repeat; text-indent: -9999px; } /*nav */ #nav ul, #nav li { list-style: none; margin: 0; padding: 0; position: relative;} #nav { float: left; width: 980px; margin: -100px -290px 0px; padding: 0 310px; position: relative; z-index: 999;} #nav > ul { padding: 0; margin: 0px 0px 0 0; font-size: 1.2em; float: right; } #nav > ul > li { float: left; position: relative; } #nav > ul > li > a { padding: 0 13px 10px 13px; float: left; line-height: 100px; color: #48A2A3; z-index: 999; position: relative; background: url(images/main-nav-item-bg.png) 0px 0 no-repeat; text-decoration: none;} #nav > ul > li:first-child > a { margin-left: -1000px; padding-left: 1000px; } #nav > ul > li.last-child > a {margin-right: -1000px; padding-right: 1000px; } /*these two rules make up for the area to the left and right to the nav items. Since nav items generate the background and the shadow, this is the most optimal solution of all: it does not use any additional background images - there's only one image, and mo more images are needeed when a theme color changes. This solution has one small disadvantage though - first and the last item have to have background position set up manualy below */ /*main nav hover/active/current states NOTE! First and last items get separate treatment!*/ #nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li.current > a { background-position: 50% 0; } #nav > ul > li.current > a { font-weight: normal; } /*main nav states - first item*/ #nav > ul > li:first-child > a:hover, #nav > ul > li:first-child > a:focus, #nav > ul > li.current:first-child > a { background-position: -575px 0; /*home*/} /* change background-position value slightly here if the first element in the #nav got changed*/ /*main nav states - last item*/ #nav > ul > li.last-child > a:hover, #nav > ul > li.last-child > a:focus, #nav > ul > li.current.last-child > a { background-position: -1555px 0; /*contact*/} /* change background-position value slightly here if the first element in the #nav got changed*/ /*subnavs - general*/ #nav ul ul { position: absolute; font-size: 10pt; -webkit-box-shadow: rgba(0,0,0,.25) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,.25) 0 1px 3px; box-shadow: rgba(0,0,0,.25) 0 1px 3px; display: none;} #nav ul ul li a {border-left: 1px solid #eee; border-right: 1px solid #ccc;} #nav ul ul li a:hover, #nav ul ul li a:focus {background: #e5e5e5; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #cdcdcd;} /*subnav - first level*/ #nav > ul > li > ul { top: 95px; left: 0;} #nav > ul > li > ul > li:first-child > a { padding-top: 15px; } /*subnav - farther levels*/ #nav > ul > li > ul ul { top: 0px; left: 165px; z-index: 999;} #nav > ul > li > ul > li:first-child > ul { top: 5px; } #nav > ul ul a { display: block; width: 125px; padding: 10px 20px; background: #f1f1f1; text-decoration: none;border-top: 1px solid #fff; border-bottom: 1px solid #d8d8d8; color: #5c5c5c} /*display subnav on hover when js is off*/ /*#nav > ul > ul > li:hover > ul, #nav > ul > ul > li:focus > ul { display: block; }*/ /*helpdesk*/ #helpdesk { width: 100%; height: 45px; margin-bottom:-45px; line-height: 45px; color: #8d8d8d; background: #59B0B2; text-align: left; font-size: .8em;} #helpdesk_text { width: 980px; height: 45px; margin:0 auto; line-height: 45px; color: #ffffff; text-align: right; font-size: .8em;} #helpdesk_text a { float: right; color: #ffffff; margin: 0;} /*= end =============HEADER==============*/ /*= start =============FOOTER==============*/ #footer { font-size: 9pt; } #footer h3 { color: #48A2A3; font-weight: normal; font-size: 1.8em; padding: 0; margin-top: 0; margin-bottom: 7px} #footer ul, #footer li { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; } #footer li { margin: 0; line-height: 38px;} /*nav */ #footer .nav { } #footer .nav li {} /*archives*/ /*year*/ #footer .archives {} #footer .archives > li > a { color: #48A2A3; } /*month*/ #footer .archives > li > ul { display: inline; } #footer .archives > li > ul > li { display: inline; margin: 0; padding: 0; border: none;background: none} #footer .archives > li > ul > li a { padding-right: 3px; } /*copyright */ #footer #copy { width: 100%; margin: 0; padding: 0; font-size: 1em; line-height: 45px; text-align: center; color: #fff; background:#59B0B2; position: absolute; bottom: 0; left: 0;} /*slider nav*/ .slider-nav { display: none; /*hide slider-nav when js is off*/ width: 100%; padding: 0; float: left; position: relative;z-index: 9999; list-style: none;} .js .slider-nav { display: block; /*show slider-nav when js is on*/} .slider-nav li { list-style: none; padding: 0; margin: 0; background: none; border: none !important; position: absolute;z-index: 99999} .slider-nav li.prev { top: 0; left: 0;} .slider-nav li.next { top: 0; right: 0; } .slider-nav a { display: block; width: 16px; height: 24px; text-indent: -9999px; background-image: url(images/arrows-1.png); background-repeat: no-repeat; position: relative; z-index: 999;} .slider-nav li.prev a { background-position: 0 0; } .slider-nav li.prev a:hover, .slider-nav li.prev a:focus { background-position: 0 -24px; } .slider-nav li.prev a:active { background-position: 0 -48px; } .slider-nav li.next a { background-position: 0 -72px; } .slider-nav li.next a:hover, .slider-nav li.next a:focus { background-position: 0 -96px; } .slider-nav li.next a:active { background-position: 0 -120px; } /*partners*/ /*has additional js functionality when js is enabled*/ #partners { float: left; width: 980px;background: #fff url(images/partners-bg.png) 0 0 repeat-x; padding: 5px 310px 0; position: relative; } #partners ul.items, #partners ul.items > li { margin:0; padding: 0; list-style: none; float: left; border: none; display: block;} #partners ul.items { width: 980px; margin-left: 30px; } #partners.js ul.items { width: 9999px; overflow: hidden;height: 95px;} #partners ul.items li { margin-right: 22px;} #partners ul.items li a {display: block;overflow: hidden; height: 95px;} #partners ul.items li a:hover, #partners ul.items li a:focus {} #partners ul.items li a img { display: block;} #partners ul.items li a:hover img, #partners ul.items li a:focus img { margin-top: -95px; } /*partners specific tooltip*/ #partners .tooltip span { background-image: url(images/icons/pointer-1.gif); padding-left: 40px !important; background-repeat: no-repeat; } /*partners specific slider-nav*/ #partners .slider-nav {margin-top: -62px; margin-left: 20px; display: none;} #partners.js .slider-nav {display: block;} /*= end =============FOOTER==============*/ /*= start =============LIGHTBOX==============*/ .lightbox { padding: 5px; background: #fff; float: left; position: relative;} .lightbox .images, .lightbox .images li { margin: 0; padding: 0; list-style: none; } .lightbox .images { padding-bottom: 30px; } .lightbox .close { position: absolute; top: -25px; right: -25px; width: 50px; height: 50px; text-indent: -9999px; background: url(images/close-button-1.png) 0 0 no-repeat; } .lightbox h2 { text-align: center; padding-top: 0; margin-top: -20px; height: 20px;} .lightbox h2 span { padding-top: 0; margin-top: 0;} /*js info - centers vertically with js*/ .lightbox .nav { width: 100%; padding: 0; float: left; position: absolute; top: 50%; margin-top: -64px; z-index: 9999; display: none;} .lightbox .nav { display: block; } .lightbox .nav li { padding: 0; margin: 0;position: absolute;z-index: 99999; background: #fff; width: 64px; height: 64px;} .lightbox .nav li.prev { top: 0; left: 0;} .lightbox .nav li.next { top: 0; right: 10px; } .lightbox .nav a { display: block; margin: 20px auto; width: 16px; height: 24px; text-indent: -9999px; background-image: url(images/arrows-1.png); background-repeat: no-repeat; position: relative; z-index: 999;} .lightbox .nav li.prev a:hover, .lightbox .nav li.prev a:focus { background-position: 0 -24px; } .lightbox .nav li.prev a:active { background-position: 0 -48px; } .lightbox .nav li.next a { background-position: 0 -72px; } .lightbox .nav li.next a:hover, .lightbox .nav li.next a:focus { background-position: 0 -96px; } .lightbox .nav li.next a:active { background-position: 0 -120px; } .lightbox h2 { padding-top: 10px; margin-left: 10%; margin-right: 10%;} .lightbox p.total { position: absolute; bottom: 25px; right: 30px; font-size: 1.2em; padding: 0; margin: 0;} /*= end=============LIGHTBOX==============*/