/* RESET CSS http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 ------------------------------------------------------------------- */ 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, 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, caption, tbody, tfoot, thead, th, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define visible focus styles! :focus { outline: ?????; } */ /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a:link, a:visited { text-decoration: none; } /* -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; */ /* ------------------------------------------------------------------- */ @font-face { font-family: 'AvenirLTStd55Roman'; src: url('../fonts/avenirltstd-roman-webfont.eot'); src: url('../fonts/avenirltstd-roman-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/avenirltstd-roman-webfont.woff') format('woff'), url('../fonts/avenirltstd-roman-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-roman-webfont.svg#AvenirLTStd55Roman') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirLTStd35Light'; src: url('../fonts/avenirltstd-light-webfont.eot'); src: url('../fonts/avenirltstd-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/avenirltstd-light-webfont.woff') format('woff'), url('../fonts/avenirltstd-light-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-light-webfont.svg#AvenirLTStd35Light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirLTStd95Black'; src: url('../fonts/avenirltstd-black-webfont.eot'); src: url('../fonts/avenirltstd-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/avenirltstd-black-webfont.woff') format('woff'), url('../fonts/avenirltstd-black-webfont.ttf') format('truetype'), url('../fonts/avenirltstd-black-webfont.svg#AvenirLTStd95Black') format('svg'); font-weight: normal; font-style: normal; } html { -webkit-font-smoothing: antialiased; } html, body { width: 100%; height: 100%; font-family: 'AvenirLTStd35Light', arial; color: rgb(75,75,75); } body { background-color: rgb(230,230,230); } ::-moz-selection{ background: rgb(148,0,107); color:#fff; text-shadow: none; } ::selection { background:rgb(148,0,107); color:#fff; text-shadow: none; } /* COLORS ------------------------------------------------------------------- */ .violet { color: rgb(148,0,107); } .white {color: rgb(255,255,255); } .black { color: rgb(0,0,0); } .gray { color: rgb(150,150,150); } .lightgray { color: rgb(210,210,210); } .darkgray { color: rgb(50,50,50); } .blue { color: rgb(0,150,220); } .green { color: rgb(130,190,0); } .orage { color: rgb(255,120,0); } /* LINKS ------------------------------------------------------------------- */ #files { float:left; } a.files, a.files:visited { font-size: 12px; color: rgb(150,150,150); } a.files:hover { color: rgb(148,0,107); text-decoration: none; } /* NAVIGATION ------------------------------------------------------------------- */ #navigation { float: left; width: 100%; height: 70px; background: url(../images/bg_navigation.gif) repeat-x; } #navigation_container { margin: 0 auto; width: 100%; max-width: 980px; height: 70px; } #links_container { float:right; } #logo { float: left; width: 166px; height: 55px; margin-top: 7px; background: url(../images/logo_kouta.png) no-repeat; } #liikemerkki.navigation { float: right; width:96px; height: 35px; margin: 16px 0px 0px 30px; background: url(../images/liikemerkki_navigation.png) no-repeat; } /* HEADER ------------------------------------------------------------------- */ #header-wrapper { float: left; width: 100%; margin: 0 auto; } #header { float: left; width: 100%; height: 300px; background: rgb(0,0,0); } #header.index { height: 400px; } #header.tyot { float: left; width: 100%; height: auto; min-height: 250px; background: #000; padding: 40px 0px 0px 0px; margin-bottom: 50px; } #header_container { margin: 0 auto; width: 980px; height: 400px; } #header_container.digital { background: url(../images/header_digital.jpg) no-repeat; } #header_container.print { background: url(../images/header_print.jpg) no-repeat; } #header_container.strategia { background: url(../images/header_strategia.jpg) no-repeat; } #header_container.tyot { background: url(../images/header_tyot.jpg) no-repeat; } #header_container.yhteystiedot { background: url(../images/header_yhteystiedot.jpg) no-repeat; } #sublinks_container { width: 980px; padding-top: 279px; } .sublink { display: block; float: right; width: 90px; height: 21px; margin-left: 3px; } /* REFERENSSIT ------------------------------------------------------------------- */ .ref { display: block; float: left; width: 312px; height: auto; margin: 7px; } .ref_id { display: block; float: left; width:312px; height: 40px; background: url(../images/bg_ref.gif) repeat-x; } .ref_spacer { display: block; float: left; width: 22px; height:240px; } .ref img { float: left; } .ref_print, .ref_digi, .ref_strategia { display: block; float: right; height: 40px; } .ref_print { width: 43px; background: url(../images/ref_print.png); } .ref_digi { width: 44px; background: url(../images/ref_digi.png); } .ref_strategia { width: 64px; background: url(../images/ref_strategia.png); } .esittely { display: block; float: left; width: 100%; max-width: 980px; } .esittely_column { display: block; float: left; width: 45%; min-width: 280px; max-width: 360px; min-height: 130px; margin-right: 20px; font-size: 20px; color: rgb(180,30,130); } .esittely_column p { font-size: 15px; line-height: 130%; color: rgb(140,140,140); } .esittely_column p a:link, .esittely_column p a:visited { color: rgb(180,30,130); } .esittely_column p a:hover { color: rgb(180,30,130); } #esittely_btn { float:left; margin: 0px 10px 8px 0px; padding: 15px 0px 0px 20px; } #esittely_btn a:link, #esittely_btn a:visited { display: block; width: 182px; height: 32px; font-family: 'AvenirLTStd95Black', Arial; font-size: 18px; color: rgb(50,60,70); color: rgb(50,60,70); text-decoration: none; } #esittely_btn.prev { background: url(/images/btn_prev.png) no-repeat; } #esittely_btn.prev:hover { background: url(/images/btn_prev_hover.png) no-repeat; transition: background .40s ease-in-out; -moz-transition: background .40s ease-in-out; -webkit-transition: background .40s ease-in-out; } #esittely_btn.next { background: url(/images/btn_next.png) no-repeat; } #esittely_btn.next:hover { background: url(/images/btn_next_hover.png) no-repeat; transition: background .40s ease-in-out; -moz-transition: background .40s ease-in-out; -webkit-transition: background .40s ease-in-out; } #esittely_btn.all { background: url(/images/btn_all.png) no-repeat; } #esittely_btn.all:hover { background: url(/images/btn_all_hover.png) no-repeat; transition: background .40s ease-in-out; -moz-transition: background .40s ease-in-out; -webkit-transition: background .40s ease-in-out; } #small_ref_area { width: 100%; float: left; margin-top: 50px; padding: 10px 0px 50px 0px; background: #222; } #small_ref_area h2 { text-transform: none; font-family: 'AvenirLTStd55Roman', arial; font-size: 300%; letter-spacing: -2px; padding: 30px 0px 30px 10px; color: rgb(140,140,140); text-shadow: 0px 0px 30px rgb(120,120,120); } .small_ref { display: block; float: left; width: 176px; height: 113px; background: #444; margin: 0px 10px 40px 10px; } .small_ref img { width:176px;} .small_ref p { font-size: 14px; color: rgb(200,200,200); } /* BANNERS ------------------------------------------------------------------- */ #banner { float: left; margin-right: 20px; } #banner.strategia { width: 312px; height: 194px; background: url(../images/banner_strategia.png) no-repeat; } #banner.digital { width: 312px; height: 194px; background: url(../images/banner_digital.png) no-repeat; } #banner.print { width: 312px; height: 194px; background: url(../images/banner_print.png) no-repeat; } /* BUTTONS ------------------------------------------------------------------- */ #button { } #button.tarjous { margin: 0px 83px; background: url(../images/btn_tarjous.png) no-repeat; } #button.lisaa { margin: 0px 83px; background: url(../images/btn_nayta_lisaa.png) no-repeat; } /* COLUMNS ------------------------------------------------------------------- */ #column_3a, #column_3b, #column_3c { float: left; width: 312px; } #column_wide { display: block; float: left; width: 646px; } .column_spacer { display: block; float: left; width: 22px; height: 250px; } #column_tyot_navi { display: block; float: right; width: 200px; } .column_01, .column_02, .column_03 { display: block; float: left; width: 312px; height: auto; margin-right: 22px; } .column_03 { margin-right: 0px; } /* FONTS ------------------------------------------------------------------- */ h1, h2, h3, h4 { text-align: left; } h1, h2, h3, h4, h5, p { font-family: 'AvenirLTStd55Roman', arial; color: rgb(75,75,75); } h1 { font-size: 18px; text-transform: uppercase; padding-bottom: 6px; } h1.title { font-family: 'AvenirLTStd35Light', arial; text-transform: none; font-size: 2.5em; display: block; width: 980px; max-width: 100%; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid rgb(210,210,210); letter-spacing: -1px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } h1.works { text-transform: none; font-size: 320%; color: rgb(100,100,100); padding: 25px 0px 20px 0px; letter-spacing: -2px; } h2 { font-family: 'AvenirLTStd95Black', arial; font-size: 13px; text-transform: uppercase; padding: 10px 0px 8px 0px; line-height: 1.4em; color: rgb(75,75,75); } h2.banner { display: block; width: 312px; height: 25px; overflow: hidden; font-family: 'AvenirLTStd55Roman', arial; font-size: 12px; line-height: 1.4em; text-align: center; text-transform: uppercase; color: rgb(150,150,150); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } h2.banner a:link, h2.banner a:visited { color: rgb(150,150,150); } h2.banner a:hover { color: rgb(255,255,255); text-decoration: none; } h3 { font-size: 14px; font-family: 'AvenirLTStd95Black', arial; color: rgb(0,0,0); letter-spacing: -1px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } h4 { font-size: 15px; color: rgb(255,255,255); font-weight: normal; padding: 12px 0px 0px 15px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9); float: left; } h4 a, h4 a:visited { color: rgb(255,255,255); } h5 { font-size: 1.2em; text-transform: uppercase; color: rgb(130,190,0); } p { font-family: 'AvenirLTStd35Light', arial; font-size: 14px; line-height: 1.4em; color: rgb(75,75,75); margin-bottom: 1em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } p a, p a:visited { color: rgb(148,0,107); } p a:hover { color: rgb(148,0,107); text-decoration: underline; } p.ingressi { font-size: 18px; line-height: 1.3em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } p.ref { display: block; float: left; width: 980px; max-width: 100%; font-size: 16px; color: rgb(50,60,70); margin-left: 0px; padding: 20px 0px 5px 0px; border-bottom: 1px solid rgb(200,200,200); } p.footer { color: rgb(120,120,120); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } p.footer a, p.footer a:visited { color: rgb(120,120,120); text-decoration: none; } p.footer a:hover { color: rgb(100,100,100); text-decoration: underline; } p.footernav { display: block; } p.footernav a, p.footernav a:visited { float: left; width: 200px; height: auto; border-bottom: 1px solid rgb(210,210,210); padding: 3px 0px 3px 10px; color: rgb(120,120,120); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } p.footernav a:hover { background: rgb(255,255,255); color: rgb(148,0,107); text-decoration: none; } p.contact { display: block; } p.contact a:link, p.contact a:visited { float: left; width: 292px; line-height: 1.3em; color: rgb(75,75,75); border-bottom: 1px solid rgb(210,210,210); padding: 10px; text-decoration: none; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } p.contact a:hover { background: rgb(225,225,225); color: rgb(148,0,107); text-decoration: none; } p.product { font-family: 'AvenirLTStd95Black', arial; line-height: 1.2em; text-transform: uppercase; } .strong { font-family: 'AvenirLTStd95Black', arial; font-size: 1.4em; color: rgb(150,150,150); } .bold { font-weight: bold; } .caps { font-variant: small-caps; } /* FORM ------------------------------------------------------------------- */ .form_container { display: block; width: 240px; height: auto; } .form_element, .form_btn { display: block; float: left; } input, textarea { padding: 5px; width: 214px; border: solid 1px rgb(220,220,220); outline: 0; background: rgb(245,245,245); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } textarea { margin-top: 4px; line-height: 120%; height: 50px; } input { width: 144px; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: rgb(200,200,200); -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; } .form label { margin-left: 10px; color: #999999; } .submit input { width: 70px; padding: 5px 9px; background: rgb(75,75,75); font-size: 11px; color: rgb(200,200,200); } .submit input:hover { background: rgb(50,50,50); color: rgb(255,255,255); } /* FOOTER ------------------------------------------------------------------- */ #footer { float: left; width: 100%; height: 250px; background: url(../images/bg_footer.jpg) repeat-x; border-top: 1px solid rgb(210,210,210); } #footer_container { margin: 0 auto; width: 980px; max-width: 100%; height: 210px; padding: 20px; } #footer_col1, #footer_col2, #footer_col3, #footer_col4 { display: block; float: left; width: 200px; height: auto; margin-right: 40px; } /* LIST ------------------------------------------------------------------- */ ul.extra, ul.service, ul.tyot { list-style-type: none; } ul.extra li { text-align: left; font-size: 13px; } ul.extra li a, ul.extra li a:visited { display: block; float: left; width: 297px; height: auto; padding: 6px 0px 6px 15px; border-bottom: 1px solid rgb(210,210,210); color: rgb(148,0,107); } ul.extra li a:hover { background: rgb(35,35,35); color: rgb(255,255,255); } ul.tyot li { font-family: 'AvenirLTStd35Light', arial; font-size: 14px; } ul.tyot li a:link, ul.tyot li a:visited { display: block; float: left; width: 170px; height: auto; padding: 10px 0px 10px 15px; background: url(/images/bg_ref.gif) repeat-x; color: rgb(210,210,210); text-decoration: none; margin-bottom: 2px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } ul.tyot li a:hover { color: rgb(255,255,255); text-decoration: none; background: url(/images/bg_ref_hover.gif) repeat-x; } /* NEWS ------------------------------------------------------------------- */ #news_container { margin: 0 auto; width: 500px; padding-top: 30px; height: auto; } #news_container.jari { height: 650px; } #news { width: 200px; height: auto; padding: 8px 0px 8px 85px; border-bottom: 1px solid rgb(210,210,210); background-repeat: no-repeat; background-position: 0% 30%; } #news:hover { background-color: rgb(245,245,245); opacity: 0.8; } #news.adel { background-image: url(/images/news_adel.png); } #news.arvola { background-image: url(/images/news_arvola.png); } #news.countrypolis { background-image: url(/images/news_countrypolis.png); } #news.govuokatti { background-image: url(/images/news_govuokatti.png); } #news.hyvarinen { background-image: url(/images/news_hyvarinen.png); } #news.inaria { background-image: url(/images/news_inaria.png); } #news.infrasuunnittelu { background-image: url(/images/news_infrasuunnittelu.png); } #news.kaesa { background-image: url(/images/news_kaesa.png); } #news.kavio { background-image: url(/images/news_kavio.png); } #news.kouta { background-image: url(/images/news_kouta.png); } #news.laakarikeskus { background-image: url(/images/news_laakarikeskus.png); } #news.maalampotukku { background-image: url(/images/news_maalampotukku.png); } #news.naava { background-image: url(/images/news_naava.png); } #news.nokia { background-image: url(/images/news_nokia.png); } #news.peura { background-image: url(/images/news_peura.png); } #news.puuco { background-image: url(/images/news_puuco.png); } #news.qtio { background-image: url(/images/news_qtio.png); } #news.scanburger { background-image: url(/images/news_scanburger.png); } #news.suokone { background-image: url(/images/news_suokone.png); } #news.sydanmuuraus { background-image: url(/images/news_sydanmuuraus.png); } #news.valomaailma { background-image: url(/images/news_valomaailma.png); } #news.vuokattifishing { background-image: url(/images/news_vuokattifishing.png); } #news.vuokattisafari { background-image: url(/images/news_vuokattisafari.png); } #news.vuokatin_aateli { background-image: url(/images/news_vuokatin_aateli.png); } #news.youredi { background-image: url(/images/news_youredi.png); } p.newstext { margin-bottom: 0px; color: rgb(148,0,107); } p.newstext a:link, p.news a:visited { color: rgb(148,0,107); } p.newstext a:hover { color: rgb(90,0,40); text-decoration: underline; } /* MISC ------------------------------------------------------------------- */ #main_container { clear: both; margin: 0 auto; width: 980px; max-width: 100%; padding: 50px 10px 0px 10px; height: auto; overflow: hidden; } .main_container { display: block; clear: both; margin: 0 auto; padding: 0px 10px; width: 100%; max-width: 980px; } .page_container { display: block; clear: both; margin: 0 auto; padding: 50px 10px 50px 10px; width: 100%; max-width: 980px; } .responsive { width: 980px; max-width: 100%; } .responsive img { max-width:100%; height: auto; } .wrapper{ display: block; float: left; width: 980px; max-width: 100%; } .float { display: block; float: left; } .showhide_01, .showhide_02, .showhide_03 { display: block; float: left; width: 980px; height: 80px; } #tyot { display: none; width: 980px; height: auto; margin: 0px; padding: 0px; } .gray_line { display: block; float: left; width: 100%; height: 1px; background: rgb(210,210,210); margin: 5px 0px; } .fade { display: block; display: none; } .works_link { display: block; width: 980px; text-align: center; font-family: 'Allura', cursive; font-size: 28px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .works_link a, .works_link a:visited { color: rgb(100,100,100); text-decoration: none; } .works_link a:hover { color: rgb(148,0,107); text-decoration: none; } .left { float: left; } .video-container { position: relative; clear: both; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* PRODUCTS ------------------------------------------------------------------- */ #product_container { float: left; width: 646px; height: auto; } #title {display: block; float: left; width: 100%; } #title.packages { height: 40px; text-align: center; margin-bottom: 14px; background: url(../images/bg_ref.gif) repeat-x; } #title.product { height: 30px; margin-bottom: 110px; text-align: center; } #product { float: left; width: 286px; height: 150px; padding: 200px 10px 10px 10px; text-align: center; margin-bottom: 22px; border: 3px solid rgb(255,255,255); -moz-border-radius: 15px; -webkit-border-radius: 15px; } #product.web_starter { background: url(../images/product_web_starter.png) no-repeat; } #product.web_basic { background: url(../images/product_web_basic.png) no-repeat; } #product.webstore { background: url(../images/product_webstore.png) no-repeat; } #product.identity_basic { background: url(../images/identity_basic.png) no-repeat; } #product.identity_pro { background: url(../images/identity_pro.png) no-repeat; } .product_spacer { display: block; float: left; width: 22px; height: 200px; } /* TABLES ------------------------------------------------------------------- */ table.basic { width: 300px; height: auto; border: 0px solid transparent; font-family: 'Open sans', arial, helvetica; font-size: 12px; line-height: 1.4em; color: rgb(80,90,100); } tr.a, td.a { background: rgb(255,255,255); } tr.b, td.b { background: rgb(230,240,255); } tr.c, td.c { background: rgb(100,100,100); color: rgb(255,255,255); }