/*----------------------------------------------------------------------------------------------------------------------------------------------------------- CSS for English for Italy - Main Stylesheet Author: Alison Lee (alisonlee@silktide.com) / Silktide Ltd - All Rights Reserved Created: 17/04/2007 Updated: History: 17/04/2007 Stylesheet created Colours: -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Global Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ body { font: 75% verdana, arial, helvetica, sans-serif; padding: 0; margin: 0;} h1 { font: bold 1.8em arial, verdana, helvetica, sans-serif; color: #0D2497; margin: 20px 0; } h2 { font: bold 3.0em arial, verdana, helvetica, sans-serif; color: #000; text-align: center; margin: 10px 0; } h3 { font: bold 1.6em arial, verdana, helvetica, sans-serif; margin: 10px 0; } h4 { font: bold 1.2em arial, verdana, helvetica, sans-serif; margin: 10px 0; } .nonmember h2 { font-size: 1.4em!important; text-align: left; } .nonmember h3 { font-size: 1.2em!important; } p, li { font-size: 1.0em; line-height: 1.5em; color: #000; } a { color: #000; } a:visited { } a:hover, a:active { color: #3DAA34; } .statusbar { font-weight: normal; font-size: 0.9em; color: #d2d2d2; padding: 0 0 10px; border-bottom: 1px solid #e8e8e8; } .statusbar a { color: #7DC66A; text-decoration: none; } .statusbar a:hover, .statusbar a:active, .statusbar a.statusselected { color: #ff0000; } .prevnext { font-size: 1.2em; padding: 10px 0; border-top: 1px solid #e8e8e8; } .italian, .italian p, td.italian, #content em, #content i, em a:link { font-style: italic; color: #0D2497; } em a:hover, em a:active { color: #3DAA34; } td.sound, td.sound .hideen { color: #ff0000!important; text-decoration: none; } hr { height: 1px; background-color: #e8e8e8; color: #e8e8e8; border: 0; margin: 5px 0; } img { border: 0; } form, table { background: transparent; font-size: 1.0em; } .formtable td { vertical-align: middle; line-height: 1.3em; padding: 4px 0; } .tablestyle { width: auto; clear: both; border-collapse: collapse; margin: 15px 0; } .tablestyle td, .tablestyle th { vertical-align: middle; padding: 1px 5px 1px 0; } .tableborder td, .tableborder th { padding: 5px 10px 5px 0!important; border-bottom: 1px solid #e8e8e8; } .tablehborder td { padding: 5px 10px 5px 10px!important; border-right: 1px solid #e8e8e8; } .tablestyle td img { border: 1px solid #e8e8e8!important; } .topalign td { vertical-align: top!important; } .newstable { width: 100%; border-collapse: collapse; } .newstable td { vertical-align: top; padding: 5px 10px 5px 0; border-bottom: 1px solid #e8e8e8; } .widthwrapper { width: 100%; } .padding { padding: 0 20px; } .right { float: right; } .left { float: left; } .clear { height: 0; clear: both; visibility: hidden; } .imgleft { float: left; margin: 0 20px 10px 0; } .imgright { width:243px; float: right; background-color: #e8e8e8; font-size: 0.85em; text-align: center; margin: 0; } .centerimg { text-align: center; } .centerimg img { margin: 20px auto; } .button { font-size: 0.9em; margin: 5px 0; } .revealbutton, .answerbutton .button, .answersbutton .button, .englishbutton .revealbutton, .italianbutton .revealbutton, .list .revealbutton, .dialoguebutton .revealbutton, .sendbutton .button, .printbutton .button, .translationbutton .button, .translationbutton .revealbutton { width: 50px!important; height: 49px!important; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; font-size: 0px; color: #fff; padding-top: 50px; border: 0; cursor: pointer; margin: 0 5px 5px 0; } .revealbutton, .answerbutton .button { background-image: url("templatefiles/icon-answer.png"); } .answersbutton .button { background-image: url("templatefiles/icon-answer.png"); } .englishbutton .revealbutton { background-image: url("templatefiles/icon-english.png"); } .italianbutton .revealbutton { background-image: url("templatefiles/icon-italian.png"); } .list .revealbutton { background-image: url("templatefiles/icon-list.png"); } .dialoguebutton .revealbutton { background-image: url("templatefiles/icon-dialogue.png"); } .sendbutton .button { background-image: url("templatefiles/icon-send.png"); } .printbutton .button { background-image: url("templatefiles/icon-print.png"); } .translationbutton .button, .translationbutton .revealbutton { background: url("templatefiles/icon-translation.png"); } #accessibility { display: none; } /* Layout Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #container { min-width: 950px; padding: 0 15px; } #header { height: 150px; position: relative; } /* Also set in template */ #topnav { } #contentwrapper { clear: both; margin-top: 20px; } #sidecol { width: 190px; float: left; padding: 5px; border: 1px solid #C6E7EE; margin: 0 15px 5px 0; } #content { margin-left: 205px; margin-right: 165px; } .nonmember #content { margin-left: 205px; margin-right: 0; } #subcontent { width: 140px; float: right; background-color: #C6E7EE; padding: 10px; border: 1px solid #8CCEDA; margin: 0 0 5px 15px; } #footer { font-size: 0.85em; margin-top: 5px; } /* Header Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header img { position: absolute; top: 10px; left: 0; } #header p { position: absolute; top: 125px; left: 10px; font: bold 1.0em arial, verdana, helvetica, sans-serif; color: #011A4B; /*margin: 0 0 10px;*/ } /* Bannerbar Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .banner-left { height: 98px; background: transparent url("templatefiles/navbar-bg-left.png") no-repeat top left; } .banner-right { height: 98px; background: transparent url("templatefiles/navbar-bg-right.png") no-repeat top right; } #login .banner-right { height: 88px; padding: 5px; } /* Login Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #login { width: 200px; height: 98px; position: relative; float: left; background: #fff url("templatefiles/navbar-bg.png") repeat-x 0 0; font-size: 0.9em; margin-right: 15px; } #login table { height: 20px!important; padding: 0!important; margin-top: 3px; } #login td { height: 20px!important; padding: 0!important; } #login label { font-size: 0.85em; } #login input { width: 98px; height: 15px; border: 0; } #login .button { width: 50px!important; height: 15px; background: transparent none; font-size: 0.8em; text-align: right; text-decoration: underline; border: 0; margin-top: 0; } #login p { margin: 4px 0; } #login p a { text-decoration: none; } #login p a:hover { text-decoration: underline; } #login p.password { position: absolute; bottom: 10px; left: 10px; font-size: 0.8em; margin: 0; } #login p.password a { text-decoration: underline; } #login p.password a:hover { text-decoration: none; } #login p#logout { font-weight: bold; text-align: right; } #login p#logout a { text-decoration: underline; } #login p#logout a:hover { text-decoration: none; } /* Banner Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #banner { height: 98px; background: #fff url("templatefiles/navbar-bg.png") repeat-x 0 0; margin-left: 215px; } #banner table { margin: 1px 0 0 3px; } .banneritem { width: 215px; height: 45px; background: transparent url("templatefiles/nav-bg.png") no-repeat top center; text-align: center; vertical-align: middle; padding: 0; margin: 0 5px 0 0; } .banneritem.short { width: 100px; background: transparent url("templatefiles/nav-bg-short.png") no-repeat top center; padding: 0 5px; } .banneritem h2.small { font-size: 1.0em!important; line-height: 1.2em; color: #000; vertical-align: middle; text-align: center; margin: 0; } .banneritem h3 { font-weight: normal!important; font-size: 0.85em!important; font-family: verdana, arial, helvetica, sans-serif!important; line-height: 1.1em; color: #fff; vertical-align: middle; margin: 0; } .banneritem h3 strong { color: #000; } .banneritem h2 a, .banneritem h3 a { color: #fff; text-decoration: none; } .banneritem h2 a:hover, .banneritem h3 a:hover { color: #01194A; } #banner h1 { padding: 25px 20px 20px; margin: 0; } /* Navigation Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #nav { background-color: #7DC66A; text-align: center; } #nav ul { padding: 0; margin: 0; } #nav ul li { list-style-type: none; text-align: left; border-bottom: 2px solid #fff; } #nav ul li em { font-size: 0.85em; font-weight: normal; font-style: italic; color: #0D2497; padding-left: 10px; } #nav ul li a { display: block; font-weight: bold; color: #fff; text-decoration: none; padding: 3px 5px;} #nav ul li a:hover { background-color: #FB5F48; color: #fff; text-decoration: none; } #nav ul li.selected ul { background-color: #D5EDCF; } #nav ul li.selected ul li { font-size: 0.9em; border-top: 1px solid #fff; border-bottom: 0; } #nav ul li.selected ul li em { font-size: 0.9em; color: #3F47BD; } #nav ul li.selected ul li a { font-weight: normal; color: #386F2B; padding: 3px 15px;} #nav ul li.selected ul li.selected a { font-weight: bold; } #nav ul li.selected ul li a:hover { background-color: #FCB0B0; color: #ff0000; } #nav ul ul li.selected ul { border-top: 0; } #nav ul ul li.selected ul li { font-size: 1.0em; border: 0; } #nav ul ul li.selected ul li a { font-weight: normal; color: #386F2B; padding: 3px 30px;} #nav ul ul li.selected ul li a:hover { background-color: #FCB0B0; color: #ff0000; } #nav ul ul li.selected ul li.selected a { background-color: #FCB0B0; font-weight: bold; color: #ff0000; } /* #nav ul li.selected ul { background-color: #339933; border-top: 1px solid #fff; } #nav ul li.selected ul li { border-bottom: 0; } #nav ul li.selected ul li a { font-weight: normal; padding: 3px 15px;} #nav ul li.selected ul li a:hover { background-color: #FB5F48; color: #fff; } #nav ul ul li.selected ul { border-top: 0; } #nav ul ul li.selected ul li { font-size: 0.9em; border-bottom: 0; } #nav ul ul li.selected ul li a { font-weight: normal; padding: 3px 30px;} #nav ul ul li.selected ul li a:hover, #nav ul ul li.selected ul li.selected a { background-color: #FB5F48; color: #fff; } */ #nav img { border: 1px solid #fff; margin: 5px auto; } /* Schedule Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #schedule { } #schedule table { width: 460px; text-align: left; } #schedule table th { padding: 5px; background-color: #DEF1D9; text-align: center; } #schedule #tracker { width: auto; } #schedule #tracker td { width: 100px; padding: 2px 5px; border: 1px solid #e8e8e8; } #schedule #tracker td.sezione { } #schedule #tracker td.parte { text-align: center; } /* Subcontent Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #subcontent h2 { color: #FF0000; } /* Conversation Booker Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .calendar .column { background-color: #fff!important; background-image: url("templatefiles/cell-bg.jpg")!important; } .calendar a, .calendar a:visited { display: block!important; background-color: #BFE4B6!important; text-decoration: none; vertical-align: middle!important; } .calendar a:hover, .calendar a:active { background-color: #c2e9fe!important; } .calendar .innercell span { text-align: center!important; } .calendar .outercell { border: 1px solid #FFF4F8!important; } .calendar .outercell div { border: 0!important; } #conversation table div div { font-size: 0.9em; } #conversation .headerSubcontainer { font-size: 1.2em; } #conversation table div div span { font-size: 1.7em; } #conversation #previousweek, #conversation #nextweek { font-weight: bold; font-size: 1.4em; color: #ff0000; margin-bottom: 20px; } /* Reveal Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .hideen { visibility: hidden; color: #009900; } .hideit { visibility: hidden; font-style: italic; color: #0D2497; } .showen { visibility: visible; color: #009900; } .showit { visibility: visible; font-style: italic; color: #0D2497; } .hideen, .hideen p { color: #009900!important; } .hideit, .hideit p { font-style: italic; color: #0D2497; } .hidden { visibility: hidden; } .hiddenwrapper { min-width: 60px; visibility: visible; border-bottom: 1px solid #000; } .reveal { color: #009900; } .revealtable td { font-size: 1.0em; line-height: 1.5em; color: #000; vertical-align: middle; padding: 2px 10px 2px 0; } .revealinline div, .revealinline p, .revealinline input { display: inline; vertical-align: middle; } .revealtable td.smallaudio { width: 35px!important; padding: 0; } .revealtable td.revealimg { padding: 0; } .revealtable td.revealimg img { visibility: visible; border: 1px solid #e8e8e8!important; } div.memorisewords, div.memorisewords2 { width: 200px; visibility: hidden; position: fixed; top: 10px; left: 10px; background-color: #FFFFAA; font-size: 0.8em; padding: 5px; border: 1px solid #FF7F2A; } div.dialogue, div.dialogue2 { width: 200px; visibility: hidden; background-color: #FFFFAA; font-size: 0.8em; padding: 5px; border: 1px solid #FF7F2A; } div.memorisewordsEditor { width: 200px; visibility: visible; position: relative; background-color: #FFFFAA; padding: 5px; border: 1px solid #FF7F2A; } div.videos { } div.videos object { margin-bottom: 10px; margin-right: 10px; } /* Footer Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer ul { clear: both; text-align: center; padding: 10px 0 0; margin: 15px 0 0; } #footer ul li { display: inline; list-style-type: none; } #footer ul li a { text-decoration: none; } #footer ul li a:hover { text-decoration: underline; } /* Flashcol Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #flashcol { width: 267px; float: left; } #flashcol #bgwrapper { width: 267px; background-color: #33A02B; padding: 0; margin: 0; } #flashcol img { display: block; border: 1px solid #33A02B!important; padding: 0; margin: 0; } #flashcol h1 { width: 247px; font-size: 1.6em; color: #fff; padding: 5px 10px 8px; margin: 0; } #homenews { width: 265px; height: 80px; background: #fff url("templatefiles/news-bg.png") no-repeat 0 0; margin-top:15px; } #homenews p { font-size: 0.85em; margin: 5px 0 0 80px; } #homenews p.click { font-weight: bold; color: #fff; text-align: right; padding-top: 5px; margin-right: 10px; } #homenews p.click a { color: #fff; } .noflashcol #homecontent { margin-left: 20px; } #homecontent { margin-left: 300px; margin-right: 20px; } #homecontent ul { margin-top: 0; margin-bottom: 0; } #home h2 { font-size: 1.4em; }