/* Declaration blue: #354292 Organisations sky blue: #5390CF Actions red: #D31145 How-to's pink: #EA3984 Resources orange: #EB7A13 Charts green: #8FB51A */ /* Author - Angelo Petsas of M/A www.ma-work.co.uk */ /*------------------------------------------------- STANDARDS -------------------------------------------------*/ * { margin:0; padding:0; } html, body { background:#fff; font-family: Arial, Helvetica, sans-serif; color:#000; margin:0; padding:0; height:100%; } body { font-size:62.5%; } a { color:#666; text-decoration:underline; } a:hover { color:#999; text-decoration:none; } a:focus { outline:0 none; } a img { border: 0; outline: none; } ul, ol, li { list-style-position:inside; } em { font-style: italic; } strong { font-weight: bold; } h1 { color:#666; font-size:2.4em; margin:0 0 10px 0; line-height:1.0em; } h2 { color:#666; font-size:1.8em; margin:0 0 8px 0; } h3 { color:#666; font-size:1.5em; margin:0 0 4px 0; } h4 { color:#666; font-size:1.2em; margin:0 0 8px 0; } h5 { color:#999; font-size:1.3em; margin:0 0 8px 0; font-weight: normal; } h6 { color:#999; font-size:2.4em; margin:0 0 10px 0; } p { color:#666; font-size:1.2em; margin:0 0 10px 0; line-height:17px; } p a{ text-decoration:underline; color:#333; } p a:hover{ text-decoration:none; color:#666; } table { border-collapse:collapse; border-spacing:0; font-size:1em; } /*floats*/ hr { clear: both; height: 0; font-size: 1px; line-height: 0px; visibility: hidden; } /*form defaults*/ button span { display:none;} input, textarea, select { font: normal 12px/17px Arial, Helvetica, sans-serif; color: #3a3a35; } button { display: block; cursor: pointer; } button.link { border-width:0; } label { font-size:1.3em; color:#4D4C4C; } /* BETA BADGE */ #beta { width:816px; height:44px; padding-left:90px; padding-top:10px; background: url(../cssimages/backgrounds/beta.png ) no-repeat top left; margin:0 auto; } /*------------------------------------------------- BASE -------------------------------------------------*/ #container { min-height:100%; position:relative; } #strip { width:100%; height:138px; background: url(../cssimages/backgrounds/strip.png) repeat-x top left; margin-bottom:0px; } #globals { position:relative; width:906px; margin:0 auto 0 auto; height:102px; background: url(../cssimages/backgrounds/banner.png) repeat-x top left; } #branding { width:111px; height:102px; float:left; } #controls { float:right; width:170px; } /* #dashboardWizard { position:absolute; top:35px; left:566px; height:auto; width:340px; } */ #dashboardWizard { float:left; height:20px; width:795px; margin-top:13px; } #dashWizWrap { float:right; margin-right:3px; } #dashboardWizard p { font-size:12px; color:#fff; } #dashboardWizard a { color:#fff; text-decoration: none; } #dashboardWizard a:hover { text-decoration:underline; } #dashboardWizard span { font-weight:bold; color:#fff; } /*base search */ /*#search { width:300px; height:20px; margin:64px 0 0 0; float:right; }*/ #search { width:300px; height:20px; margin-top:9px; top:57px; left:606px; float:right; } #search div.textinput { background: url(../cssimages/backgrounds/forms/search_field_base.png) 0 0 no-repeat; height:17px; width:214px; margin:0 0 0 0; } #search input { background:none; width:211px; height:17px; padding:0 0 0 3px; border:none; color:#333; /*color:#807f7f;*/ font-size:12px; } #search button { background:url(../cssimages/buttons/search_sprite.png) 0 0 no-repeat; height:20px; width:74px; float:left; margin:0 0 0 12px; border:0; } #search button:hover { background-position: 0 -20px; } /* short*/ #wrapperLanding { position:relative; width:906px; background:url(../cssimages/backgrounds/outline_short.png) no-repeat top left #FFF; margin:0 auto 0 auto; padding:0 10px 175px 10px; margin-top: 20px; } /* medium */ #wrapperHome { position:relative; width:906px; background:url(../cssimages/backgrounds/outline_main.png) no-repeat top left #FFF; margin:0 auto 0 auto; padding:0 10px 175px 10px; margin-top: 20px; } /* extra long */ #wrapperListing { position:relative; width:906px; background:url(../cssimages/backgrounds/outline_extra_long.png) no-repeat top left #FFF; margin:0 auto 0 auto; padding:0 10px 175px 10px; margin-top: 20px; } #footer { position:absolute; bottom:0; width:100%; height:175px; background:url(../cssimages/backgrounds/footer.png) repeat-x top left; } /*Sign Up / Login attributes + BLOG Button */ #subLinks ul { list-style:none; width:120px; height:22px; padding:5px 0 0 0; margin:0; font-size:1.3em; float:left; } #subLinks ul li{ display:inline; margin:0 0 0 0; color:#FFF; float:left; } #subLinks ul li a { text-decoration:none; color:#fff;} #subLinks ul li a:hover { text-decoration:underline; } /* blog button*/ #blog { float:right; width:50px;} #blogButton { display:block; width:107px; height:26px; background: url(../cssimages/buttons/blog_sprite.png) no-repeat 0 0; } #blogButton:hover { background-position: 0 -26px; } #blogButton span { display: none; } /*outline shaded graphic divs*/ #outlineDivider { background:url(../cssimages/backgrounds/outline_bottom.png) no-repeat top left; width:906px; height:15px; margin-bottom:10px; } #outlineBottom { background:url(../cssimages/backgrounds/outline_bottom.png) no-repeat top left; width:906px; height:15px; margin-bottom:20px; } /*Menu attributes - width:151px ? */ #siteNav { width:906px; margin:0 auto 0 auto; position:relative; } #siteNav ul { list-style:none; } #siteNav li { float:left; } #siteNav span { display:none; } #siteNav a, #siteNav a .hover { height:36px; position:relative; display:block; background: url(../cssimages/buttons/menu_sprite.png) 0 0 no-repeat; } /* HOME */ #siteNav a#home { background-position: 0 0; width:54px; } #siteNav a#home:hover, #siteNav a#home .hover { background-position: 0 -36px; } /* DECLARATION */ #siteNav a#declaration { background-position:-54px 0; width:142px; } #siteNav a#declaration:hover, #siteNav a#declaration .hover { background-position: -54px -36px; } /* ORGANISATIONS */ #siteNav a#orgs { background-position:-196px 0; width:142px; } #siteNav a#orgs:hover, #siteNav a#orgs .hover { background-position: -196px -36px; } /* ACTIONS */ #siteNav a#actions { background-position:-338px 0; width:142px; } #siteNav a#actions:hover, #siteNav a#actions .hover { background-position: -338px -36px; } /* HOW TO */ #siteNav a#howto { background-position:-480px 0; width:142px; } #siteNav a#howto:hover, #siteNav a#howto .hover { background-position: -480px -36px; } /* RESOURCES */ #siteNav a#resources { background-position:-622px 0; width:142px; } #siteNav a#resources:hover, #siteNav a#resources .hover { background-position: -622px -36px; } /* CHARTS */ #siteNav a#charts { background-position:-764px 0; width:142px; } #siteNav a#charts:hover, #siteNav a#charts .hover { background-position: -764px -36px; } /* Active States (Body tag matchup) (Sprite Level 2) ( y = -70px ) */ #home #siteNav #home { background-position: 0px -36px; } #declaration #siteNav #declaration { background-position: -55px -36px; } #orgs #siteNav #orgs { background-position: -196px -36px; } #actions #siteNav #actions { background-position: -338px -36px; } #howto #siteNav #howto { background-position: -480px -36px; } #resources #siteNav #resources { background-position: -622px -36px; } #charts #siteNav #charts { background-position: -764px -36px; } /*FOOTER styles*/ #footwrapper { position:relative; width:886px; margin:0 auto 0 auto; padding:20px 0 0 20px; } /*general footer lists*/ #footer ul.standard { list-style:none; font-size:1.2em; } #footer ul.standard li { margin:0 0 5px 0; } #footer ul.standard li a{ color:#4D4C4C; text-decoration:none; } #footer ul.standard li a:hover{ color:#4D4C4C; text-decoration:underline; } /*with social icons*/ #footer ul.withIcons { list-style:none; font-size:1.2em; } #footer ul.withIcons li { margin:0; } #footer ul.withIcons li img{ margin:0 5px 0 0; } #footer ul.withIcons li a{ color:#4D4C4C; text-decoration:none; } #footer ul.withIcons li a:hover{ color:#4D4C4C; text-decoration:underline; } /*copyright notice*/ #copyRight {font-family: Georgia, Times, serif; font-style:italic; } #copyRight ul.inlineList { list-style:none; margin:0; font-size:1.1em; } #copyRight ul.inlineList li{ display:inline; padding:0 0 0 0; color:#FFF; float:left; } #copyRight ul.inlineList li a { text-decoration:none; color:#fff;} #copyRight ul.inlineList li a:hover { text-decoration:none; color:#FFE685;} /*layout*/ .fOne, .fTwo, .fThree, .fFour { float:left; width:186px; height:110px; border-left: 1px solid #B5B5B5; padding:0 0 0 15px; } .fOne, .fTwo, .fThree { margin:0 23px 20px 0; } .fFour { margin:0; } .fOne h2, .fTwo h2, .fThree h2, .fFour h2 { color:#2E2E2E; font-weight:bold; font-size:1.3em; font-style:normal; margin-bottom:10px; } /*------------------------------------------------- NOTIFICATIONS -------------------------------------------------*/ body.JS .messages { display:none; } .messages { width:886px; background:#D31145; margin:0 auto 0 auto; text-align:center; padding:10px; list-style-type:none; } .messages li { margin:10px 2.5%; color:#fff; font-family: Georgia, Times, serif; font-style: italic; font-size: 1.3em; } .messages li a { color:#fff; text-decoration:underline; } .messages li a.close { background: url(../cssimages/buttons/close_messages.png) no-repeat 0 0; width:29px; height:28px; margin:-7px 0 0 0; border:none; } .messages li a.close:hover { background-position: 0 -28px; } .messages li a span { display:none; } .messages em { font-weight: bold; font-style: italic; } .messages .close { float:right; margin-right:10px; color:#fff; text-decoration:none; border:2px #fff solid; padding-left:3px; padding-right:3px } .messages .close a { color: #fff; } /*------------------------------------------------- LAYOUTS -------------------------------------------------*/ /*two column equal*/ .leftCol { width:423px; height:auto; float:left; margin:0 20px 0 0; } .rightCol { width:423px; height:auto; float:left; margin:0; } /*two column equal within a content container*/ .leftColInside { width:398px; height:auto; float:left; margin:15px 20px 0 0; padding:10px; background:#fafafa; } .rightColInside { width:398px; height:auto; float:left; margin:15px 0 0 0; padding:10px; background:#fafafa; } .fullColInside { width:816px; height:auto; margin:15px 0 0 0; padding:10px; background:#fafafa; } /*Fullpages that have a right sidebar */ #mainLeft { float:left; width:580px; margin:0 20px 0 0; padding:20px 30px 20px 20px; } #sidebarRight { float:left; width:210px; } /*Fullpages where there is no video content */ #mainLeftMax { float:left; width:576px; margin:0 40px 0 0; } #sidebarRightMin { float:left; width:230px; margin-top:6px; } /*Three column layouts for section landing pages i.e /organisations/ */ .landingLeftLarge { width:656px; height:auto; float:left; margin:0 20px 0 0; } .landingLeft { width:318px; height:auto; float:left; margin:0 20px 0 0; } .landingMiddle { width:318px; height:auto; float:left; margin:0 20px 0 0; } .landingRight { width:190px; height:auto; float:left; margin:0; } /* Listing + Search page layouts*/ #listingWide { width:865px; height:auto; padding-top:30px; } #listingLeft { width:655px; height:auto; float:left; margin:0 20px 0 0; padding-top:30px; } #listingRight { width:190px; height:auto; float:left; margin:0; padding-top:30px; } /*Three column layouts for public/private Dashboards*/ #dashLeft { float:left; width:160px; margin-right:20px; } #dashCenter { float:left; width:430px; margin-right:20px; } #dashRight { float:left; width:236px; } /*Unique layout for the contact page*/ .contactLeft { width:280px; float:left; margin:0px 0 20px 0; } #contactRight { width:290px; float:left; margin:60px 0 20px 0; } /*------------------------------------------------- GLOBAL HEADINGS + GLOBAL LINKS -------------------------------------------------*/ /* these id are used to turn sidebar category links to the appropriate sectionn colour */ #blue a:hover{ color:#354292; } #skyBlue a:hover{ color:#5390CF; } #red a:hover{ color:#D31145; } #pink a:hover{ color:#EA3984; } #orange a:hover{ color:#EB7A13; } #green a:hover{ color:#8FB51A; } /* these classes are used to turn span tags or heading link hover on section specific pages */ .orgsLink a:hover{ color:#5390CF; } .orgsText { color:#5390CF; } .actionsLink a:hover{ color:#D31145; } .actionsText { color:#D31145; } .howtoLink a:hover{ color:#EA3984; } .howtoText { color:#EA3984; } .resourceLink a:hover{ color:#EB7A13; } .resourceText { color:#EB7A13; } .blockHeading { width:auto; height:44px; margin:0 0 0 0; } .blockHeading h2 { font-size:1.5em; margin:0 0 2px 0; color:#fff; line-height:1.3em; } .blockHeading h3 { font-size:1.5em; font-weight:normal; color:#ccc; } h2.liteHeading { width:auto; height:auto; padding-top:0; margin:0 0 10px 0; font-size:1.8em; color:#4d4c4c; } .solidHeading { width:auto; height:24px; padding:6px 0 0 8px; background:#666; margin:0; } .solidHeading h2 { font-size:1.8em; margin:0; color:#fff; } .detailHeading { background:#D21243; } .detailHeadingOrg { background:#5390CF; } .detailHeadingHow { background:#EA3984; } .detailHeadingRes { background:#EB7A13; } .detailHeading, .detailHeadingOrg, .detailHeadingHow, .detailHeadingRes { width:auto; height:auto; padding:10px 8px 8px 8px; margin:0; } .detailHeading a, .detailHeadingOrg a, .detailHeadingHow a, .detailHeadingRes a{ color:#fff; } .detailHeading h2, .detailHeadingOrg h2, .detailHeadingHow h2, .detailHeadingRes h2 { font-size:1.8em; margin:0 0 5px 0; color:#fff; } .detailHeading h3, .detailHeadingOrg h3, .detailHeadingHow h3, .detailHeadingRes h3 { font-size:1.3em; color:#fff; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:5 px; } .detailHeading h4, .detailHeadingOrg h4, .detailHeadingHow h4, .detailHeadingRes h4 { font-size:1.3em; color:#fff; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:0px; } .seeAllRight { border-top:5px solid #4D4C4C; border-bottom:1px solid #000; height:12px; padding:8px 2px 10px 0; margin-bottom:25px; } .seeAllRight h4 { float:right; font-family: Georgia, Times, serif; font-style: italic; font-weight:normal; font-size:1.4em; } .seeAllRight span { font-family:Arial, Helvetica, sans-serif; font-style:normal;} .seeAllRight h4 a { color:#4D4C4C; text-decoration:underline; } .seeAllRight h4 a:hover { color:#666; text-decoration:underline; } .seeAll { height:12px; padding:4px 2px 0 0; margin-bottom:20px; } .seeAll h4 { float:right; font-family: Georgia, Times, serif; font-style: italic; font-weight:normal; font-size:1.4em; } .seeAll span { font-family:Arial, Helvetica, sans-serif; font-style:normal;} .seeAll h4 a { color:#4D4C4C; text-decoration:underline; } .seeAll h4 a:hover { color:#666; text-decoration:underline; } /* these link are floated right on the declaration pages */ .declarationLinks { width:210px; padding-top:6px; border-top:1px solid #999; } .declarationLinks h3{ text-align:left; border-bottom:1px solid #999; padding:4px 0 8px 0; font-size:13px; font-style:italic; font-weight:normal; } .declarationLinks h3 a { color:#4D4C4C; text-decoration:none; } .declarationLinks h3 a:hover { color:#354292; text-decoration:none; } #active { font-weight:bold; color:#354292; } /* these link are floated right, used for category filtering on section landing pages */ .categoryLinks { width:190px; margin:15px 0 20px 0; border-top:1px solid #999; padding-top:3px; } .categoryLinks h3{ text-align:left; border-bottom:1px solid #999; padding:4px 0 6px 0; font-size:1.3em; font-style:italic; font-weight:normal; } .categoryLinks h3 a { color:#4D4C4C; text-decoration:none; } .categoryLinks h3 a:hover { text-decoration:none; } /* Used on the declaration and other general pages */ .pinkLink, .skyLink { font-family: Georgia, Times, serif; font-size:1.3em; font-style:italic; margin:0 0 5px 0; } .pinkLink a { color:#D31145; text-decoration:underline; } .pinkLink a:hover { color:#D31145; text-decoration:none; } .skyLink a { color:#5390CF; text-decoration:underline; } .skyLink a:hover { color:##5390CF; text-decoration:none; } /* Sign up. Act up. Speak up. */ .blueHeading { font-weight:bold; font-size:1.6em; color:#354292; margin:5px 0 20px 0;} .redHeading { font-weight:bold; font-size:1.6em; color:#D31145; margin:5px 0 20px 0;} /* Heading that appears in may localtions around the site */ .mainHeading { font-weight:bold; font-size:1.4em; color:#4D4C4C; line-height:18px; } .mainHeading span{ color:#d31145; } .mainHeading a { font-family: Georgia, Times, serif; font-size:13px; font-weight:normal; font-style:italic; color:#D31145; text-decoration:underline;} .mainHeading a:hover { color:#D31145; text-decoration:none; } /* PAGINATION */ #pagination { width:635px; margin:5px 0 30px 20px; border-top:5px solid #4D4C4C; border-bottom:1px solid #000; height:14px; padding:7px 0 13px 0; } ul#pagination-justAct { float:right; color:#fff; font-size:12px; } #pagination-justAct li { margin:0; padding:0; font-size:12px; list-style:none; /* savers */ float:left; } #pagination-justAct .next a { background:url(../cssimages/buttons/next.png) no-repeat 0 0; margin-right:0px; display:block; width:18px; height:18px; } #pagination-justAct .next a:hover { background-position:0 -18px; width:18px; height:18px; } #pagination-justAct .next-off { background:url(../cssimages/buttons/next.png) no-repeat 0 0; margin-right:0px; display:block; width:18px; height:18px; } #pagination-justAct .previous a { background:url(../cssimages/buttons/prev.png) no-repeat 0 0; margin-right:3px; display:block; width:18px; height:18px; } #pagination-justAct .previous a:hover { background-position:0 -18px; width:18px; height:18px; } #pagination-justAct .previous-off { background:url(../cssimages/buttons/prev.png) no-repeat 0 0; margin-right:3px; display:block; width:18px; height:18px; } #pagination-justAct .active { background:#D31145; color:#fff; display:block; float:left; padding:2px 6px; margin-right:3px; } #pagination-justAct .normal a { background:#c1c1c1; color:#fff; text-decoration:none; margin-right:3px; } #pagination-justAct .normal a:link { color:#fff; display:block; float:left; padding:2px 6px; text-decoration:none; } #pagination-justAct .normal a:visited { background:#c1c1c1; color:#fff; display:block; float:left; padding:2px 6px; text-decoration:none; } #pagination-justAct .normal a:hover { background:#D31145; color:#fff; text-decoration:none; } /* withoug graphics replace these #pagination { width:635px; margin:5px 0 30px 20px; border-top:5px solid #4D4C4C; border-bottom:1px solid #000; height:14px; padding:7px 0 13px 0; } ul#pagination-justAct { float:right; color:#fff; font-size:12px; } #pagination-justAct li { margin:0; padding:0; font-size:12px; list-style:none; float:left; } #pagination-justAct a { background:#c1c1c1; color:#fff; text-decoration:none; margin-right:3px; } #pagination-justAct .previous-off { background:#4d4b4b; color:#fff; display:block; float:left; padding:2px 6px; margin-right:3px; } #pagination-justAct .next-off { background:#4d4b4b; color:#fff; display:block; float:left; padding:2px 6px; margin-right:0px; } #pagination-justAct .next a { background:#4d4b4b; margin-right:0px; } #pagination-justAct .previous a { background:#4d4b4b; margin-right:3px; } #pagination-justAct .active { background:#D31145; color:#fff; display:block; float:left; padding:2px 6px; margin-right:3px; } #pagination-justAct a:link { color:#fff; display:block; float:left; padding:2px 6px; text-decoration:none; } #pagination-justAct a:visited { background:#c1c1c1; color:#fff; display:block; float:left; padding:2px 6px; text-decoration:none; } #pagination-justAct a:hover { background:#D31145; color:#fff; text-decoration:none; } */ /*------------------------------------------------- COMBINATION PAGES (Home, Dashboard etc) -------------------------------------------------*/ /* yellow with no set height */ #full { position:relative; width:866px; padding:0 20px 20px 20px; margin:0 0 5px 0; background:#FFF; min-height:570px; } /* yellow with fixed height */ #fullBanner { position:relative; width:826px; height:545px; padding:20px; margin:0 0 0 20px; background:url(../cssimages/backgrounds/home_banner.png) no-repeat top left #fff; } /* the content aspect of the combo pages*/ #fullContent { width:866px; padding:0 20px 0 20px; margin:0; min-height:570px; } /* the overlay with buttons on yellow pages */ /* the box and button used for generic sign up in right column layouts */ #signUpWidgetHome { width:530px; height:auto; background:#fff; padding-top:20px; } #signUpWidgetHome p{ text-align:center; margin:10px 0 0 0; } #signUpWidget { width:210px; height:172px; background:#fff; padding-top:70px; } #signUpWidget p{ text-align:center; margin:10px 0 0 0; } #signupButton { margin:0 auto 0 auto; display:block; width:176px; height:53px; background: url(../cssimages/buttons/signup_sprite.png) no-repeat 0 0; } #signupButton:hover { background-position: 0 -53px; } #signupButton span { display: none; } #inviteOthersHome { width:530px; height:auto; background:#fff; padding-top:20px; } #inviteOthersHome p{ text-align:center; margin:10px 0 0 0; } #inviteOthers { width:210px; height:172px; background:#fff; padding-top:70px; } #inviteOthersButton { margin:0 auto 0 auto; display:block; width:176px; height:53px; background: url(../cssimages/buttons/invite_others_sprite.png) no-repeat 0 0; } #inviteOthersButton:hover { background-position: 0 -53px; } #inviteOthersButton span { display: none; } /* the box and button used for adding Actions */ #actionWidget { width:590px; height:auto; padding-top:5px; } #actionButton { margin:0 auto 0 auto; display:block; width:277px; height:47px; background: url(../cssimages/buttons/create_actions_sprite.png) no-repeat 0 0; } #actionButton:hover { background-position: 0 -47px; } #actionButton span { display: none; } #resourceWidget { width:590px; height:auto; padding-top:5px; } #resourceButton { margin:0 auto 0 auto; display:block; width:277px; height:47px; background: url(../cssimages/buttons/create_resource_sprite.png) no-repeat 0 0; } #resourceButton:hover { background-position: 0 -47px; } #resourceButton span { display: none; } /* landing page with 2 colums banners and common text styles */ #landing { margin:0 0 5px 0; } #leftLanding { position:relative; float:left; width:626px; height:130px; padding:25px; background:#FFE685; } #leftLanding h1 { margin:5px 0 20px 0; color:#4D4D4D; letter-spacing:1px; } #leftLanding h2 { margin:15px 0 5px 0; color:#666; font-weight: normal; } #leftLanding h3 { margin:0; color:#666; font-size:1.2em; } #leftLanding p { font-style:italic; } /* the right side containing the buttons */ #rightLanding { position:relative; float:left; width:230px; height:180px; padding:0; background:#FFF7D8; } /* Pages that have the gradient top banner and content continues down seamlessly */ #bannerLeftHome { float:left; background:url(../cssimages/backgrounds/banner_gradient_home.png) no-repeat top left; width:580px; padding:0 30px 0 20px; margin:0 20px 0 20px; height:570px; } #bannerLeft { float:left; background:url(../cssimages/backgrounds/banner_gradient.png) no-repeat top left; width:580px; padding:0 30px 0 20px; margin:0 20px 0 20px; min-height:225px; } #bannerLeft img.pageTitle{ margin-bottom:15px; } #bannerRight { float:left; width:210px; } /* there are comment style speech bubbles that appear on the homepage */ .commentOne, .commentTwo, .commentThree { width:208px; background: url(../cssimages/backgrounds/home_bubbles.png) no-repeat; } .commentOne { background-position: 0 0; height:115px; margin-top:10px; } .commentTwo { background-position: 0 -115px; height:125px; } .commentThree { background-position: 0 -240px; height:125px; } .commentOne h2 { color:#fff; padding:5px 0 0 10px; font-size:1.8em; } .commentTwo h2, .commentThree h2 { color:#fff; padding:17px 0 0 10px; font-size:1.8em; } .commentOne p, .commentTwo p, .commentThree p { color:#fff; padding:0px 10px 0 10px; } .commentOne p a, .commentTwo p a, .commentThree p a { color: #fff; } /* remove these soon */ h1.home { margin:5px 0 20px 0; color:#4D4D4D; letter-spacing:1px; } h2.home { margin:0 0 15px 0; color:#4D4D4D; font-weight:normal; } h1.general { margin:5px 0 30px 0; color:#4D4D4D; letter-spacing:1px; } h1.declaration { margin:10px 0 10px 0; color:#4D4D4D; } h1.declarationSolo { margin:10px 0 76px 0; color:#4D4D4D; } h2.declaration { margin:0 0 45px 0; color:#4D4D4D; font-weight:normal; } h2.declarationSolo { margin:0 0 20px 0; color:#4D4D4D; font-weight:normal; } h3.declaration { margin:0; color:#4D4D4D; font-size:1.4em; width:576px; font-weight:normal; border-bottom: 1px dotted #666; padding-bottom:40px; } /* full yellow pages, used for deglaration and into pages */ .fullPageContent { width:580px; margin:20px 0 35px 0; } .fullPageContent p { color:#4D4D4D; text-align:justify; line-height:17px; margin-bottom:20px; } .fullPageContent h3 { font-size:14px; color:#354292; line-height:17px; margin-bottom:20px; } .fullPageContent h4 { font-size:13px; color:#666; line-height:17px; margin-bottom:15px; } .fullPageContent ul { margin:0 0 0 0; } .fullPageContent li { margin:0 0 20px 0; font-size:12px; color:#4d4c4c; list-style:square inside; } .fullPageContentHome { text-align:center; margin:5px 0 5px 0; } .fullPageContentLanding { text-align:center; margin:0 0 5px 0; } .fullPageContentAlt { width:580px; margin:20px 0 35px 0; } .fullPageContentAlt p { color:#4D4D4D; line-height:17px; margin-bottom:20px; } .fullPageContentAlt h4 { font-size:1.2em; color:#666; line-height:17px; margin-bottom:5px; } /*third sector trademark styles (italic) */ p.ts { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:4px; } p.ja { font-size:1.3em; color:#7c7877; font-style:italic; font-weight:bold; margin-bottom:6px; } p.countBig { font-size:1.8em; color:#7c7877; font-style:italic; font-weight:bold; margin:3px 0 3px 0; } p.countText { font-size:1.2em; color:#7c7877; font-style:italic; font-weight:bold; } p.countSmall { font-size:13px; color:#4d4c4c; font-style:italic; font-weight:bold; margin:-2px 0 -5px 0; } p.countTextSmall { font-size:11px; color:#4d4c4c; font-style:italic; font-weight:normal; margin:0; } p.required { float:right; margin-top:5px; margin-right:3px; color:#d31145; font-style: italic; } p.back { float:right; margin-top:5px; margin-right:3px; color:#d31145; font-style: italic; } p.back a { color:#d31145; text-decoration: underline; } p.back a:hover { text-decoration:none; } p.formHelp { float:left; margin-top:0; margin-left:335px; color:#d31145; font-style: italic; } /*------------------------------------------------- LIST PAGES (Organisations, Actions, How To's etc) -------------------------------------------------*/ /*result or filter information */ #listFilter {margin:0 0 20px 0;} #listFilter h1 { font-size:16px; color:#4D4C4C; font-weight:normal; } #listFilter span { font-weight:bold; } .listingWithThumb {position:relative; padding:15px 0 10px 0; margin:0; border-top:1px solid #999; height:auto; } .listingWithThumb img.listingAvatar { float:left; width:75px; height:75px; margin:0 15px 0 0; } .listingThumbText { float:left; width:550px; margin:0; } .listingThumbSearchText { float:left; width:470px; margin:0; } .listingText { float:left; width:640px; margin:0; } .listingSearchText { float:left; width:560px; margin:0; } /* main heading */ .listingThumbText h3, .listingThumbSearchText h3, .listingText h3, .listingSearchText h3 { font-size:1.5em; margin-bottom:4px; color:#4d4c4c; } .listingThumbText h3 a, .listingThumbSearchText h3 a, .listingText h3 a, .listingSearchText h3 a { color:#4d4c4c; text-decoration:none; } .listingThumbText h3 a:hover, .listingThumbSearchText h3 a:hover, .listingText h3 a:hover, .listingSearchText h3 a:hover{ text-decoration:underline; } /* supplimetory used for URL on Orgs */ .listingThumbText h4, .listingThumbSearchText h4 { font-size:1.2em; margin-bottom:2px; color:#4d4c4c; } .listingThumbText h4 a, .listingThumbSearchText h4 a { color:#4d4c4c; text-decoration:none; } .listingThumbText h4 a:hover, .listingThumbSearchText h4 a:hover { text-decoration:underline; } .listingThumbText p, .listingThumbSearchText p, .listingText p, .listingSearchText p { font-size:1.3em; color:#4d4c4c; line-height:17px; margin-bottom:4px; font-family: Georgia, Times, serif; font-style: italic; } .listingThumbText span, .listingThumbSearchText span, .listingText span, .listingSearchText span { font-size:1.2em; font-style:italic; margin:1px 0 4px 0; display:block; } .listAdditionals { margin:7px 0 0 0; } .listAdditionals span { font-size:1.2em; font-style:italic; margin:1px 0 4px 6px; display:block; float:left; } .listRating { height:27px; width:80px; float:left; margin-right:5px; } /* Declaration blue: #354292 Organisations sky blue: #5390CF Actions red: #D31145 How-to's pink: #EA3984 Resources orange: #EB7A13 Charts green: #8FB51A */ /* search result blocks */ .organisationSearch, .actionSearch, .howtoSearch, .resourceSearch { position:absolute; width:90px; height:20px; top:0; left:565px; text-align:center; } .organisationSearch p, .actionSearch p, .howtoSearch p, .resourceSearch p { color:#fff; margin:2px 0 0 0; font-weight:bold; font-family:14px; } .organisationSearch { background:#5390CF; } .actionSearch { background:#D31145; } .howtoSearch { background:#EA3984; } .resourceSearch { background:#EB7A13; } /*------------------------------------------------- WIDGETS - referring to layout units -------------------------------------------------*/ /*layouts that have a thumb floated to the left and text on the right*/ .withThumb, .withThumbHowTo { padding:15px 0 12px 0; margin:0; border-bottom:1px solid #999; height:96px; } /* howto alternatives to accomodate for the how-to or how-not-to icons */ .withThumbHowTo img.small { float:left; width:88px; height:88px; border:1px solid #fafafa; margin:0 12px 0 0; } .withThumbIconHowTo { float:left; width:40px; margin-right:10px; } .withThumbTextHowTo { float:left; width:250px; margin:0; } .withThumbTextHowTo img{ float:left; margin:0 10px 0 0; } .withThumbRatingHowTo { height:27px; width:80px; float:left; margin:10px 0 0 50px; } .withThumb img.small { float:left; width:90px; height:90px; margin:0 30px 0 0; } .withThumb img.logo { float:left; width:88px; height:88px; border:1px solid #fafafa; margin:0 30px 0 0; } .withThumbText{ float:left; width:300px; margin:0; } .withThumbText h3, .withThumbTextHowTo h3 { font-size:1.5em; margin-bottom:4px; color:#4d4c4c; } .withThumbText h3 a, .withThumbTextHowTo h3 a { color:#4d4c4c; text-decoration:none; } .withThumbText h3 a:hover, .withThumbTextHowTo h3 a:hover { text-decoration:underline; } .withThumbText h4, .withThumbTextHowTo h4 { font-size:1.2em; margin-bottom:4px; color:#4d4c4c; } .withThumbText h4 a, .withThumbTextHowTo h4 a { color:#4d4c4c; text-decoration:none; } .withThumbText h4 a:hover, .withThumbTextHowTo h4 a:hover { color:#d31145; text-decoration:underline; } .withThumbText p, .withThumbTextHowTo p{ font-size:1.3em; color:#4d4c4c; line-height:17px; margin-bottom:4px; font-family: Georgia, Times, serif; font-style: italic; } .withThumbText p.pushDown { font-size:1.3em; color:#4d4c4c; line-height:17px; margin-bottom:13px; font-family: Georgia, Times, serif; font-style: italic; } .withThumbText span.home { font-size:1.2em; font-style:italic; color:#D31145; margin-top:7px; display:block; } .withThumbRating span.home{ font-size:1.2em; font-style:italic; color:#D31145; margin-left:2px; } .withThumbRating { height:27px; width:80px; float:left; } /* for tips and warning and steps in How To detail template */ .special { position:relative; padding:15px 0; margin:0; border-bottom:1px solid #999; height:auto; } .special img.steps { float:left; width:50px; height:50px; margin:10px 12px 0 0; } .special img.tipWarn { float:left; width:50px; height:50px; margin:5px 12px 0 0; } .specialText { float:left; width:360px; margin:20px 0 0 0; } .specialText h3 { font-size:1.5em; margin-bottom:4px; color:#4d4c4c; } .specialText p { font-size:1.3em; color:#4d4c4c; line-height:17px; margin-bottom:4px; } .stepCount { position:absolute; top:40px; left:0; width:50px; text-align:center; font-size:1.7em; color:#fff; font-weight:normal;} .tips { position:relative; padding:15px 0; margin:0; border-bottom:1px solid #999; height:auto; } .tips img.steps { float:left; width:50px; height:50px; margin:10px 12px 0 0; } .tips img.tipWarn { float:left; width:50px; height:50px; margin:5px 12px 0 0; } .tipsText { float:left; width:360px; margin:8px 0 0 0; } .tipsText h3 { font-size:1.5em; margin-bottom:4px; color:#4d4c4c; } .tipsText p { font-size:1.3em; color:#4d4c4c; line-height:17px; margin-bottom:4px; } /*layout with no thumbs just text*/ .noThumb { padding:15px 0 15px 0; margin:0; border-bottom:1px solid #999; height:120px; } .noThumb h3 { font-size:1.5em; margin-bottom:3px; color:#4D4C4C; } .noThumb h3 a { color:#4D4C4C; text-decoration:none; } .noThumb h4 { font-size:1.2em; color:#666; margin-bottom:0px; font-weight:normal; } .noThumb p.italics { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin:4px 0 8px 0; } .noThumb p.italics a{ color:#4d4c4c; text-decoration: underline; } .noThumb p.italics a:hover{ color:#4d4c4c; text-decoration:none; } .noThumbRating { height:27px; width:80px; float:left; margin-right:5px; } /* equivelent but for the homepage */ .noThumbHome { padding:15px 0 12px 0; margin:0; border-bottom:1px solid #999; height:96px; } .noThumbHome h3 { font-size:1.5em; margin-bottom:3px; color:#4D4C4C; } .noThumbHome h3 a { color:#4d4c4c; text-decoration:none; } .noThumbHome h3 a:hover { color:#d31145; text-decoration:underline; } .noThumbHome h4 { font-size:1.2em; color:#666; margin-bottom:0px; font-weight:normal; } .noThumbHome p.italics { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:4px;} .noThumbHome p.italics a{ color:#4d4c4c; text-decoration: underline; } .noThumbHome p.italics a:hover{ color:#4d4c4c; text-decoration:none; } .noThumbRatingHome { height:27px; width:80px; float:left; margin-right:5px; } .noThumbRatingHome span{ font-size:1.2em; font-style:italic; margin:1px 0 5px 0; display:block; } /*layout for testimonilas and their authors*/ .testimonial { border-bottom:1px dotted #666; padding:15px 0 13px 0; } .testimonial p { font-style:italic; margin-bottom:18px; } .testimonial h4 { font-style:normal; font-weight:normal; color:#666; } .testimonial h4 span { font-style:normal; font-weight:bold; color:#333; } /*layouts that have a thumb floated to the left and text on the right but is within a 3 column page grip (ie. landing pages)*/ .holyContainer { height:85px; } .withThumbSmall { height:80px; } .withThumbSmallModified { height:110px; } .withThumbSmall, .withThumbSmallModified { padding:15px 0 12px 0; color:#333; margin:0; border-bottom:1px solid #999; } .withThumbSmall img.smaller, .withThumbSmallModified img.smaller { float:left; width:75px; height:75px; margin:0 15px 0 0; } .withThumbTextSmall, .withThumbTextSmallModified { float:left; width:228px; margin:0; } .withThumbTextSmallModified h3 { font-size:1.5em; margin-bottom:0px; color:#4D4C4C; } .withThumbTextSmall h3 { font-size:1.5em; margin-bottom:5px; color:#4D4C4C; } .withThumbTextSmall h3 a, .withThumbTextSmallModified h3 a { color:#4D4C4C; text-decoration:none; } .withThumbTextSmall h3 a:hover, .withThumbTextSmallModified h3 a:hover { text-decoration:underline; } .withThumbTextSmall p, .withThumbTextSmallModified p { font-size:1.1em; color:#666; margin:0px; font-weight:bold; } .withThumbTextSmallModified p.italics { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; } .withThumbTextSmall p.italics { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:5px; } .withThumbTextSmall span, .withThumbTextSmallModified span{ font-size:1.2em; font-style:italic; margin:3px 0 4px 0; display:block; } .withThumbRatingSmallModified { height:27px; width:80px; float:left; margin-right:5px; } .withThumbRatingSmall { height:27px; width:80px; float:left; margin-right:5px;} /*layouts that have a thumb floated to the left and text on the right and are used in the third column of a dahsboards layout*/ .smallWidget { height:60px; } .activityWidget { height:73px; } .smallWidget, .activityWidget { padding:8px 0 0 0; color:#4d4c4c; margin:0; border-bottom:1px solid #999; } .smallWidget img.tiny, .activityWidget img.tiny { float:left; width:50px; height:50px; margin:0 10px 0 0; } .smallWidgetText { float:left; width:156px; margin:0; } /*resources*/ .smallWidgetText h2 { font-weight:normal; font-size:1.2em; margin-bottom:8px; color:#4d4c4c; font-style:normal; line-height:16px; } .smallWidgetText h2 a { color:#4d4c4c; text-decoration: underline; font-weight:bold;} .smallWidgetText h2 a:hover { color:#4d4c4c; text-decoration:none; } /* default*/ .smallWidgetText h3 { font-weight:normal; font-size:1.2em; margin-bottom:8px; color:#4d4c4c; font-style:normal; } .smallWidgetText h3 a { color:#4d4c4c; text-decoration: underline; font-weight:bold; } .smallWidgetText h3 a:hover { color:#4d4c4c; text-decoration:none; } /* members name*/ .smallWidgetText h4 { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:0px; } .smallWidgetText h5 { font-weight:normal; font-size:1.2em; margin-bottom:2px; color:#4d4c4c; font-style:normal; } .smallWidgetText h5 a { color:#4d4c4c; text-decoration: underline; font-weight:bold;} .smallWidgetText h5 a:hover { color:#4d4c4c; text-decoration:none; } .smallWidgetText p { font-size:1.2em; font-style:italic; margin:0 0 2px 0; } .smallWidgetText span{ font-size:1.1em; color:#4d4c4c; font-style: italic; } /*for how to 'things you'll need */ .specialWidget { padding:8px 0 0 0; color:#4d4c4c; margin:0; } .specialWidget ul { list-style:none; padding:0 0 15px 0; } .specialWidget li { margin:0 0 8px 0; } .specialWidget li h3 span { color:#EA3984; } .specialWidget li h3 { font-weight:bold; font-size:12px; } /*the block containing the detail infomration*/ .detailWidgetOrgs { margin:10px 0 20px; } .detailWidgetOrgs h2{ font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:5px; } .detailWidgetOrgs h2 a { color:#333; text-decoration: underline; } .detailWidgetOrgs h2 a:hover { color:#999; text-decoration:none; } .detailWidgetOrgs h3{ font-weight:bold; font-size:1.3em; margin:10px 0 1px 0; font-style:italic; } .detailWidgetOrgs p { font-size:1.3em; color:#666; margin-bottom:7px; } .detailWidgetOrgs span { font-size:1.3em; color:#4a4a4a; margin-bottom:2px; font-style:italic; } .detailWidgetOrgs h4 { font-size:1.3em; color:#EB7A13; margin:10px 0 20px 0; font-style:italic; font-weight: normal; } /* the container that holds the flag and share icons */ .globalTools { margin:8px 0; } .gtLeft { float:left; width:23px; height:23px; margin:0 8px 0 0; } .gtRight { float:left; width:129px; height:23px; display: block; padding-top:6px; font-size:1.1em; } .gtRight a { color:#d31145; text-decoration:underline; } .gtRight a:hover { text-decoration:none; } #rating { margin:30px 0 20px 0; } #rating a { color:#d31145; font-size:1.1em; text-decoration:underline;} #rating a.votePush { margin-left:0px; } #rating a:hover { text-decoration:none; } #raLeft { float:left; width:41px; margin:0 8px 0 0; } #raRight { float:left; width:111px; } .listRatingLeft { float:left; margin-right:4px; width:23px; height:23px; } .listRatingRight { float:left; width:52px; height:27px; } /* In Resources, the containers to download or link */ .downloadTools { margin:0 0 10px 0; border-bottom:1px solid #999; height:60px; padding:7px 0 5px 0; } .downloadTools a { float:left; margin-right:10px; } .downloadText { float:left; width:145px; } .downloadText p { font-family: Georgia, Times, serif; font-style:italic; margin:15px 0 0 0; font-size:1.3em; } .downloadText p a{ color:#EB7A13; text-decoration:underline; } .downloadText p a:hover{ color:#EB7A13; text-decoration:none; } /*a list with a border-bottom used for content snippets in various pages*/ ul.nicelist { list-style:none; padding:0; margin:0; font-size:1.2em; } ul.nicelist li{ padding:8px 10px 10px 0; color:#4d4c4c; border-bottom:1px solid #989898; } ul.nicelist li a { text-decoration:none; color:#EF5BA1;} ul.nicelist li a:hover { text-decoration:none; color:#CCC;} /* the block that contains the rating, add and done buttons under the standard list wideget with thumb*/ .additionals { margin:0; } .additionals span{ font-size:1.2em; font-style:italic; margin:6px 0 4px 6px; display:block; float:left; } .additionalsSmall { margin:8px 0 0 0; } .additionalsSmall span{ font-size:1.2em; font-style:italic; margin:1px 0 4px 6px; display:block; float:left; } .faqsContainer { padding:15px 10px; } .faqsContainer h3 { margin-bottom:15px; } .faqsContainer p { margin-right:15px; } .faqsContainer ul { margin:15px 0; } .faqsContainer li { margin:3px 0; font-size:12px; color:#4d4c4c; list-style:square inside; } /* ***BUTTONS**** */ /* sign in */ #signIn { display:block; height:28px; width:158px; background:url(../cssimages/buttons/signin_sprite.png) 0 0 no-repeat; margin:30px 0 50px 0; } #signIn:hover { background-position: 0 -28px; } #signIn span { display:none; } #cont { display:block; height:28px; width:158px; background:url(../cssimages/buttons/continue_sprite.png) 0 0 no-repeat; margin:30px 0 50px 0; } #cont:hover { background-position: 0 -28px; } #cont span { display:none; } /*help*/ #helpAct { display:block; height:28px; width:158px; background:url(../cssimages/buttons/help_sprite.png) 0 0 no-repeat; margin:30px 0 50px 0; } #helpAct:hover { background-position: 0 -28px; } #helpAct span { display:none; } /*buttons used across the site for 'add' and 'done this'*/ .readBlog { display:block; width:208px; height:47px; background: url(../cssimages/buttons/read_blog_sprite.png) no-repeat 0 0; float:left; margin:30px 0 10px 0; } .readBlog:hover { background-position: 0 -47px; } .readBlog span { display:none; } .addButtonSmall { display:block; width:61px; height:17px; background: url(../cssimages/buttons/add_small_sprite.png) no-repeat 0 0; float:left; margin:4px 0 0 4px; } .addButtonSmall:hover { background-position: 0 -17px; } .addButtonSmall span { display:none; } .doneButtonSmall { display:block; width:61px; height:17px; background: url(../cssimages/buttons/done_small_sprite.png) no-repeat 0 0; float:left; margin:4px 0 0 7px; } .doneButtonSmall:hover { background-position: 0 -17px; } .doneButtonSmall span { display:none; } .editButtonSmall { display:block; width:61px; height:17px; background: url(../cssimages/buttons/edit_small_sprite.png) no-repeat 0 0; float:left; margin:4px 7px 0 0; } .editButtonSmall:hover { background-position: 0 -17px; } .editButtonSmall span { display:none; } .deleteButton { display:block; width:61px; height:17px; background: url(../cssimages/buttons/delete_sprite.png) no-repeat 0 0; float:left; margin:4px 0 0 0; } .deleteButton:hover { background-position: 0 -17px; } .deleteButton span { display:none; } .removeButton { display:block; width:61px; height:17px; background: url(../cssimages/buttons/remove_sprite.png) no-repeat 0 0; float:left; margin:4px 0 0 7px; } .removeButton:hover { background-position: 0 -17px; } .removeButton span { display:none; } /* dashboard logged in buttons 'add, edit, manage, add new, add existing' */ .dashButtonContainer { width:auto; height:26; margin-bottom:20px; } .dashButtonContainer a{ margin:0 5px 0 0; float:left; } .buttonContainerSidebar { width:auto; height:26; margin:5px 0 5px 0; } .buttonContainerSidebar a{ margin:0 5px 0 0; float:left; } .dashButtonContainerPublic { width:auto; height:26; margin:0 0 20px 0; } .dashButtonContainerPublic a{ margin:0; float:right; } .dashButtonContainerPublic p{ float:left; width:350px; font-size:1.2em; line-height:14px; } .dashButtonContainerVert { width:auto; height:28; margin-top:0px; } .dashButtonContainerVert a, .dashButtonContainerVert button { margin:0 0 10px 0; } .seePublicProfile { background: url(../cssimages/buttons/profile_sprite.png) no-repeat 0 0; } #doThisAction { background: url(../cssimages/buttons/do_this_action_sprite.png) no-repeat 0 0; } #doneThis { background: url(../cssimages/buttons/ive_done_this_sprite.png) no-repeat 0 0; } #createAction { background: url(../cssimages/buttons/create_action_sprite.png) no-repeat 0 0; } .createResourceSmall { background: url(../cssimages/buttons/create_resource_small_sprite.png) no-repeat 0 0; } .seePublicProfile, #doThisAction, #doneThis, #createAction, .createResourceSmall { display:block; width:158px; height:28px; } .seePublicProfile:hover, #doThisAction:hover, #doneThis:hover, #createAction:hover, .createResourceSmall:hover { background-position: 0 -28px; } .seePublicProfile span, #doThisAction span, #doneThis span, #createAction span, .createResourceSmall span { display: none; } /* cancel button */ .cancel { background: url(../cssimages/buttons/cancel_sprite.png) no-repeat 0 0; display:block; width:158px; height:28px; float:left; margin:0 0 0 7px; } .cancel:hover { background-position: 0 -28px; } .cancel span { display:none; } /* larger size buttons */ .addExisting { display:block; width:102px; height:26px; background: url(../cssimages/buttons/dash_add_existing_sprite.png) no-repeat 0 0; } .addExisting:hover { background-position: 0 -26px; } .addExisting span { display: none; } .createNew { display:block; width:102px; height:26px; background: url(../cssimages/buttons/dash_create_new_sprite.png) no-repeat 0 0; } .createNew:hover { background-position: 0 -26px; } .createNew span { display: none; } /*smaller size buttons*/ .add { background: url(../cssimages/buttons/dash_add_sprite.png) no-repeat 0 0; } .edit { background: url(../cssimages/buttons/dash_edit_sprite.png) no-repeat 0 0; } .addNew { background: url(../cssimages/buttons/dash_add_new_sprite.png) no-repeat 0 0; } .manage { background: url(../cssimages/buttons/dash_manage_sprite.png) no-repeat 0 0; } .add, .edit, .addNew, .manage { display:block; width:64px; height:26px; } .add:hover, .edit:hover, .addNew:hover, .manage:hover { background-position: 0 -26px; } .add span, .edit span, .addNew span, .manage span { display: none; } /*icont style buttons, flag, share */ .flag { background: url(../cssimages/buttons/flag_sprite.png) no-repeat 0 0; } .share { background: url(../cssimages/buttons/share_sprite.png) no-repeat 0 0; } .downloadPDF { background: url(../cssimages/buttons/download_pdf_sprite.png) no-repeat 0 0; } .downloadLink { background: url(../cssimages/buttons/download_link_sprite.png) no-repeat 0 0; } .rate { background: url(../cssimages/buttons/rate_sprite.png) no-repeat 0 0; } .stbuttontext { font-size:1.2em;} .stico_default { background: transparent url(../cssimages/buttons/share_sprite.png) no-repeat scroll 0px 0px !important; } .downloadPDF, .downloadLink { display:block; width:50px; height:50px; } .downloadPDF:hover, .downloadLink:hover { background-position: 0 -50px; } .downloadPDF span, .downloadLink span { display: none; } .rate { display:block; border-width:0; width:41px; height:40px; } .rate:hover { background-position: 0 -40px; } .rate span { display: none; } .flag, .share { display:block; width:23px; height:23px; } .flag:hover, .share:hover { background-position: 0 -23px; } .flag span, .share span { display: none; } /*new action button on the list/search page*/ .newAction { background: url(../cssimages/buttons/new_action_sprite.png) no-repeat 0 0; } .createResource { background: url(../cssimages/buttons/create_resource_list_sprite.png) no-repeat 0 0; } .newAction, .createResource { display:block; width:190px; height:47px; } .newAction:hover, .createResource:hover { background-position: 0 -47px; } .newAction span, .createResource span { display: none; } /*dates when they appear along side ratings on How to's landing page */ .extraDate span { font-size:1.1em; font-style:italic; float:left; color:#999; display:block; margin:4px 0 0 6px; display:block; } /*dashboard avatar styles*/ .avatar { width:160px; height:160px; margin-bottom:20px; } .tiny { width:75px; height:75px; } /*a widget that has a background image*/ .skinned { width:auto; background: url(../cssimages/backgrounds/widget_gradient.png) top left repeat-x #FFF; padding:13px 10px 0px 10px; margin:0; } .skinnedSpecial { width:auto; background: url(../cssimages/backgrounds/widget_gradient.png) top left repeat-x #FFF; padding:13px 10px 0px 10px; margin:0 0 20px 0; } /* COMMENTS */ #comments { margin:15px 0 0 0;} .commentWrapper { width:421px; height:auto; margin:0 0 5px 4px; } .commentTop { width:421px; height:20px; background: url(../cssimages/backgrounds/comment_top.png) no-repeat top left;} .commentBottom { width:421px; height:80px; background: url(../cssimages/backgrounds/comment_bottom.png) no-repeat top left;} .comment { position:relative; width:391px; height:auto; background: url(../cssimages/backgrounds/comment.png) repeat-y top left; padding:0 15px 0 15px; } .comment img.commentAvatar { float:left; width:48px; height:48px; margin:0 15px 0 0; } .commentText { float:left; width:228px; margin:0; } .commentText h3 { font-size:1.5em; margin-bottom:5px; color:#4D4C4C; } .commentText a { color:#4D4C4C; text-decoration:none; } .commentText a:hover { text-decoration:underline; } .commentText p { font-size:1.1em; color:#666; margin-bottom:3px; font-weight:bold; } .commentText p.italics { font-size:1.3em; color:#4d4c4c; font-family: Georgia, Times, serif; font-style:italic; font-weight:normal; margin-bottom:0px; } .commentContent p { font-size:1.2em; color:#666; margin:10px 0 0 0; font-weight:normal; } p.flagComment { margin:-20px 0 20px 0; } /* ONE OFF WIDGETS */ /*used on the homepage for the step-by-step guide, Sing Up, Act Up and Speak Up */ #step-by-step { width:585px; height:90px; padding:10px 0px 10px 10px; margin:20px 0 20px -20px; background:url(../cssimages/backgrounds/step-by-step.png) no-repeat top left; /* opacity:0.6; filter: alpha(opacity=60); */ } .stepLeft { float:left; width:160px; padding: ; margin:35px 0 0 10px; } .stepMiddle { float:left; width:195px; padding: ; margin:35px 0 0 8px; } .stepRight { float:left; width:200px; padding: ; margin:35px 0 0 10px; } /*------------------------------------------------- MEDIA - Images, Video etc... -------------------------------------------------*/ .videoContentHome { width:316px; height:180px; background:#FAFAFA; margin:0 0 15px 0; } .videoContentDeclaration { width:316px; height:200px; background:#FAFAFA; margin:0 0 30px 0; } .embedVideo { margin:10px 0 0 0;} /*------------------------------------------------- FORMS, take on many variations, use unique for now -------------------------------------------------*/ /*form block styles*/ #testimonialForm { width:576px; } #testimonialForm h3 { margin:25px 0 25px 0; color:#666; } #forgotPasswdForm { margin:20px 0 0 0; } /* design separator */ .separator { width:auto; border-top: 1px solid #666; margin:20px 0; } .commentSeparator { width:430px; border-top: 1px solid #666; margin:20px 0; } /* Row + Label */ #testimonialForm .row, #signInForm .row, #forgotPasswdForm .row { margin-bottom:5px; } #testimonialForm .row label span, #signInForm .row label span, #forgotPasswdForm .row label span { font-style:normal; padding-left:3px; color:#FF0000;} #testimonialForm form label, #signInForm form label, #forgotPasswdForm form label { font-size:1.2em; color:#333; float:left; width:80px; margin-right:15px; } /* custom label widths */ #forgotPasswdForm form label { width:200px; } /*FORM ELEMENTS*/ /* Select field */ #testimonialForm form select { margin:1px 0 0px 0; font-size:1.1em; width:198px; height:25px; border:1px solid #ccc; background:#eeeeee; padding:2px 0 0 0; } /* Checkbox field */ .checkboxField { margin:-17px 0 0 195px; } .checkboxFieldLogin { margin:-19px 0 0 215px; } /* Text field */ #testimonialForm div.textinput, #signInForm div.textinput, #forgotPasswdForm div.textinput { background: url(../cssimages/backgrounds/forms/textbox_200.png) 0 0 no-repeat; height:26px; margin:0px 0 5px 0; float:left; } #testimonialForm input, #signInForm input, #forgotPasswdForm input { background:none; width:188px; height:21px; padding:5px 6px 0 6px; border:none; } /* Text area */ #testimonialForm div.textarea { background: url(../cssimages/backgrounds/forms/textarea_430.png) 0 0 no-repeat; height:95px; margin:0px 0 5px 0; float:left; } #testimonialForm textarea { background:none; width:424px; height:91px; margin:2px 6px 5px 3px; border:none; } /* Radio */ #testimonialForm ul { list-style:none; margin:10px 0 0 0; } #testimonialForm .radiostyle { width:20px; height:21px; margin:0 10px 0 0; } /* Buttons Globals */ #testimonialForm button, #signInForm button, #forgotPasswdForm button { float:left; margin:10px 0 10px 0; border:0; } /* Individual Buttons */ #testimonialForm button { background:url(../cssimages/buttons/confirm_sprite.png) 0 0 no-repeat; height:45px; width:171px; } #testimonialForm button:hover { background-position: 0 -44px; } #signInForm button { background:url(../cssimages/buttons/signin_sprite.png) 0 0 no-repeat; height:30px; width:100px; margin-left:95px } #signInForm button:hover { background-position: 0 -30px; } #forgotPasswdForm button { background:url(../cssimages/buttons/send_sprite.png) 0 0 no-repeat; height:30px; width:100px; margin-left:215px } #forgotPasswdForm button:hover { background-position: 0 -30px; } /* Declaration blue: #354292 Organisations sky blue: #5390CF Actions red: #D31145 How-to's pink: #EA3984 Resources orange: #EB7A13 Charts green: #8FB51A */ /*------------------------------------------------- SIGN UP PROCESS FORMS -------------------------------------------------*/ #crumbs { margin:5px 0 15px 0; } #crumbs ul { list-style:none; padding:0; margin:0; font-size:1.1em; } #crumbs ul li{ display:inline; margin:0 5px 0 0; color:#666; } #crumbs ul li.firstCrumb{ color:#666; margin:0; } #crumbs ul li.activeCrumb{ color:#333; font-weight:bold; } #crumbs ul li a { text-decoration:none; border-bottom:dotted 1px #EB6D22; color:#666;} #crumbs ul li a:hover{ text-decoration:none; border-bottom:dotted 1px #EDDDE0; color:#333;} /*on the select pre-defined actions page the list items styles */ .actionBullet { margin:10px 0 10px 0; } .actionBullet ul { margin:0; } .actionBullet li { margin:0 0 4px 0; font-size:13px; color:#D31145; list-style:square inside; } #signUpWrapper, #addItemWrapper { width:790px; margin:0 auto 0 auto; padding:0 40px 20px 40px; background:url(../cssimages/backgrounds/form_base.png) top left no-repeat; min-height:570px; } #signUpWrapper blockquote { padding:10px; background:#e2ffe3; width:410px; } /*FLAG FORM OPTIONS */ .flagForm { width:460px; margin:0 0 15px 0; z-index:1000; } .flagForm form label { font-size:1.3em; color:#4D4C4C; } .flagForm .row label span { font-style:normal; padding-left:5px; color:#D31145;} .flagForm div.textarea { background: url(../cssimages/backgrounds/forms/textarea_160.png) 0 0 no-repeat; height:95px; float:left; margin:5px 0 10px 0; } .flagForm textarea { background:none; width:149px; height:90px; padding:5px 6px 0 6px; border:none; } .flagForm button.flagSend { background:url(../cssimages/buttons/flag_send_sprite.png) 0 0 no-repeat; height:17px; width:61px; margin-right:3px; border:0; float:left; } .flagForm button.flagSend:hover{ background-position: 0 -17px; } #signUp, #addItem { width:785px; margin-top:15px; } /* Row + Label */ #signUp .row, #addItem .row {margin:0 0 15px 0;} #signUp form label, #addItem form label { font-size:1.3em; color:#4D4C4C; float:left; width:314px; text-align:right; margin-right:20px; } #signUp .row label span, #addItem .row label span { font-style:normal; padding-left:5px; color:#D31145;} #signUp .row label span.fTip, #addItem .row label span.fTip { font-size: 0.9em; font-style: italic; color:#9D9D9D; } #addItem h4 { margin:10px 0 20px 335px; font-style: italic; font-family: Georgia, Times, serif; font-weight: normal; color:#4d4c4c; } #addItem h4 a { text-decoration:none; color:#4d4c4c; } #addItem h4 a:hover { text-decoration:underline; color:#4d4c4c; } /* Select field */ #signUp form select, #addItem select { margin:1px 0 0px 0; font-size:1.1em; width:450px; height:24px; border:1px solid #ccc; background:#eeeeee; padding:2px 0 0 0; } /* Checkbox field */ .checkboxField { margin:-17px 0 0 195px; } .checkboxFieldLogin { margin:-19px 0 0 215px; } /*checkbox in a table used on registration - reasons */ table#reasons { width:785px; } table#reasons .reasonsRow { background:#FFF; } table#reasons .reasonsRowAlt { background:#FAFAFA; } table#reasons .checkLeft { width:40px; height:50px; padding:0 0 0 284px; } table#reasons .checkRight { width:200px; height:50px; padding:0; } #signUp form label.reasons { font-size:1.3em; color:#4D4C4C; float:left; width:454px; margin:20px 0; text-align:left; } table#reminders { width:785px; } table#reminders .checkLeft { width:20px; height:50px; } table#reminders .checkRight { width:100px; height:50px; padding:0; } #signUp form label.reminders { font-size:1.3em; color:#4D4C4C; float:left; width:100px; text-align:left; } /* Text field */ #signUp div.textinput, #addItem div.textinput { background: url(../cssimages/backgrounds/forms/textfield450-26.png) 0 0 no-repeat; height:26px; float:left; } #signUp input.graphic, #addItem input.graphic { background:none; width:439px; height:21px; padding:5px 6px 0 6px; border:none; float: left; } /* Text area */ #signUp div.textarea, #addItem div.textarea { background: url(../cssimages/backgrounds/forms/textarea_450.png) 0 0 no-repeat; height:95px; float:left; } #signUp textarea, #addItem textarea { background:none; width:438px; height:90px; padding:5px 6px 0 6px; border:none; } #addItem div.textareaExtra { background: url(../cssimages/backgrounds/forms/textarea_450_200.png) 0 0 no-repeat; height:200px; float:left; } #addItem textarea.extra { background:none; width:438px; height:195px; padding:5px 6px 0 6px; border:none; } /* Radio */ #signUp ul, #addItem ul { list-style:none; margin:10px 0 0 0; } #signUp .radiostyle, #addItem .radiostyle { width:20px; height:21px; margin:0 10px 0 0; } /* Next Button */ #signUp button.continue, #addItem button.continue { background:url(../cssimages/buttons/continue_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #signUp button.continue:hover, #addItem button.continue:hover { background-position: 0 -28px; } /* Confirm Button */ #signUp button.confirm { background:url(../cssimages/buttons/cofirm_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:left; margin:0 0 30px 0; border:0; } #signUp button.confirm:hover { background-position: 0 -28px; } /* Finish Button */ #signUp button.finish, #addItem button.finish { background:url(../cssimages/buttons/finish_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #signUp button.finish:hover, #addItem button.finish:hover { background-position: 0 -28px; } /* Save Changes Button */ #signUp button.saveChange, #addItem button.saveChange { background:url(../cssimages/buttons/save_changes_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #signUp button.saveChange:hover, #addItem button.saveChange:hover { background-position: 0 -28px; } /* Go Back Button */ #signUp button.goBack { background:url(../cssimages/buttons/goback_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0 10px 0 0; border:0; } #signUp button.goBack:hover { background-position: 0 -28px; } /* Preview Button */ #signUp button.preview { background:url(../cssimages/buttons/preview_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0 10px 0 0; border:0; } #signUp button.preview:hover { background-position: 0 -28px; } /* Save and Continue */ #addItem button.save { background:url(../cssimages/buttons/save_sprite.png) 0 0 no-repeat; height:28px; width:190px; float:right; margin:0 10px 0 0; border:0; } #addItem button.save:hover { background-position: 0 -28px; } /*ACTION OPTIONS FORMS*/ .actionOptions { margin:15px 0 15px 0; background:#FAFAFA; padding:15px; } .actionOptions h2 { margin-bottom: 20px; } .actionOptions h3 { background: url(../cssimages/ui/indicator.png) top left no-repeat; padding:0 15px 15px 15px; } #actionsForm { position:relative; } #actionsForm label { font-size:1.3em; color:#333; } #actionsForm ul { width:760px; margin:0 0 25px 0; } #actionsForm li { margin:0 0 15px 15px; list-style: none; padding-left:0; } #actionsForm input { float:left; margin-top:4px; margin-right:10px; } /* Next Button */ #actionsForm button.continue { background:url(../cssimages/buttons/continue_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #actionsForm button:hover.continue { background-position: 0 -28px; } /* Go Back Button */ #actionsForm button.goBack { background:url(../cssimages/buttons/goback_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0 10px 0 0; border:0; } #actionsForm button.goBack:hover { background-position: 0 -28px; } /* COMMENTS FORM */ #commentForm { width:430px; } /* Row + Label */ #commentForm .row { margin:5px 0 5px 0;} #commentForm form label { font-size:1.3em; color:#4D4C4C; } #commentForm form label span { font-style:normal; padding-left:5px; color:#D31145;} /* Text area */ #commentForm div.textarea { background: url(../cssimages/backgrounds/forms/textarea_430.png) 0 0 no-repeat; height:95px; margin:5px 0 5px 0; } #commentForm textarea { background:none; width:424px; height:91px; margin:2px 6px 5px 3px; border:none; } /* Send */ #commentForm button.send { background:url(../cssimages/buttons/send_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #commentForm button.send:hover { background-position: 0 -28px; } /* Preview Button */ #commentForm button.preview { background:url(../cssimages/buttons/preview_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0 10px 0 0; border:0; } #commentForm button.preview:hover { background-position: 0 -28px; } /* LISTING SEARCH + FILTER FORM */ #listingSearch { width:190px; margin-bottom:10px; position: relative; } /* Row + Label */ #listingSearch .rows { margin:5px 0 10px 0;} #listingSearch form label { font-size:1.3em; color:#4D4C4C; padding-bottom:5px; } /* Text field */ #listingSearch div.searchinput { background: url(../cssimages/backgrounds/forms/search_box.png) 0 0 no-repeat; height:20px; margin:0px 0 5px 0; } #listingSearch input.graphic { background:none; width:164px; height:14px; padding:7px 6px 0 20px; border:none; color:#333; } /* Select field */ #listingSearch form select { margin:5px 0 0px 0; font-size:1.1em; width:188px; height:20px; border:1px solid #ccc; background:#eeeeee; padding:2px 0 0 0; } /* Send */ #listingSearch button.send { background:url(../cssimages/buttons/send_sprite.png) 0 0 no-repeat; height:28px; width:158px; float:right; margin:0; border:0; } #listingSearch button.send:hover { background-position: 0 -28px; } #listingSearch button.filter { background:url(../cssimages/buttons/search_filter_sprite.png) 0 0 no-repeat; height:28px; width:190px; float:right; margin:10px 0 10px 0; border:0; } #listingSearch button.filter:hover { background-position: 0 -28px; } #listingSearch button.searchOnly { background:url(../cssimages/buttons/search_page_sprite.png) 0 0 no-repeat; height:28px; width:190px; float:right; margin:10px 0 10px 0; border:0; } #listingSearch button.searchOnly:hover { background-position: 0 -28px; } .otherOption { margin:0 0 20px 0; border-top:1px solid #4D4C4C; padding-top:20px; } /* FORM VALIDATION */ ul.errorlist { float:right; width:450px; } ul.errorlist li { font-size: 12px; color:#31A737; font-style: italic; font-weight: bold; margin-top:-5px; } ul.nonfielderrors { width:765px; background-color:#e2ffe3; padding:10px; } ul.nonfielderrors li { font-size: 13px; color:#4D4C4C; font-style: italic; font-weight: bold; } /* File delete checkbox */ #addItem form .deleteFileWidget { margin:10px 0 5px 334px; text-align:left; } #addItem form .deleteFileWidget label { width:auto; margin:0; padding:0; } #addItem form .deleteFileWidget img { margin-top:5px; } /* Organisation settings page */ #addItem form #reasons td.checkLeft { width:314px; padding:0 20px 0 0; text-align:right; } #addItem form #reasons td.checkRight { width:auto; padding:5px 0 5px 0; } #addItem form #reminders td.checkLeft { padding:0 10px 0 30px; text-align:right; } #addItem form #reminders td.checkRight label { width:auto; text-align:left; }