/* ***********************************************************************************************************************
BRUDHALL.COM | CSS
AUTHOR | Niko Kauranen
URL | brudhall.com
*********************************************************************************************************************** */



/* ***********************************************************************************************************************
GLOBAL STYLES
*********************************************************************************************************************** */

body {background:#bc0006; padding:0; margin:0; font:12px Trebuchet MS, Verdana, Arial, sans-serif;}
a {color:#bc0006; text-decoration:underline;}
a:hover {color:#bc0006; text-decoration:none;}
.floatLeft {float:left; padding:0 20px 0 0;}
.clear {clear:both; margin:0; padding:0;}
form {margin:0; padding:0 0 0 15px; width:200px;}
input {margin:0; padding:0; width:200px;}
/* #submit input {margin:0; padding:0; width:200px; background:#ccc;}*/
textarea {margin:0; padding:0; width:200px;}

/* IMAGES (padding + floats) */
.floatImgLeft {float:left; margin:0; padding:5px 0 0 0;}
.floatImgRight {float:right; margin:0; padding:5px 0 0 0;}
.floatImgLeftMarginRight {float:left; margin:0; padding:0 10px 0 0;}
.imgPaddingTopBottom {margin:0; padding:5px 0 5px 0;}
.floatImgLeftCenter {float:left; margin:0; padding:5px 5px 0 5px;}


/* ***********************************************************************************************************************
WRAPPERS
*********************************************************************************************************************** */

#wrapper {width:900px; margin:0px auto; padding:0;}
#wrapperMain {width:900px; margin:30px 0 0 0; padding:0 0 10px 0; background:#fff;}
#wrapperTop {width:900px; height:100px; margin:0; padding:0;}
#wrapperTopNav {width:880px; height:24px; margin:0 10px 0 10px; padding:0; background:#bc0006;}
#wrapperContent {width:880px; margin:10px 10px 0 10px; padding:0;}



/* ***********************************************************************************************************************
TOP
*********************************************************************************************************************** */

#topLogo {float:left; width:360px; height:100px; margin:0; padding:0; background:url(../images/_topLogo.gif) no-repeat;}
#topLang {float:right; width:540px; height:100px; margin:0; padding:0; text-align:right;}



/* ***********************************************************************************************************************
FOOTER
*********************************************************************************************************************** */

#footer {clear:both; width:880px; height:21px; margin:0px auto; padding:15px 0 0 0; border-bottom:solid 1px #b9babd; text-align:right;}
#footerNav {float:left; width:330px; height:21px; margin:0; padding:0; text-align:left;}
#footerContact {float:right; width:550px; height:17px; margin:0; padding:0 0 4px 0;}



/* ***********************************************************************************************************************
NAV (language + main navs + footer)
*********************************************************************************************************************** */
ul#navLanguage {float:right; width:64px; height:54px; margin:0; padding:24px 30px 0 0;}
ul#navLanguage li {list-style-type:none; margin:0; padding:0 0 6px 0;}
ul#navLanguage li a {display:block; height:14px; margin:0; padding:0;}

li#navLanguageSvenska a {width:64px; background:url(../images/_navLanguageSvenska.gif) no-repeat; margin:0; padding:0;} 
li#navLanguageSvenska a:hover {background:url(../images/_navLanguageSvenskaActive.gif) no-repeat;}
body.svenska li#navLanguageSvenska a {background:url(../images/_navLanguageSvenskaActive.gif) no-repeat;}

li#navLanguageSuomi a {width:64px; background:url(../images/_navLanguageSuomi.gif) no-repeat; margin:0; padding:0;}
li#navLanguageSuomi a:hover {background:url(../images/_navLanguageSuomiActive.gif) no-repeat;}
body.suomi li#navLanguageSuomi a {background:url(../images/_navLanguageSuomiActive.gif) no-repeat;}

li#navLanguageEnglish a {width:64px; background:url(../images/_navLanguageEnglish.gif) no-repeat; margin:0; padding:0;}
li#navLanguageEnglish a:hover {background:url(../images/_navLanguageEnglishActive.gif) no-repeat;}
body.english li#navLanguageEnglish a {background:url(../images/_navLanguageEnglishActive.gif) no-repeat;}



ul#nav {position:absolute; width:900px; height:24px; margin:0; padding:0;}
ul#nav li {float:left; list-style-type:none;}
ul#nav li a {height:24px; display:block; position:absolute; top:0; text-indent:-9999px;}

li#navHotelli a, li#navRavintola a, li#navVierasvenesatama a, li#navAktiviteetit a, li#navKokousJuhlat a, li#navFiHistoria a, li#navMitenPerille a {background:url('../images/_navFi.gif');}

li#navHotelli a {background-position:0 0; width:82px; left:0;}
li#navHotelli a:hover {background-position:0 -24px;}
body#hotelli li#navHotelli a {background-position:0 -24px;}

li#navRavintola a {background-position:-82px 0; width:116px; left:82px;}
li#navRavintola a:hover {background-position:-82px -24px;}
body#ravintola li#navRavintola a {background-position:-82px -24px;}

li#navVierasvenesatama a {background-position:-198px 0; width:168px; left:198px;}
li#navVierasvenesatama a:hover {background-position:-198px -24px;}
body#vierasvenesatama li#navVierasvenesatama a {background-position:-198px -24px;}

li#navAktiviteetit a {background-position:-366px 0; width:128px; left:366px;}
li#navAktiviteetit a:hover {background-position:-366px -24px;}
body#aktiviteetit li#navAktiviteetit a {background-position:-366px -24px;}

li#navKokousJuhlat a {background-position:-494px 0; width:158px; left:494px;}
li#navKokousJuhlat a:hover {background-position:-494px -24px;}
body#kokousJuhlat li#navKokousJuhlat a {background-position:-494px -24px;}

li#navFiHistoria a {background-position:-652px 0; width:105px; left:652px;}
li#navFiHistoria a:hover {background-position:-652px -24px;}
body#fiHistoria li#navFiHistoria a {background-position:-652px -24px;}

li#navMitenPerille a {background-position:-757px 0; width:123px; left:757px;}
li#navMitenPerille a:hover {background-position:-757px -24px;}
body#mitenPerille li#navMitenPerille a {background-position:-757px -24px;}

li#navHotell a, li#navRestaurang a, li#navGasthamn a, li#navAktiviteter a, li#navMotenFester a, li#navHistoriaSwe a, li#navKommaBrudhall a {background:url('../images/_navSwe.gif');}

li#navHotell a {background-position:0 0; width:82px; left:0;}
li#navHotell a:hover {background-position:0 -24px;}
body#hotell li#navHotell a {background-position:0 -24px;}

li#navRestaurang a {background-position:-82px 0; width:116px; left:82px;}
li#navRestaurang a:hover {background-position:-82px -24px;}
body#restaurang li#navRestaurang a {background-position:-82px -24px;}

li#navGasthamn a {background-position:-198px 0; width:110px; left:198px;}
li#navGasthamn a:hover {background-position:-198px -24px;}
body#gasthamn li#navGasthamn a {background-position:-198px -24px;}

li#navAktiviteter a {background-position:-308px 0; width:118px; left:308px;}
li#navAktiviteter a:hover {background-position:-308px -24px;}
body#aktiviteter li#navAktiviteter a {background-position:-308px -24px;}

li#navMotenFester a {background-position:-426px 0; width:146px; left:426px;}
li#navMotenFester a:hover {background-position:-426px -24px;}
body#motenFester li#navMotenFester a {background-position:-426px -24px;}

li#navHistoriaSwe a {background-position:-572px 0; width:102px; left:572px;}
li#navHistoriaSwe a:hover {background-position:-572px -24px;}
body#historiaSwe li#navHistoriaSwe a {background-position:-572px -24px;}

li#navKommaBrudhall a {background-position:-674px 0; width:206px; left:674px;}
li#navKommaBrudhall a:hover {background-position:-674px -24px;}
body#kommaBrudhall li#navKommaBrudhall a {background-position:-674px -24px;}



ul#navFooter {position:absolute; width:330px; height:21px; margin:0; padding:0; text-align:left;}
ul#navFooter li {float:left; list-style-type:none;}
ul#navFooter li a {height:21px; display:block; position:absolute; top:0; text-indent:-9999px;}

li#navVieraskirja a, li#navYhteystiedot a {background:url('../images/_navFooterFi.gif');}

li#navVieraskirja a {background-position:0 0; width:105px; left:0;}
li#navVieraskirja a:hover {background-position:0 -21px;}
body#vieraskirja li#navVieraskirja a {background-position:0 -21px;}

li#navYhteystiedot a {background-position:-105px 0; width:225px; left:105px;}
li#navYhteystiedot a:hover {background-position:-105px -21px;}
body#yhteystiedot li#navYhteystiedot a {background-position:-105px -21px;}

li#navGastbok a, li#navKontakt a {background:url('../images/_navFooterSwe.gif');}

li#navGastbok a {background-position:0 0; width:82px; left:0;}
li#navGastbok a:hover {background-position:0 -21px;}
body#gastbok li#navGastbok a {background-position:0 -21px;}

li#navKontakt a {background-position:-82px 0; width:248px; left:82px;}
li#navKontakt a:hover {background-position:-82px -21px;}
body#kontakt li#navKontakt a {background-position:-82px -21px;}


/* ***********************************************************************************************************************
TYPE ELEMENTS
*********************************************************************************************************************** */

h1 {font:bold 17px Trebuchet MS, Verdana; margin:14px 0 0 0; padding:0; color:#bc0006;}
h2 {font:bold 18px Trebuchet MS, Verdana; color:#bc0006;}
h3 {font:bold 0.9em Trebuchet MS, Verdana; line-height:1.4em;}
h4 {font:bold 14px Trebuchet MS, Verdana; color:#bc0006; line-height:1.3em;}
.red {color:#bc0006; font-weight:bold;}
p {font:12px Trebuchet MS, Verdana; margin:5px 0 10px 0; padding:0; line-height:16px;}
#frontLeft h1, #frontLeft p {padding:0 0 0 20px;}



/* ***********************************************************************************************************************
GLOBAL BLOCKS
*********************************************************************************************************************** */

.greyBlockRight {float:right; width:120px; height:145px; margin:5px 0 0 5px; padding:0; background:#e8e8e8;}
.greyBlockRight h1 {margin:0; padding:10px 5px 0 10px;}
.greyBlockRight p {margin:0; padding:10px 5px 0 10px;}

.greyBlock {margin:0; padding:10px; background:#e8e8e8;}
.greyBlock p {margin:0; padding-bottom:0px;}

.redBox {background:#bc0006; padding:10px; color:#fff;}
.redBox a {color:#fff; text-decoration:underline;}
.redBox a:hover {color:#fff; text-decoration:none;}



/* ***********************************************************************************************************************
FRONT
*********************************************************************************************************************** */

#frontLeft {float:left; width:615px; margin:0; padding:0 0 0 0;}
#frontLeftText {float:left; margin:0; padding:0;}
#frontRight {float:right; width:260px; margin:0; padding:0;}
.bannerRight {width:260px; height:145px; margin:0; padding:0; background:#e8e8e8;}
.banner {width:260px; height:135px; margin:5px 0 5px 0; padding:0; background:#e8e8e8;}
.bannerImgFloatRight {float:right; margin:0; padding:0; border-left:solid 3px #fff;}
.bannerImgFloatLeft {float:left; margin:0 10px 0 0; padding:0; border-right:solid 3px #fff;}
.bannerRight h1, .banner h1 {margin:0; padding:10px 5px 0 10px;}
.bannerRight p, .banner p {margin:0; padding:10px 5px 0 10px;}
.bannerBottom h1 {margin:10px 5px 0 10px; padding:0;}
.bannerBottom p {margin:10px 5px 0 0; padding:0;}
.bannerBottom {float:right; width:265px; height:145px; margin:5px 0 0 0; padding:0; background:#e8e8e8;}

#frontLeftTextLeft {float:left; width:345px; margin:5px 0 0 0; padding:0 20px 0 0; border-right:solid 3px #ccc;}
#frontLeftTextRight {float:right; width:242px; margin:5px 0 0 0; padding:0;}



/* ***********************************************************************************************************************
SUB
*********************************************************************************************************************** */

#subLeft {float:left; width:330px; margin:0; padding:0 20px 0 0;}
#subRight {float:right; width:530px; margin:0; padding:0;}
.subRightColumn {float:right; width:250px; margin:0; padding:0 15px 0 0;}
.subRightColumnGB {float:right; width:250px; margin:0; padding:0 0 0 0;}
.subLeftColumnGB {float:left; width:250px; margin:0; padding:0 0 0 0;}
.subRightNav {float:right; width:250px; margin:0; padding:0 0 0 15px;}

.subRightNav ul {margin:0; padding:10px 0 0 0; list-style-type:none;}
.subRightNav li {margin:0; padding:0 0 10px 0;}
.subRightNav li a {font-weight:bold;}
.subRightNav li a:hover {font-weight:bold;}


/* ***********************************************************************************************************************
GALLERY
*********************************************************************************************************************** */

#slideshow {float:left; width:560px; margin:0; padding:0 20px 0 0;}
#slideshowRight {float:right; width:300px; height:300px; margin:0; padding:0;}


ol.commentlist {padding:5px 0 0 0; margin:0; list-style-type:none;}