/** * CSS for dansafolkdans.se * Screen Media * Republic Factory, www.republic.se **/ /* basic typography */ body { font-size: 62.5%; font-family: Tahoma, Arial, sans-serif; background: #efe4cf url(../images/bg-body.jpg); color: #1a1a19; text-align: center; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: normal; line-height: 1.8; } p { font-weight: normal; line-height: 1.8em; font-size: 1.1em; } h1 { font-size: 2em; margin-bottom: 0.2em; letter-spacing: -0.03em; line-height: 1.2; font-weight: bold; color: #212623; } h2 { font-size: 1.8em; margin-bottom: 0.2em; color: #fff; } h3 { font-size: 1.3em; margin-bottom: 6px;} h4 { font-size: 1em } p, ol, ul, ol li { padding: 10px 0; font-family: Tahoma, Arial, sans-serif; line-height: 1.6;} dd, dt { line-height: 1.2;} img { margin: 0; padding: 0; line-height: 1;} a img { border: 0;} img.right { float: right; margin: 0 0 0 20px; } hr { visibility: hidden; } #content hr { visibility: visible; height: 1px; border: 0; margin: 30px 0 10px 0; padding: 0; border-top: 1px solid #ccc; width: 100%; } #district h1 { color: #00629e; font-size: 35px; font-family: Georgia; letter-spacing: -0.05em; margin-top: 20px; } /* links */ a:link { color: #00629e; text-decoration: underline;} a:visited { color: #00629e; text-decoration: underline;} a:hover { color: #428652; text-decoration: underline;} a:active { color: #428652; text-decoration: underline;} h2 a:link { text-decoration: none; } h2 a:visited { color: #000; text-decoration: none; } h2 a:hover { color: #50b9e7; } h2 a:active { color: #50b9e7; } #calendar a:link { color: #000; text-decoration: none; } #calendar a:visited { color: #000; text-decoration: none; } #calendar a:hover { color: #333; text-decoration: underline; } #calendar a:active { color: #333; text-decoration: underline; } #calendar a.next { float: right; margin-top: 5px; margin-right: 10px; } #calendar a.prev { float: left; margin-top: 5px;} /* layout */ #container { width: 930px; margin: 0 auto; text-align: left; } /* sidebar ********************************************** */ #sidebar { position: relative; float: left; margin-top: 0px; width: 160px; height: 630px; background: url(../images/bg-sidebar.gif) no-repeat; display: inline; } #sidebar img.home { margin: 0 0 0 5px; } #sidebar #flashmap { margin: 32px 0 0 0; } #sidebar img.map { margin: 0 0 0 7px; } #sidebar #login { position: absolute; top: 465px; left: 20px; width: 130px; } #login h2 { margin: 0; padding: 0; } #login p { margin: 0; padding: 0; } #login input { width: 110px; height: 17px; } #login input.loggain { margin: 17px 0 0 0; width: 110px; height: 24px; float: right; cursor: pointer; background: url(../images/button-loggain.gif) no-repeat; font-weight: bold; color: #333; } #district #sidebar { background: url(../images/bg-district-sidebar.gif) no-repeat; } #district #login input.loggain { background: url(../images/button-district-loggain.gif) no-repeat; font-weight: bold; color: #333; } #local #sidebar { background: url(../images/bg-local-sidebar.gif) no-repeat; } #local #login input.loggain { background: url(../images/button-district-loggain.gif) no-repeat; font-weight: bold; color: #333; } /* content ********************************************** */ #content { position: relative; float: left; width: 580px; margin: 0px 15px 0 15px; display: inline; min-height: 450px; } #logo { position: absolute; top: 0; left: 0; } #welcome { position: absolute; top: 160px; left: 0; width: 280px; } #alltdubehover { position: absolute; top: 320px; left: 0; } #pictures { position: absolute; top: 150px; left: 290px; width: 295px; height: 230px; background: url(../images/bg-start-bildspel.gif) no-repeat;} #pictures img { margin: 9px 20px; } #flashcontent { margin: 9px 20px; } #quiz { position: absolute; top: 370px; left: 290px; width: 295px; height: 250px; background: url(../images/bg-start-fraga.gif) no-repeat;} #quiz h2 { margin: 15px 0 0 50px; } #quiz ol { margin: 0 0 0 50px; padding: 0; list-style-type: none; } #quiz ol li { margin: 0 0 5px 0; padding: 0; color: #fff; line-height: 1.7; } #quiz ol li input { margin: 2px 4px 2px 0px; vertical-align: middle; } #quiz ol li label { margin: 0px 7px 0px 0px; vertical-align: middle; } #quiz input.dittresultat { margin: 2px 0 0 50px; width: 110px; height: 24px; cursor: pointer; background: url(../images/button-dittresultat.gif) no-repeat; font-weight: bold; color: #333; } /* content - district */ #district #content img.map { float: right; } #district #content p { width: 300px; } #district #content li { font-size: 1.2em; } /* content - local */ #local img.logo { float: left; margin: 20px 20px 0 0; } #local h1.welcome { float: left; position: static; color: #00629e; font-size: 30px; font-style: italic; width: 460px; } #local h1 { float: left; position: static; color: #00629e; font-size: 35px; font-family: Georgia; letter-spacing: -0.05em; width: 460px; } #local #welcome { clear: both; position: static; width: 250px; margin-bottom: 20px; } #local #contact { background: url(../images/bg-local-contact.gif) no-repeat; width: 300px; height: 102px; } #local #contact h2 { margin: 10px 0 0 10px; padding: 5px 0 0 0; color: #00629e; } #local #contact p { margin: 0 0 0 10px; padding: 0px 0 20px 0px; line-height: 1.2; font-weight: bold; color: #fff; color: #00629e; font-style: italic; font-weight: normal; } #local #contact p a { color: #00629e; } #local #activities { background: url(../images/bg-local-activities-repeat.gif) repeat-y; width: 300px; margin:0; padding: 0;} #local #activities-top { background: url(../images/bg-local-activities-top.gif) no-repeat 0 0; height: 70px; } #local #activities-bottom { clear: both; background: url(../images/bg-local-activities-bottom.gif) no-repeat; height: 61px; } #local #activities h2 { padding: 45px 0 0 10px; color: #fff; } #local #activities dl { margin: 10px 0 0 10px; padding: 0; color: #fff; font-weight: normal; } #local #activities dt { width: 130px; font-weight: bold; } #local #activities dd { width: 130px; margin-bottom: 10px; } #local #activities dt.col1 { float: left; clear: left; margin-right: 10px; } #local #activities dd.col1 { float: left; clear: left; margin-right: 10px;} #local #activities dt.col2 { float: left; clear: none; margin-top: -10px;} #local #activities dd.col2 { float: left; clear: none; } #local #pictures { position: absolute; top: 130px; left: 290px; } #local #tips { position: absolute; top: 360px; left: 310px; width: 260px; height: 230px; background: url(../images/bg-local-tips.gif) no-repeat;} #local #tips p { width: 130px; margin: 60px 0 0 45px; color: #fbe79d; font-size: 13px; line-height: 1.25; } #local #tips p a { color: #fbe79d; font-size: 13px; line-height: 1.25; } /* content - news */ #news { position: absolute; top: 200px; left: 20px; width: 500px;} /* calendar (third column) ********************************************** */ #calendar { float: right; margin-top: 0px; width: 160px; background:url(../images/bg-calendar-repeat.gif) repeat-y; display: inline; } #calendar #calendar-top { position: relative; background: url(../images/bg-calendar-top.gif); width: 160px; height: 150px; } #calendar #calendar-top #topimage { background: url(../images/bg-topimage.gif) no-repeat; padding: 4px 9px 7px 4px; position: absolute; top: 18px; left: 16px; } #calendar #calendar-top h2 { position: absolute; top: 80px; left: 5px; line-height: 1; color: #fff; width: 150px; } #calendar h2 { margin: 0 0 0 15px; color: #000; } #calendar dl { margin: 0 10px 0 15px; } #calendar dt { font-weight: bold; margin-bottom: 3px; } #calendar dd { margin-bottom: 7px; } #calendar #calendar-bottom { background: url(../images/bg-calendar-bottom.gif) no-repeat; height: 25px; } /* calendar - district */ #district #contact { position: relative; background: url(../images/bg-district-kontakt.gif); width: 160px; height: 133px; } #district #contact h2 { padding: 10px 0 0 8px; line-height: 1.2; color: #fff; } #district #contact p { padding: 0 0 0 25px; line-height: 1.2; color: #fff; } #district #contact p a { color: #fff; } #district #calendar { float: right; margin-top: 0px; width: 160px; background:url(../images/bg-district-calendar-repeat.gif) repeat-y; display: inline; } #district #calendar-top { position: relative; background: url(../images/bg-district-calendar-top.gif) no-repeat; width: 160px; height: 70px; } #district #calendar-top h2 { position: absolute; top: 40px; left: -2px; line-height: 1; color: #000; width: 150px; } #district #calendar-bottom { background: url(../images/bg-district-calendar-bottom.gif) no-repeat; height: 62px; } /* calendar - local */ #local #localpictures { position: relative; background: url(../images/bg-local-localpictures.gif) no-repeat; width: 160px; height: 226px; } #localpictures h2 { padding: 20px 0 0 0px; color: #00629e;} #localpictures .photos { padding: 0px 0 0 15px; } #localpictures .photos img { background: url(../images/bg-localpicture.gif) no-repeat; padding: 0 3px 3px 0; } #localpictures .photos img.button { background: none; margin: 15px 0 0 4px; } #local #calendar { background:url(../images/bg-local-calendar-repeat.gif) repeat-y; } #local #calendar-top { position: relative; background: url(../images/bg-local-calendar-top.gif) no-repeat; width: 160px; height: 70px; } #local #calendar-top h2 { position: absolute; top: 40px; left: -2px; line-height: 1; color: #000; width: 150px; } #local #calendar-bottom { background: url(../images/bg-local-calendar-bottom.gif) no-repeat; height: 52px; } /* footer */ #start #footer { position: absolute; top: 600px; left: 0; } #district #footer { position: relative; clear: both; padding-top: 20px; } #district #footer p { text-align: center; font-size: 9px; margin: 0; padding: 0; width: 580px; } #footer { clear: both; padding: 0; width: 580px; margin: 0 auto 20px auto; } #footer p { text-align: center; font-size: 9px; margin: 0; padding: 0; width: 580px; } #footer p img { vertical-align: middle; margin: 0px 5px 0 0; } .results { position: absolute; top: 20%; left: 35%; width: 30%; height: 320px; padding: 10px 30px; background: #fee996 url(/images/bg-gul.gif) repeat; border: 2px solid #000; display:none; text-align: left; } /* forms */ label { color: #fff; } input { background: transparent; border: none; } #selectdistrict { margin: 5px 0 0 14px; } #selectdistrict select { margin: 0 0 3px 0; width: 130px; }