/*----------------------
Kotiliesi Screen Styles
Version: 0.9 (10-2009)
----------------------*/
/*@import "lib/reset.css";
Boilerplate reset.css
Resets default browser CSS.
/*--------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}body{line-height:1.5;background:#fff;margin:0}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:400}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}a img{border:none}input,textarea{margin:0}a{outline:none}#wrapper{display:inline-block}#wrapper:after{content:".";display:block;height:0;clear:both;visibility:hidden}* html #wrapper{height:1%}#wrapper{display:block}
/* -------------------------------------------------------------- 
@import "lib/typography.css";
Boilerplate typography.css
Sets up some sensible default typography.
--------------------------------------------------------------*/
body{font-size:75%}body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea{font-family:Helvetica,Arial,sans-serif}h1,h2{font-weight:normal}h3,h4,h5,h6{font-weight:bold}h1{font-size:3em;line-height:1;margin-bottom:0.5em}h2{font-size:2em;margin-bottom:0.75em;line-height:1}h3{font-size:1.5em;line-height:1;margin-bottom:1em}h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em}h5{font-size:1em;margin-bottom:1.5em}h6{font-size:1em}p{margin:0 0 1.5em}ul,ol{margin:0}ul{list-style-type:none}ol{list-style-type:decimal}li{display:block}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dl dd{margin-left:1.5em}abbr,acronym{border-bottom:1px dotted #000}address{margin-top:1.5em;font-style:italic}del{color:#000}a{color:#d71920;text-decoration:none;font-weight:bold}a:hover{text-decoration:underline}blockquote{margin:1.5em}strong{font-weight:bold}em,dfn{font-style:italic}dfn{font-weight:bold}pre,code{margin:1.5em 0;white-space:pre}pre,code,tt{font:1em monospace;line-height:1.5}tt{display:block;margin:1.5em 0;line-height:1.5}table{margin-bottom:1.4em}th{border-bottom:2px solid #ddd;font-weight:bold}td{border-bottom:1px solid #ddd}th,td{padding:4px 10px 4px 0}tfoot{font-style:italic}caption{background:#ffc}.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em}.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}.quiet{color:#999}.hide{display:none}.highlight{background:#ffc}.bottom{margin-bottom:0;padding-bottom:0}
/*--------------------------------------------------------------*/
body {background: url(../img/bg/body.png) repeat-x 0 0}

/* DEV
----------------------*/
#wrapper.dev {background: url(../img/dev/grid2.png) repeat-y 5px}

/* GRID
----------------------*/
#wrapper {background: #fff;border: 0 !important; width: 980px; margin: 0 auto; padding: 10px 5px 0 5px; /*background: #fff url(../img/bg/body.png) repeat-x 0 0*/ }
.half, .main, .sidebar, .s630, .s640, .s470,.s480, .s310,.s230, .s560,.s300, #container, #sideads, #document,.full, .top h1 {margin-right: 20px;float: left; margin-bottom: 10px}
.s560 {width: 560px}.s630 {width: 640px}.s640 {width: 660px}.s470 {width: 470px}.s480 {width: 480px}.s310 {width: 310px}.s300 {width: 300px}.s230 {width: 230px}.full {width: 810px}
#container {width: 810px; background: none; margin: 0 10px 0 0;background: url(../img/bg/sidebar.png) left top repeat-y}
#sideads {width: 160px}
.top {float: left; background: #fff; padding-bottom: 5px}
.half {width: 390px}
.main , #document{width: 470px}
.sidebar {width: 150px}
.nomargin, #sideads {margin-right: 0 !important}
.s560 #document {width: 390px}

/* NAVIGATION
----------------------*/
ul#topnav {float: left; margin: 0; width: 806px; background: transparent url(../img/bg/gradient.png) repeat-x scroll 0 -650px; border: 1px solid #c8c8c8; margin-bottom: 10px; padding-left: 2px}
ul#topnav li {float: left; display: block; margin: 0; padding: 0; border-right: 1px solid #fee76d; background: url(../img/bg/topnav_li.png) repeat-y right}
ul#topnav li a {font-size: 1.2em; font-weight: bold; color: #000; padding: 8px 10px; display: block}
ul#topnav li a:hover {background: transparent url(../img/bg/gradient.png) repeat-x 0 -750px; text-decoration: none}
ul#topnav li a.active, ul#sidenavi li a.active {background: url(../img/bg/topnav_li_active.png) repeat-x; color: #fff}
ul#topnav li#joulu a.active {background: transparent url(../img/bg/gradient.png) no-repeat scroll -3px -1px}

#ribbon {float: left; width: 570px; padding: 5px 0; margin-right: 10px; border-bottom: 1px solid #bbb; border-top: 1px solid #bbb; font-size: 11px}
#ribbon a {font-weight: bold}
#ribbon ul {margin: 0}
#ribbon ul li {display: block; float: left; margin-right: 5px; padding-right: 5px; border-right: 1px solid #bbb}
#ribbon .rss ,#ribbon .newsletter,#ribbon .order {background-repeat: no-repeat; background-position: left 50%; padding-left: 20px; background-color: #fff}
#ribbon .rss {background-image: url(../img/bg/rss_icon.png)}
#ribbon .newsletter {background-image: url(../img/bg/newsletter_icon.png)}
#ribbon .order {background-image: url(../img/bg/order_icon.png)}

/* LOGIN
----------------------*/
#login {font-size: 11px; width: 479px}
#login a {font-weight: normal; border-bottom: 1px dotted #D71920}
#login img {float: left; margin-right: 10px}
#welcometext {margin: 0 0 10px 0; border: 0 !important; color: #333}
#welcometext .button {float: none !important; padding: 2px 10px; border: 0}
#login form {position: relative; padding-bottom: 2em; background: transparent url(../img/bg/gradient.png) repeat-x scroll 0 -900px; padding: 10px}
#login form .textfield {color: #000 ;background: #fff}
#login form #uname {margin-right: 10px}
#login #options p {margin: 0; width: 100%}
#remember {margin: 0 10px 0 5px; position: relative; top: 3px}
#login a.button {margin: 5px 5px 0 0; float: left}
#login a.button:hover {text-decoration: none}

/* TOP
----------------------*/
.top h1 a {text-indent: -9999px; background: url(../img/bg/logo.gif) no-repeat; width: 310px; height: 95px; display: block}
.etusivu- .top h1 a {height: 76px !important}
.top h1 {margin-right: 10px; padding-right: 10px; border-right: 1px dotted #bbb; height: 105px}

/* ITEM
----------------------*/
.item {margin-bottom: 15px; padding-top: 15px; border-top: 1px dotted #bbb; float: left; width: 100%}
.item p {margin: 0 0 0.5em 0}
.item h2 {margin-bottom: 0.5em}
.item h2 a {color: #000; font-weight: normal}
.item h2 a:hover {color: #d71920; text-decoration: none}
.main .item h2 {font-size: 1.5em}
.item .more {margin-bottom: 0}
.item .more a {font-weight: bold}
/* item img rules */
.item img {padding: 4px; border: 1px solid #ddd; background: #fff; margin-bottom: 10px}
.item img.vasen, #document img.vasen {float: left; margin-right: 10px}
.item img.oikea, #document img.oikea {float: right; margin-left: 10px}
.item img.isolated, #document img.isolated {padding: 0; border: 0}
.item img.isolated-vasen, #document img.isolated-vasen {float: left; margin-right: 10px; padding: 0; border: 0}
.item img.isolated-oikea, #document img.isolated-oikea {float: right; margin-left: 10px; padding: 0; border: 0}

.item span, #document span.date, span.preptime, .widget .comment span {border-bottom: 0; color: #888; font-size: 11px; display: block}
.item span {margin: -0.5em 0 1em 0; width: 230px}
.item span a, #document span.date a {font-weight: normal; border-bottom: 1px dotted #888; color: #888}
.item span a:hover {text-decoration: none; border-bottom: 0; color: #D71920}
#document span.date {font-size: 12px; margin: -1.5em 0 1.5em 0}

.s630.item {background: #fff; width: 640px}
.s630.item p {font-size: 14px}

.item.galleryitem {width: 156px; min-height: 200px; _height: 200px}
.item.galleryitem a {display: block}

/* ADS
----------------------*/
.ad {margin-bottom: 10px; text-align: center; background: url(../img/bg/ilmoitus_bg.gif) no-repeat left -2px; padding-top:20px; float: left; width: 100%}
.ad img {padding: 0 !important; border: 0 !important}
#topholder {float: none;display: block; border-bottom: 0; width: 980px; height: 130px; background: none; padding: 5px 0 0 0; margin: 0 auto;text-align:center}
/*leiki*/
.leikiad {background: #FFFFE7 url(../images/mainos-teksti-pysty.gif) no-repeat 0 4px !important; padding-left: 10px}
.leikiad h6 {padding-left: 0; margin-bottom: 0; font-size: 1em}

/* SIDENAVI
----------------------*/
#sidenavi {padding: 0; margin: 0 0 10px 0}
#sidenavi li {border: 1px solid #996600; display: block; margin-bottom: 2px}
#sidenavi li a {color: #000; padding: 5px 10px; background: transparent url(../img/bg/gradient.png) repeat-x 0 -650px; display: block}
#sidenavi li a:hover {background-position: 0 -700px}
#sidenavi li ul {padding: 0}
#sidenavi li ul li {border: none}
#sidenavi li ul li a {background: none; padding: 2px; font-weight: normal; border-top: 1px solid #bbb}

/* WIDGETS */
.widget {margin-bottom: 20px; float: left}
.widget p {margin: 0; clear: both; margin: 10px 0 0 0}
.sidebar .widget h2, .sidebar.widget h2, .s230 .widget h2, #userfeed h2, #searchresults h2, #userwall h2, .s310 .widget h2, .main .widget h2, #document .userdata.widget h2, h2.widgettitle {font-weight: bold; width: 138px; clear: both; background: url(../img/bg/gradient.png) repeat-x 0 -50px; font-size: 13px; color: #fff; margin-bottom: 10px; padding: 7px 5px; line-height: 1.2em}
.widget ul, .info ul  {margin: 0; padding: 0}
.sidebar .widget ul {width: 150px}
.widget ul li, .info ul li, #bigfoodsearch .s310 ul li {display: block !important; border-bottom:1px dotted #BBB; padding: 3px 0}
.sidebar .widget ul li a {font-weight: normal; width: 150px}
.widget ul li  img {display: block}
.widget img {border: 0; padding: 0}
.main .recipes_widget ul li, .s310 .widget.recipes_widget ul li{width: 150px; float: left; border: 0}
#container #userwall .widget.picture_widget ul {width: 640px !important}

.s230 .widget h2 {width: 223px}
.s310 .widget h2, .s310#userfeed h2 {width: 288px}
.main.widget h2, #document .widget h2, #document.mediaitem .userdata h2 {width: 458px}

.widget.picture_widget ul {border: 0; width: 160px; margin-left: -5px}
.main .widget.picture_widget ul, #document .widget.picture_widget ul {width: 480px}
.widget.picture_widget ul li {height: 80px; float: left; margin-right: 5px; margin-left: 5px; font-size: 10px; border: 0; padding: 5px 0; width: 70px; overflow: hidden; text-align: center}
.widget.picture_widget ul li a, .widget.picture_widget ul li li {width: 70px !important}

.widget.recipes_widget img {height: 100px}
.widget.recipesearch_widget {background: url(../img/bg/recipesearch.png) no-repeat 75px 40px; padding-bottom: 10px}
.widget.recipesearch_widget  h2 {background: url(../img/bg/gradient.png) repeat-x 0 -200px; color: #fff}
.widget.recipesearch_widget  h2 span {font-size: 11px; display: block; font-weight: normal; margin-top: 5px}
.widget.recipesearch_widget p {font-size: 11px; margin: 0 0 10px 0; width: 70px}
.widget.recipesearch_widget .searchfield {margin-bottom: 10px; width: 120px}

.widget.recipes_widget  ul li {padding :5px 0}
.widget.recipes_widget  ul li a {width: 140px}
.main .widget.recipes_widget ul {margin-left: -5px; width: 480px}
.s310 .widget.recipes_widget ul {margin-left: -5px; width: 320px}
.main .widget.recipes_widget ul li, .s310 .widget.recipes_widget ul li {min-height: 140px; _height: 140px; margin: 0 5px 0 5px}

.widget.list_widget .comment cite {font-size: 11px; font-style: normal}
.widget.list_widget ul li.comment blockquote {margin: 0;font-size: 12px; padding: 10px 10px 20px 10px; display: block; border: 0 !important; background: #f0f0f0 url(../img/bg/widget_comment_bg.png) no-repeat bottom; width: 130px; overflow: hidden}
.widget.list_widget ul li.comment blockquote a {color: #000}
.widget.list_widget ul li.comment cite a {display: block}
/* e-cards */
#ekortit .widget.recipes_widget ul li  {min-height: inherit; margin-bottom: 10px; background: #fafafa; padding: 10px 0}
#ekortit .widget.recipes_widget ul li img {padding: 0 35px; height: auto}
#ekortit h1 {text-indent:-9999px; background: url(../img/bg/ekortit_vinjetti.png) no-repeat; height: 75px; margin: 0}
#ekortit .info h2 {font-size: 1.5em}
#sendekortti  {float: left}
#sendekortti dd {margin: 10px 0}
#sendekortti dd input {width: 466px}
#sendekortti dd input.button{width: auto}
#sendekortti dt {margin: 10px 0 -10px 0}
.widget.tag_widget ul {font-size: 15px}
.widget.tag_widget ul li {display: inline !important; margin: 0; border: 0}
.widget.tag_widget ul li a {font-weight: normal; display: inline}
/* tag weights */ 
.widget.tag_widget ul li.weight0 {font-size: .75em}
.widget.tag_widget ul li.weight1 {font-size: 1em}
.widget.tag_widget ul li.weight2 {font-size: 1.1em}
.widget.tag_widget ul li.weight3 {font-size: 1.2em}
.widget.tag_widget ul li.weight4 {font-size: 1.25em}

/* userdata */
.userdata h3 {font-size: 1.5em}
.userdata #activitypoints span {display: block; font-size: 20px; color: #FCA314; background: url(../img/icons/star.png) no-repeat 0 7px; padding-left: 20px}
.userdata #activitypoints a {font-size: 11px}
.userdata #activitypoints strong {display: block}
.userdata img, #login img {border: 1px solid #888; padding: 4px; background: #eee; margin-bottom: 10px}
.userdata #activitypoints h4 {font-size: 11px; font-weight: normal}
.userdata #activitypoints #pointsdesc ul li strong {float: right; background: url(../img/icons/star.png) no-repeat right; padding-right: 20px}

/*userfeed & searchresults*/
#userfeed .item {width: 440px; padding-left: 25px; padding-top: 25px; background-position: 0 6px; background-repeat: no-repeat; position: relative; margin-bottom: 5px; overflow: hidden}
.s310#userfeed .item {width: 280px}
#userfeed .item img {float: left; padding: 0; border: 0; top: 5px; right: 0; margin-right: 10px}
#userfeed .item.liked {background-image: url(../img/icons/like.png)}
#userfeed .item.comment {background-image: url(../img/icons/comment.png)}
#userfeed .item.picture {background-image: url(../img/icons/picture.png)}
#userfeed .item.recipe {background-image: url(../img/icons/recipe.png)}
#userfeed .item span {margin: 0; position: absolute; top: 5px}
.main .widget h2, #container #userfeed h2, #searchresults h2, h2.widgettitle {width: 458px}
#searchresults h3 {margin-bottom: 5px}
#searchresults .item img {margin-bottom: 10px; margin-right: 10px; float: left}

/* COMMENTS
----------------------*/
#kommentit {font-size: 12px; float: left}
.comment img {margin-right: 10px; float: left}
#document .item.comment abbr {float: none !important; margin: 0}
#kommentit .item.comment img {padding: 0; border: 0}
#kommentit .comment {position: relative}
#kommentit .comment .permalink {position: absolute; right: 0}
#kommentit .comment div {width: 390px; float: left; display: block}
.comment div.adminpanel {position:relative;margin-top:10px;left: 50px; border:1px solid #E4532C; background:none; padding: 9px 9px 9px 28px}
.comment div.fold {position:relative;left: 47px; padding: 0 9px 9px 28px}
.comment div p {margin: 0}
#kommentit .comment div p {margin: 0 0 1em}
.comment div h2, .comment div h4 {margin-bottom: 0.25em; font-size: 1em; font-weight: normal}
.comment h2 a {color:#003366}
.commentform label {font-weight: bold}
textarea#comment {display: block; border-left: 1px solid #969696; border-top: 1px solid #969696; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; margin-bottom: 18px; width: 468px}
#nickname {display: block}

/*assorted & temp */
.register_button {width: 128px; display: block; background-position: 0 -200px !important; margin-bottom: 10px; color: #fff; text-align: center; font-size: 18px; line-height: 1em; padding: 5px 10px}
a.register_button:hover {background-position: 0 -300px !important; text-decoration: none}
.register_button span {display: block;font-size: 12px; font-weight: normal; margin: 0; width: auto; color: #fff}
#add_own_recipe {background: url(../img/icons/recipe.png) no-repeat 0 0; margin: 0 0 10px 0; padding: 0 0 0 20px; font-size: 12px; font-weight: bold; color: #749627}
#add_own_recipe a {display: inline; color: inherit; text-decoration: underline}
.sidebar .item img {padding: 0; border: 0}
.sidebar .item h2 {font-size: 1.5em}
#reseptit ul li {width: 150px}
.error, .form-errors {color:#FF0000}
tr.error td input {border: 3px solid #FF0000 !important}
#document .gallery-thumb-intro li a img {border: 0 !important; width: 70px !important; height: 70px !important; padding: 0}
.etusivu-profiilit #container {background: none}
.pager {float: left}
/* me lukijat exceptions */
.etusivu-me-lukijat #userfeed {width:310px}
.etusivu-me-lukijat #container #userfeed h2, .etusivu-me-lukijat #container .s310 .widget.recipes_widget h2 {width: 298px}
.etusivu-me-lukijat #userfeed .item {width: 285px !important}
#userwall h2  {width: 618px}

/* BIG FOODSEARCH
----------------------*/
#bigfoodsearch {position: relative}
#bigfoodsearch  .s630.item {background: url(../img/dev/ruoka_bg.jpg) repeat; position: relative; padding-top: 15px}
#bigfoodsearch #featuredfood {position: absolute; right: 6px; top: 3px; background: #000; color: #fff; padding: 5px}
#bigfoodsearch #featuredfood a {color: #fff}
#bigfoodsearch h2 {color: #D71920}
#bigfoodsearch .s470, #bigfoodsearch .sidebar {background: url(../img/bg/white_opacity95.png) repeat; padding: 10px; border: 0 !important}
#bigfoodsearch .s470 { width: 420px; position: absolute; left: 10px}
#bigfoodsearch .sidebar {margin-right: 10px; width: 140px; float: right}
#bigfoodsearch .button {padding: 9px; font-size: 16px; width: 70px}
#bigsearch {width: 300px; padding: 10px; border: 1px solid #bbb; font-size: 1.3em; margin-bottom: 10px; margin-right: 5px; margin-left: 0}

/* advanced search */
#bigfoodsearch fieldset {float: left; padding: 5px; background: #eee; width: 100%; border: 0 !important; margin-bottom: 10px}
#bigfoodsearch .s310.nomargin fieldset {width: 135px}
#bigfoodsearch .s310.nomargin fieldset {margin-right: 10px}
#bigfoodsearch .s310 ul {width: 150px; float: left; margin-right: 10px; width: 140px}
#bigfoodsearch .s310 ul li input {float: left}
#bigfoodsearch .s310 ul li label{display: block; padding-left: 20px; cursor: pointer}
#bigfoodsearch legend {font-weight: bold}

/* DOCUMENT
----------------------*/
#document {font-size: 14px}
#document img {padding: 4px; border: 1px solid #bbb; background: #fff; margin-bottom: 10px; max-width: 460px}
#document abbr {border: 0; color: #666}
#document span.tags {margin: 10px 0; padding: 5px 5px 5px 25px; background: url(../img/icons/tag.png) no-repeat 5px center #FFFFE0; width: 440px; float: left}

#articlenavigation {width: 480px; margin: 10px 0 10px -5px; font-size: 12px; float: left}
#articlenavigation a {width: 220px; display: block; float: left; margin: 0 5px 0 5px; padding: 5px; font-size: 14px}
#articlenavigation a.next_document {text-align: right; float: right}
#articlenavigation a:hover {text-decoration: none; background: #FFFFE0}
#articlenavigation a span {margin: 0; font-size: 10px; color: #888; display: block}

#document ul {list-style-type: circle}
#document ul li {display: list-item; list-style: disc inside}

/* test */
.testdocument form dl dt {border-top: 1px solid #bbb; margin: 10px 0; padding: 10px 0 0 0}
.testdocument form dl dd {margin: 0}
.testdocument form dl dd input {margin-right: 10px}

/* poll */
#document .tulokset table{border:0 none;margin:0;padding:4px;border-collapse:collapse}
#document .tulokset table caption{display:none}
#document .tulokset table th{background:#fff;border:0 none;margin:0;padding:10px 0 4px 0}
#document .tulokset table th span {display: inline}
#document .tulokset table td{padding:0.3em;padding-left:0.6em;padding-right:0.6em;border:1px solid #d0e6b7;border-collapse:collapse}
#document .tulokset table td img{margin: 0 10px 0 0;border:1px solid #8cc34e}

/* document special bits */
div.reseptinosto, div.niksikortit, div.ostosnosto, div.niksinosto, div.huomio, div.menunosto, div.erikoisnosto {background:#EFEBE3;border-bottom:1px solid #A39B8A;padding:10px;margin:10px; border-top: 1px solid #A39B8A}

/* COMMON FIELD STYLES
----------------------*/
.searchfield, .textfield {width: 128px; border: 1px solid #bbb; padding: 5px 0; font-size: 14px; padding-left: 20px; background-image: url(../img/bg/search.gif); background-repeat: no-repeat; background-position: 4px 5px}
.searchfield.hint, .textfield.hint {color: #888}
.textfield {padding-left: 5px; background: none}
#search .searchfield {width: 152px}

/* COMMON BUTTON STYLES
----------------------*/
.button, button {font-weight: bold; background: url(../img/bg/gradient.png) repeat-x 0 -850px; padding: 4px 10px; cursor: pointer; overflow: visible}
li .button {display: block}
.red-button {background-position: 0 -150px; color: #fff}
.green-button {background-position: 0 -350px; color: #fff}

/* RECIPE
----------------------*/
.instructions {font-size:12px}
.instructions ol {margin-bottom: 10px; list-style-position: inside}
.instructions ol li, .instructions ul li {display: list-item; margin-bottom: 10px; list-style-position: inside}
.instructions ul li {list-style-type: disc}
.incredients .info {border: 0; background: lightyellow; width: auto}
.incredients .info h3 {font-size: 14px; margin: 0 0 10px 0}
.incredients {width: 200px; padding: 10px; background: #efefef; font-size: 12px}
.incredients table {width: 200px}

.info {background: #FEE76D; padding: 10px; width: 448px; border: 1px solid #FFA500; float: left}
.s300 .info {width: 278px}
.userdata {font-size: 12px}

#breadcrumb {margin: 0 0 9px 0; padding:0; list-style-type: none;border: 1px solid #ddd; height:2em}
#breadcrumb li {float: left; padding-left:12px; line-height: 2em; background: url(../img/bg/breadcrumb_bg.gif) no-repeat center right}
#breadcrumb li a, #breadcrumb li span {display: block; padding: 0 20px 0 0}

.alue-reseptit #document h2 {font-size: 1.5em}

/* 404 PAGE
----------------------*/
#error404 {background: url(../img/bg/404_bg.png) no-repeat -20px -20px; height: 500px}
#error404 #message {margin-left: 400px; font-size: 14px; margin-top: 30px}
#error404 #message h1 {font-weight: bold}
#error404 #message  ul {list-style-type: disc; margin-left: 20px}
#error404 #message  ul li {display: list-item; margin: 10px 0}
#error404 #message  ul li  span {display: block; color: #888; font-size: 12px}

/* XMAS
----------------------*/
body.alue-joulu {background: #d71920 url(../img/bg/joulu_bg.jpg) no-repeat center top !important}
body.alue-posti {background: #ffffff url(../img/bg/ads/posti_bg.jpg) repeat-y center top !important}/*Itella kampanja Joulu-osiossa*/

/* PAGINATION
----------------------*/
.pagination {margin:18px 0;display:block;clear: both}
.pagination span.page {font-size:1.0em;display:block;margin-bottom:10px; font-weight: bold}
.pagination a {font-weight:bold;font-size:1.0em; text-decoration:none;padding: 6px 10px;border:1px solid #ddd;margin:0 1px 10px 1px}
.pagination a.current {font-weight: normal;color:#888;background-color:#fafafa;border:1px solid #eee}
.pagination a.previous, .pagination a.first {margin-right: 10px}
.pagination a.next, .pagination a.last {margin-left: 10px}

/* FILTER
----------------------*/
.filternote {display: block; clear: both; text-transform: uppercase; font-size: 0.8em}
.filter, .filter li {border-color: #7c7c7c; border-style: solid}
.filter {margin: 0 0 10px 0; float: left}
.filter li {float: left;  border-left-width: 1px; margin-right: 10px; background: transparent url(../img/bg/gradient.png) repeat-x scroll 0 -950px; display: block; padding: 0; border-width: 1px; margin-left:-1px}
.filter li a {color: #000; font-weight: normal; padding: 2px 10px; display: block}
.filter li.active {background:transparent url(../img/bg/topnav_li_active.png) repeat-x scroll 0 0}
.filter li.active a {color: #fff}

/* common borders and border-radius */
#wrapper, .filter li, .button, button, .sidebar .widget h2, .sidebar.widget h2, .userdata img , #userfeed h2, #searchresults h2, .s230 .widget h2, #userwall h2, #bigfoodsearch .s470, #bigfoodsearch .sidebar, .s310 .widget.recipes_widget h2, .main.widget h2, .widget h2, ul#topnav, #login form, #login img, .script #pointsdesc, .widget.list_widget .comment blockquote, h2.widgettitle {border-top: 1px solid #BEBEBE; border-left: 1px solid #BEBEBE; border-bottom: 1px solid #888 !important; border-right: 1px solid #888; -border-radius: 5px; -moz-border-radius: 5px;-webkit-border-radius: 5px}

/* SCRIPT
----------------------*/
#bigfoodsearch .s470 p  {display: none}
.script #bigfoodsearch .fold {display: none; float: left; background: white; position: absolute; top: 180px; left: 0}
/*.script #bigfoodsearch #advanced_search_open {display: block; position: static}*/
.script #bigfoodsearch .s470 p {display: block}
.script #pointsdesc {border: 0;display: none; position: absolute; background: #333; left: 140px; margin-top: -110px; width: 200px; color: #fff; padding: 10px; z-index:2}
.script #pointsdesc ul {width: 100%}
.script .userdata #activitypoints {position: relative}
#pointsdesc p {font-weight: bold; margin: 0}
.script #user-recipe-form .hidden {display: none}

/* SOCIALFUNCTIONS
----------------------*/
#document .socialfunctions {float: left; padding-top: 15px; border-top: 1px solid #999; width: 100%}
.socialfunctions .like, .socialfunctions .comment, .socialfunctions .print {background-position: 0 4px; background-repeat: no-repeat; padding-left: 20px}
.socialfunctions .like {background-image: url(../img/icons/like.png)}
.socialfunctions .like form input {background: none; border: 0; padding: 0; font-weight: bold; color: #D71920; cursor: pointer}
.socialfunctions .comment {background-image: url(../img/icons/comment.png)}
.socialfunctions .print {background-image: url(../img/icons/print.png)}
#document .socialfunctions .addthis img {padding: 0; border: 0; margin-top: -5px}
#document .socialfunctions li {float: left; margin-right: 10px; min-height: 20px; display: block}
#document .socialfunctions .addthis {margin-right: 10px}
#document .sidebar .socialfunctions {width: 150px; padding: 0}
#document .sidebar .socialfunctions li {width: 130px}
#document .sidebar .socialfunctions li.addthis {width: 150px}
#document .socialfunctions .like span {margin: 0 0 0 -20px; font-size: 11px; text-align: center; display: block}

/* MEDIAGALLERY
----------------------*/
.mediaitem .attachment {background: #f2f2f2; text-align: center; margin-bottom: 10px}
#document.mediaitem .attachment img {border: 0; padding: 0; margin: 0}
.mediaitem .userdata {position: relative; margin-top: 10px}
.mediaitem .userdata img {width: 70px}
.mediaitem .userdata .created_by {width: 70px; float: left; text-align:center}
#document.mediaitem .userdata .created_by img {padding: 0; border: 0 !important}
.mediaitem .userdata .created_by h3 a {font-size: 11px; margin-top: 2px; font-weight: normal}
.mediaitem .userdata ul {position: absolute; left: 80px; float: left; width: 230px}
.mediaitem .userdata #add_own_recipe {float: left; width: 140px; left: 320px; position: absolute}

/* REGISTER AND EDIT PROFILE
----------------------*/
form#userdata {float: left; background: #fff}
.formparagraph label {width: 180px; position: absolute; left: 0; top: 0; display: block; font-weight: bold}
form#userdata p {margin-bottom: 10px}
form#userdata span {font-size: 0.9em; font-weight: normal}
form#userdata input, #userdata textarea, #user-recipe-form input, #user-recipe-form textarea {width: 265px; border: 1px solid #bbb; padding: 5px; font-size: 12px; margin-top: -10px}
form#userdata input.checkbox {width: auto; border: 0}
form#userdata textarea {margin: 0; width: 265px}
form legend {white-space: normal; font-size: 1.25em; padding: 0; font-weight: bold}
form#userdata fieldset {padding: 18px 10px; width: 460px; border:0; background: #f3f3f3; display: block}
form#userdata .s310 fieldset {width: 290px}
form#userdata .sidebar fieldset {width: 244px}
form#userdata .preview-thumbnail {float: left; width: 122px}
form#userdata .widget.picture_widget ul {width: 250px}
form#userdata h3 {clear: both}
form#userdata .preview-thumbnail {border: 5px solid #ccc; margin-bottom: 10px; width: 280px; background: url(../img/bg/avatar_preview_bg.png) no-repeat 0 -16px; position: relative; height: 200px}
form#userdata .preview-thumbnail img {position: absolute; left: 10px; top: 35px}
.formparagraph {margin: 0 0 10px 0; position: relative;border-bottom: 1px solid #eee; padding: 10px 0 10px 180px}
label em {color: red}
form#userdata .widget.picture_widget li input {width: 20px}

/* user recipe form */
#user-recipe-form {font-size: 12px}
#user-recipe-form #recipe_ingredients {position: relative; padding: 10px 10px 30px 10px; background: lightyellow; margin-bottom: 20px}
#user-recipe-form .appendo {width: 100%}
#user-recipe-form .appendoButtons {position: absolute; right: 20px; bottom: -15px; width: 300px}
#user-recipe-form .appendoButtons button {float: right; margin-left: 10px; font-size: 11px}
#user-recipe-form .ingredient_amount {width: 30px}

/*offsite links*/
.offsite {background: url(../img/icons/offsite.gif) no-repeat right center; padding-right: 12px}

/* custom */
body.alue-vichy {background: #fff url(../img/bg/ads/vichy_bg.jpg) repeat-y top center}
body.alue-vichy #sideads {display: none}
/* paasiainen */
body.alue-paasiainen {background: #FCD61D}
/* puutarha*/
body.alue-puutarha {background: #fff url(../img/bg/puutarha_bg.png) repeat-x top center}

/* FOOTER
----------------------*/
.footer {width: 100%; float: left}
/* GENERAL YK LEGACY SITEFOOTER:( */
.site-info-wrap, .site-info dl, .site-info dd-last , .site-info h3, .site-info dt{margin: 0;padding: 0;float:left}
.site-info-wrap {font-size: 12px;width:100%;clear:both;background-repeat: repeat-x;background-position: top}
.site-info {margin:0 auto;padding:30px 0pt 60px 255px;width:980px;background-repeat: no-repeat;background-position: 20px 47px}
.site-info h3 {clear:left;padding:15px 0 0 0;color:#000}
.site-info dt {font-weight:bold;background:url(../img/bg/kaksoispiste.gif) 100% 65% no-repeat;padding:0 5px 0 0;margin:0 5px 0 0}
.site-info dl {clear:left;float: none;width:580px}
.site-info dd {margin:0 5px 0 0;padding:0 10px 0 0;background:url(../img/bg/valiviiva.gif) no-repeat 100% 60%;float:left}
.site-info dd.last {background:none}
/* YK FOOTER */
#yk-info-wrap, #yk-info .clear, #yk-info h2 a, #customer-service-info p, #yk-info address, #yk-info h2 a, #customer-service-info{margin: 0;padding: 0;float: left}
#yk-info-wrap {width:100%;clear:both;background:#253032 url(../img/bg/yk-tausta.gif) repeat-x top;position: relative;font-size: 13px}
#yk-info {margin:0 auto;padding:10px 0 30px 0;text-align:left;width:952px;color:#b9c6b6;font-size:90%}
#yk-info address {display:block;width:175px;height:55px;padding:16px 0 5px 0;font-style:normal;line-height:130%}
#yk-info .clear {width:100%;height:1px;clear:both;float: none}
#yk-info h2 a {display:block;width:200px;height:38px;text-indent:-9999px;text-decoration:none;outline:0 none}
#customer-service-info h4 {margin:2px 0 1px 0;padding:0;font-size:1em}
#customer-service-info p {line-height:130%;float:none}
#customer-service-info {display:block;width:415px;height:54px;padding:14px 0 5px 0}
/* YK  SITES LIST*/
#palvelut dt, #palvelut dd, #palvelut dd.last {padding:0 8px 0 0;margin:0 6px 0 0;float: left} 
#palvelut {margin:0 auto;padding:0 112px 0 0;text-align:left;width:840px;color:#b9c6b6;clear:both}
#palvelut dt {font-weight:bold;background:url(../img/bg/kaksoispiste-vaalea.gif) 96% 60% no-repeat}
#palvelut dd {background:url(../img/bg/valiviiva.gif) no-repeat 100% 60%;white-space:nowrap}
#palvelut dd.last {margin:0;padding:0;background:transparent}
#palvelut a {color:#b9c6b6;text-decoration:none}
#palvelut a:hover {color:#b9c6b6;text-decoration:underline}
#palvelut a.selected, #palvelut a.selected:hover {color:#fff;font-weight:bold;text-decoration:none}
/* YK logo*/
h2#kuvalehdet_logo, h2#kuvalehdet_logo a {height: 69px;width: 220px;margin: 0;padding: 0;text-indent: -9999px;display: block}
h2#kuvalehdet_logo {position: absolute;right: 0;bottom: 0;background: url(http://www.otavakonserni.fi/s/img/om_logo.gif)}
/* site specific footer styles */
#kotiliesi-info, #maalla-info {width: 725px;text-align:left; padding:29px 0 45px 255px;margin:0 auto}
#kotiliesi-info-wrap, #maalla-info-wrap  {font-size: 13px;width:100%;clear:both;float:left; margin:0;padding:0;background:#f2e0ee url(../img/bg/kotiliesi_palstatausta.png) repeat-x}
#kotiliesi-info {background:url(../img/kotiliesi_pieni.gif) 21px 45px no-repeat}
#maalla-info {background:url(../img/maalla_pieni.gif) 21px 45px no-repeat}