/* ------------------------------------------------------------------------------------------------- It's *strongly* suggested that you don't modify this file. Instead, load a new stylesheet after this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs. This will allow you to update formtastic.css with new releases without clobbering your own changes. This stylesheet forms part of the Formtastic Rails Plugin (c) 2008 Justin French --------------------------------------------------------------------------------------------------*/ /* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic --------------------------------------------------------------------------------------------------*/ form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; } form.formtastic fieldset { border:0; } form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; } form.formtastic ol, form.formtastic ul { list-style:none; } form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; } form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; } form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; } form.formtastic legend { white-space:normal; color:#000; } /* SEMANTIC ERRORS --------------------------------------------------------------------------------------------------*/ form.formtastic ul.errors { color:#cc0000; margin:0.5em 0 1.5em 25%; list-style:square; } form.formtastic ul.errors li { padding:0; border:none; display:list-item; } /* FIELDSETS & LISTS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset { } form.formtastic fieldset.inputs { } form.formtastic fieldset.buttons { padding-left:25%; } form.formtastic fieldset ol { } form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; } /* clearfixing the fieldsets */ form.formtastic fieldset { display: inline-block; } form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } html[xmlns] form.formtastic fieldset { display: block; } * html form.formtastic fieldset { height: 1%; } /* INPUT LIs --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li { margin-bottom:1.5em; } /* clearfixing the li's */ form.formtastic fieldset > ol > li { display: inline-block; } form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } html[xmlns] form.formtastic fieldset > ol > li { display: block; } * html form.formtastic fieldset > ol > li { height: 1%; } form.formtastic fieldset > ol > li.required { } form.formtastic fieldset > ol > li.optional { } form.formtastic fieldset > ol > li.error { } /* LABELS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; } form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; } form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;} /* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets) --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li fieldset { position:relative; } form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:95%; padding-top:0.1em; left: 0px; } form.formtastic fieldset > ol > li fieldset legend span { position:absolute; } form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; } form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; } form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; } /* INLINE HINTS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; } /* INLINE ERRORS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; } form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; } form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; } /* STRING & NUMERIC OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.string input { max-width:74%; } form.formtastic fieldset > ol > li.password input { max-width: 13em; } form.formtastic fieldset > ol > li.numeric input { max-width:74%; } /* TEXTAREA OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.text textarea { width:74%; } /* HIDDEN OVERRIDES The dual declarations are required because of our clearfix display hack on the LIs, which is more specific than the more general rule below. TODO: Revist the clearing hack and this rule. --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset ol li.hidden, html[xmlns] form.formtastic fieldset ol li.hidden { display:none; } /* BOOLEAN OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; } form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; } /* RADIO OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.radio { } form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.6em; } form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; } form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; } form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; } /* CHECK BOXES (COLLECTION) OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.check_boxes { } form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.6em; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; } /* DATE & TIME OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.date fieldset ol li, form.formtastic fieldset > ol > li.time fieldset ol li, form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; } form.formtastic fieldset > ol > li.date fieldset ol li label, form.formtastic fieldset > ol > li.time fieldset ol li label, form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; } form.formtastic fieldset > ol > li.date fieldset ol li label input, form.formtastic fieldset > ol > li.time fieldset ol li label input, form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; } /* Welcome to Susy. Use this file to define screen styles. Import this file using the following HTML or equivalent: */ .clear { clear: both; } /* Reset --------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: "" ""; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } a img { border: none; } /* HTML5 Reset --------------------------------------------------------------*/ article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /* Body -------------------------------------------------------------- */ body { font-family: "Droid Sans", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", " Lucida Sans", Arial, sans-serif; color: #4c4c4c; } /* Links -------------------------------------------------------------- */ a:link, a:visited { color: #005498; } a:focus, a:hover, a:active { color: #00467f; text-decoration: none; } a img { border: none; } /* Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } h1 { font-size: 4em; line-height: 1.125em; margin-bottom: 0.375em; } h2 { font-size: 2.667em; line-height: 1.125em; margin-bottom: 0.563em; } h3 { font-size: 2em; line-height: 1.5em; margin-bottom: 0.75em; } h4 { font-size: 1.5em; line-height: 1em; margin-bottom: 1em; } h5, h6 { margin-bottom: 1.5em; font-weight: bold; } /* Text -------------------------------------------------------------- */ cite, em, dfn { font-style: italic; } strong, dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted; cursor: help; } address { margin-bottom: 1.5em; font-style: italic; } ins { text-decoration: underline; } del { text-decoration: line-through; } pre, code, tt { margin: 1.5em; margin-left: -1.5em; padding-left: 1.5em; border-left: 1px dotted; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif; } pre { white-space: pre; } code { display: block; } q { font-style: italic; } q em { font-style: normal; } p { margin-bottom: 1.5em; } blockquote, q { quotes: "" ""; } blockquote { margin: 1.5em; margin-left: -1.5em; padding-left: 1.5em; border-left: 1px solid; font-family: "Droid Sans", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", " Lucida Sans", Arial, sans-serif; font-style: italic; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } /* Replaced -------------------------------------------------------------- */ img { vertical-align: bottom; } /* Lists -------------------------------------------------------------- */ ol { margin: 0 1.5em 1.5em 0; list-style: decimal; list-style-position: inside; } ul { margin: 0 1.5em 1.5em 0; list-style: disc; list-style-position: inside; } li ul, li ol { list-style-type: circle; margin: 0 1.5em 0.75em; } dl { margin-bottom: 1.5em; border-top-style: solid; border-top-width: 0.083em; padding-top: 1.417em; } dl dt { font-size: 1.5em; line-height: 1em; margin-bottom: 0.5em; } dd { margin-bottom: 1.5em; border-bottom-style: solid; border-bottom-width: 0.083em; padding-bottom: 1.417em; } /* Tables -------------------------------------------------------------- */ /* tables still need 'cellspacing="0"' in the markup */ table { margin-bottom: 1.5em; width: 100%; border-collapse: separate; border-spacing: 0; } table, td, th { vertical-align: top; } th, thead th { font-weight: bold; } th, td, caption { padding: 0.75em; text-align: left; font-weight: normal; } th, td { border-bottom-style: solid; border-bottom-width: 0.083em; padding-bottom: 0.667em; } tfoot { font-size: 1.167em; line-height: 1.286em; } caption { font-size: 2em; line-height: 1.5em; margin-bottom: 0.75em; } /* Forms -------------------------------------------------------------- */ fieldset { margin-bottom: 1.5em; border-style: solid; border-width: 0.083em; padding: 1.417em; } legend { font-size: 1.5em; line-height: 1em; font-weight: bold; } label { font-weight: bold; } textarea, input:not([type="radio"]):not([type="image"]) { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; } /* Layout -------------------------------------------------------------- */ body { font-size: 75%; line-height: 1.5em; } html > body { font-size: 12px; } /* awesome buttons are based on a blog post by ZERB Read there blog post for more information: "Super awesome Buttons with CSS3 and RGBA":http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba this buttons are even more awesome, as the need only one color for all three states, and have an super awesome onclick state http://github.com/gr2m/awesome-buttons */ /* @end */ h1, h2, h3, h4, h5, h6 { font-family: "Molengo", "Trebuchet MS", Tahoma, Arial, sans-serif; } html { background: #698f3d; } body { background: #cae5f0 url("../images/main/blue_gradient.png") repeat-x top center; } #header, #content { *zoom: 1; margin-left: auto; margin-right: auto; width: 81em; max-width: 100%; padding: 0 0.5em 1em; color: #332016; } #header:after, #content:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } #header h1 { display: inline; float: left; width: 28.354%; margin-right: 1.266%; margin: 0; } #header nav { display: inline; float: left; width: 71.646%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; height: 75px; } #header nav .top_nav { display: inline; float: left; width: 100%; margin-right: 1.767%; display: inline; float: right; margin-right: 0; #margin-left: -1em; text-align: right; font-size: 1em; line-height: 1.5em; } #header nav .top_nav .top_links { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; background: white; color: #bbbbbb; display: inline-block; padding: 0 1em; *display: inline; } #header nav .top_nav .top_links a { line-height: 2em; font-weight: bold; color: #336699; text-decoration: none; } #header nav .top_nav .top_links a:hover { text-decoration: underline; } #header nav ul { clear: both; margin: 0; margin-left: 0.5em; padding-top: 1.5em; font-weight: bold; letter-spacing: 0.08em; text-transform: capitalize; font-size: 1.333em; line-height: 1.125em; } #header nav ul li { margin: 0; margin-left: 5px; list-style-type: none; display: inline; float: left; display: block; white-space: nowrap; } #header nav ul li:first-child { margin-left: 0; } #header nav ul li a, #header nav ul li a:visited, #header nav ul li a:link { color: white; } #header nav ul li a { background: #111111; background-repeat: repeat-x; color: white; text-decoration: none; position: relative; cursor: pointer; border: 0; font-style: normal; font-weight: bold; line-height: 1; padding: 5px 10px 6px; font-size: px2em(13)em; border-bottom: 1px solid transparent\9; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25), -2px 0 1px rgba(0, 0, 0, 0.25); -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* one image for all states see http://www.alistapart.com/articles/sprites */ background-image: url(../images/awesome_buttons/awesome-overlay-sprite.png); background-position: 0 0; _background-image: none; /* cross browser inline block hack see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ display: -moz-inline-stack; display: inline-block; vertical-align: middle; *display: inline !important; position: relative; zoom: 1; -moz-user-select: none; background: #987032 !important; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } #header nav ul li a a { _padding-right: 0px; } #header nav ul li a::selection { background: transparent; } #header nav ul li a:hover { background-position: 0 -50px; color: white; } #header nav ul li a:active { background-position: 0 100%; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); -webkit-box-shadow: none; border-bottom: 0 \9; border-top: 1px solid #666666 \9; } #header nav ul li a:active { padding: 6px 10px 5px; } #header nav ul li a:active { padding: 6px 10px 5px; } #header nav ul li.donate { float: right; } #header nav ul li.donate a { background: #ff5c00 !important; } #header nav ul li.home a { background: #84a437 !important; } #header nav ul li.community a { background: #d2232a !important; } #header nav ul li.projects a { background: #e9bc07 !important; } #header nav ul li.events a { background: #00b2c6 !important; } #header nav ul li.shop a { background: #da008b !important; } #header nav ul li.current a { font-size: 1.2em; } #sub_menu { clear: both; } #sub_menu ul { margin: 0; } #sub_menu ul li { margin: 0; margin-left: 5px; list-style-type: none; display: inline; float: left; display: block; } #flash { *zoom: 1; margin-left: auto; margin-right: auto; width: 81em; max-width: 100%; font-family: "Droid Sans", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", " Lucida Sans", Arial, sans-serif; background: rgba(255, 255, 255, 0.6); padding-left: 0.5em; padding-right: 0.5em; } #flash:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } #flash .flash_wrap { clear: both; } #footer { background: url("../images/main/footer_stripe.png") repeat-x top center; height: 480px; margin-top: -70px; } #footer .wrap { background: url("../images/main/footer.png") no-repeat top center; height: 480px; } #footer .wrap p { *zoom: 1; margin-left: auto; margin-right: auto; width: 81em; max-width: 100%; padding-top: 400px; text-align: center; color: white; font-weight: bold; } #footer .wrap p:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } #content.main_index { padding-top: 0.5em; } #content.main_index .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.main_index .left_content .content_block { -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid white; background: #f0f0f0; margin-bottom: 1em; padding: 1em; } #content.main_index .left_content .content_block h1 { font-size: 1.5em; line-height: 1em; font-weight: bold; color: #84a437; } #content.main_index .left_content .content_block h1 a { color: inherit; text-decoration: none; display: block; } #content.main_index .left_content .content_block p { font-size: 1.083em; line-height: 1.385em; color: #444444; } #content.main_index .left_content .content_block p img { float: right; margin-left: 0.5em; margin-bottom: 0.5em; } #content.main_index .left_content .content_block p:last-child { margin-bottom: 0; } #content.main_index .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.main_index .right_content .content_block { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.main_index .right_content .content_block h1 { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; height: 25px; border-bottom: 4px solid #55ae41; font-size: 1.333em; line-height: 1.125em; margin: 0; } #content.main_index .right_content .content_block h1 span { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -o-border-top-left-radius: 2px; -ms-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -o-border-top-right-radius: 2px; -ms-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; background: #55ae41; color: white; float: left; line-height: 21px; padding: 0 10px; padding-top: 4px; } #content.main_index .right_content .content_block h1 span.small { height: 17px; line-height: 17px; padding: 0 10px; margin-top: 8px; background: #28a1d9; font-size: 0.667em; line-height: 2.25em; } #content.main_index .right_content .content_block h1 span.small a { color: white; height: 17px; line-height: 17px; text-decoration: none; display: block; } #content.main_index .right_content .content_block section { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; background: #f0f0f0; margin-bottom: 1em; } #content.main_index .right_content .content_block section h2, #content.main_index .right_content .content_block section p { padding-left: 0.5em; padding-right: 0.5em; } #content.main_index .right_content .content_block section h2 { font-size: 1.333em; line-height: 1.125em; margin: 0; padding-top: 0.5em; } #content.main_index .right_content .content_block section p { font-size: 1.083em; line-height: 1.385em; padding-bottom: 0.5em; } #content.main_index .right_content .content_block section p:last-child { margin-bottom: 0; } #content.main_index .right_content .content_block section .featured_small_content { width: 315px; margin: 10px auto; font-weight: bold; height: 200px; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.main_index .right_content .content_block section .featured_small_content a { text-decoration: none; } #content.main_index .right_content .content_block section .featured_small_content a:hover { text-decoration: underline; } #content.main_index .right_content .content_block section .featured_small_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; padding: 0; font-size: 1.5em; line-height: 1em; } #content.main_index .right_content .content_block section .featured_small_content h2 a { padding: 0 5px 4px; display: block; color: inherit; } #content.main_index .right_content .content_block section .featured_small_content h2:hover { text-decoration: underline; } #content.main_index .right_content .content_block section .featured_small_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 1.083em; line-height: 1.385em; text-align: left; width: 94%; white-space: nowrap !important; } #content.main_index .right_content .content_block section .featured_small_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.main_index .right_content .content_block section .featured_small_content .description a:hover { text-decoration: underline; } #content.events_index h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.7); text-align: center; color: #00b2c6; font-size: 3.5em; line-height: 1.286em; } #content.events_index a { text-decoration: none; } #content.events_index a:hover { text-decoration: underline; } #content.events_index .featured_content { display: inline; float: left; width: 66.633%; margin-right: 1.266%; font-weight: bold; width: 643px; height: 410px; position: relative; overflow: hidden; margin-bottom: 10px; -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; } #content.events_index .featured_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; font-size: 3em; line-height: 1em; } #content.events_index .featured_content h2 a { color: inherit; padding: 5px; display: block; } #content.events_index .featured_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 2.167em; line-height: 1.385em; text-align: left; width: 97%; white-space: nowrap !important; } #content.events_index .featured_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.events_index .featured_content img { float: left; } #content.events_index .small_content { display: inline; float: left; width: 33.316%; margin-right: 1.266%; width: 315px; font-weight: bold; margin-bottom: 10px; height: 200px; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; } #content.events_index .small_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; font-size: 1.5em; line-height: 1em; } #content.events_index .small_content h2 a { padding: 0 5px; display: block; color: inherit; } #content.events_index .small_content h2:hover { text-decoration: underline; } #content.events_index .small_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 1.083em; line-height: 1.385em; text-align: left; width: 94%; white-space: nowrap !important; } #content.events_index .small_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.events_index .small_content .description a:hover { text-decoration: underline; } #content.events_index .small_content.right { display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.events_show h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #00b2c6; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.events_show .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.events_show .left_content .content { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); color: #444444; padding: 1em; } #content.events_show .left_content .content .poster { float: right; margin-left: 5px; margin-bottom: 5px; } #content.events_show .left_content .content img { padding: 5px; background: white; margin-top: 5px; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.events_show .left_content .content .video { display: block; display: inline-block; margin-right: 5px; margin-bottom: 5px; } #content.events_show .left_content .content .video .play_button { margin: 60px 0 0 90px; padding: 0; border: none; position: absolute; } #content.events_show .left_content .content .video h4 { margin: 0; padding: 0; border: none; position: absolute; } #content.events_show .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } .event_gaza-fullstop .left_content { background: white url(../images/main/events/gaza_fullstop.png) bottom right no-repeat; } .event_gaza-fullstop .left_content .content { background: white; } #content.campaigns_index h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.7); text-align: center; color: #00b2c6; font-size: 3.5em; line-height: 1.286em; } #content.campaigns_index a { text-decoration: none; } #content.campaigns_index a:hover { text-decoration: underline; } #content.campaigns_index .featured_content { display: inline; float: left; width: 66.633%; margin-right: 1.266%; font-weight: bold; width: 643px; height: 410px; position: relative; overflow: hidden; margin-bottom: 10px; -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; } #content.campaigns_index .featured_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; font-size: 3em; line-height: 1em; } #content.campaigns_index .featured_content h2 a { color: inherit; padding: 5px; display: block; } #content.campaigns_index .featured_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 2.167em; line-height: 1.385em; text-align: left; width: 97%; white-space: nowrap !important; } #content.campaigns_index .featured_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.campaigns_index .featured_content img { float: left; } #content.campaigns_index .small_content { display: inline; float: left; width: 33.316%; margin-right: 1.266%; width: 315px; font-weight: bold; margin-bottom: 10px; height: 200px; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; } #content.campaigns_index .small_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; font-size: 1.5em; line-height: 1em; } #content.campaigns_index .small_content h2 a { padding: 0 5px; display: block; color: inherit; } #content.campaigns_index .small_content h2:hover { text-decoration: underline; } #content.campaigns_index .small_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 1.083em; line-height: 1.385em; text-align: left; width: 94%; white-space: nowrap !important; } #content.campaigns_index .small_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.campaigns_index .small_content .description a:hover { text-decoration: underline; } #content.campaigns_index .small_content.right { display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.campaigns_show h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #00b2c6; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.campaigns_show .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.campaigns_show .left_content .content { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); color: #444444; padding: 1em; } #content.campaigns_show .left_content .content .poster { float: right; margin-left: 5px; margin-bottom: 5px; } #content.campaigns_show .left_content .content img { padding: 5px; background: white; margin-top: 5px; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.campaigns_show .left_content .content .video { display: block; display: inline-block; margin-right: 5px; margin-bottom: 5px; } #content.campaigns_show .left_content .content .video .play_button { margin: 60px 0 0 90px; padding: 0; border: none; position: absolute; } #content.campaigns_show .left_content .content .video h4 { margin: 0; padding: 0; border: none; position: absolute; } #content.campaigns_show .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.projects_index h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.7); text-align: center; color: #e9bc07; font-size: 3.5em; line-height: 1.286em; } #content.projects_index a { text-decoration: none; } #content.projects_index a:hover { text-decoration: none; } #content.projects_index .project_one, #content.projects_index .project_two { display: inline; float: left; width: 49.367%; margin-right: 1.266%; } #content.projects_index .project_one a, #content.projects_index .project_two a { -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; width: 480px; height: 314px; display: block; position: relative; } #content.projects_index .project_one a h1, #content.projects_index .project_two a h1 { background: #333333; color: #dedede; margin: 0; position: absolute; width: 480px; font-size: 2.333em; line-height: 1.286em; padding-bottom: 3px; } #content.projects_index .project_one a h2, #content.projects_index .project_two a h2 { font-weight: normal; color: white; margin: 10px; position: absolute; padding: 5px 5px 10px 10px; font-size: 1.5em; line-height: 1em; background: black; background: rgba(0, 0, 0, 0.7); } #content.projects_index .project_one a { background: url(../images/main/projects/project_one_landing_image.jpg); } #content.projects_index .project_one a h1 { top: 0; } #content.projects_index .project_one a h2 { bottom: 0; left: 0; width: 200px; } #content.projects_index .project_two { display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.projects_index .project_two a { background: url(../images/main/projects/project_two_landing_image.jpg); } #content.projects_index .project_two a h1 { bottom: 0; } #content.projects_index .project_two a h2 { right: 0; bottom: 40px; width: 130px; } #content.projects_show .left_content { display: inline; float: left; width: 49.367%; margin-right: 1.266%; } #content.projects_show .left_content header { margin: 0 1em; } #content.projects_show .left_content header h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: left; color: black; margin: 0; font-size: 1.5em; line-height: 1em; } #content.projects_show .left_content header h2 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #e9bc07; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.projects_show .left_content .content { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); color: #444444; padding: 1em; } #content.projects_show .left_content .content .poster { float: right; margin-left: 5px; margin-bottom: 5px; } #content.projects_show .left_content .content img { padding: 5px; background: white; margin-top: 5px; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.projects_show .left_content .content .video { display: block; display: inline-block; margin-right: 5px; margin-bottom: 5px; } #content.projects_show .left_content .content .video .play_button { margin: 60px 0 0 90px; padding: 0; border: none; position: absolute; } #content.projects_show .left_content .content .video h4 { margin: 0; padding: 0; border: none; position: absolute; } #content.projects_show .right_content { display: inline; float: left; width: 49.367%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.projects_show .right_content header { margin-top: 1.5em; } #content.projects_show .right_content header h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #e9bc07; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.projects_show .right_content .content_block { -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid white; background: #f0f0f0; margin-top: 1em; padding: 1em; } #content.projects_show .right_content .content_block h1 { font-size: 1.5em; line-height: 1em; font-weight: bold; color: #444444; } #content.projects_show .right_content .content_block h1 a { color: inherit; text-decoration: none; display: block; } #content.projects_show .right_content .content_block p { font-size: 1.083em; line-height: 1.385em; color: #444444; } #content.projects_show .right_content .content_block p img { float: right; margin-left: 0.5em; margin-bottom: 0.5em; } #content.projects_show .right_content .content_block p:last-child { margin-bottom: 0; } #content.community_posts_index { padding-top: 0.5em; } #content.community_posts_index .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.community_posts_index .left_content .content_block { -moz-box-shadow: 0 0 10px #addbed 0; -webkit-box-shadow: 0 0 10px #addbed 0; -o-box-shadow: 0 0 10px #addbed 0; box-shadow: 0 0 10px #addbed 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid white; background: #f0f0f0; margin-bottom: 1em; padding: 1em; } #content.community_posts_index .left_content .content_block h1 { font-size: 1.5em; line-height: 1em; font-weight: bold; color: #d2232a; } #content.community_posts_index .left_content .content_block h1 a { color: inherit; text-decoration: none; display: block; } #content.community_posts_index .left_content .content_block p { font-size: 1.083em; line-height: 1.385em; color: #444444; } #content.community_posts_index .left_content .content_block p img { float: right; margin-left: 0.5em; margin-bottom: 0.5em; } #content.community_posts_index .left_content .content_block p:last-child { margin-bottom: 0; } #content.community_posts_index .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.community_posts_index .right_content .tag_cloud a { display: inline-block; padding: 5px; margin-right: 3px; margin-bottom: 3px; } #content.community_posts_index .right_content .tag_cloud .css1 { font-size: 1em; } #content.community_posts_index .right_content .tag_cloud .css2 { font-size: 1.2em; } #content.community_posts_index .right_content .tag_cloud .css3 { font-size: 1.4em; } #content.community_posts_index .right_content .tag_cloud .css4 { font-size: 1.6em; } #content.community_posts_index .right_content .content_block { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.community_posts_index .right_content .content_block h1 { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; height: 25px; border-bottom: 4px solid #55ae41; font-size: 1.333em; line-height: 1.125em; margin: 0; } #content.community_posts_index .right_content .content_block h1 span { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -o-border-top-left-radius: 2px; -ms-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -o-border-top-right-radius: 2px; -ms-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; background: #55ae41; color: white; float: left; line-height: 21px; padding: 0 10px; padding-top: 4px; } #content.community_posts_index .right_content .content_block h1 span.small { height: 17px; line-height: 17px; padding: 0 10px; margin-top: 8px; background: #28a1d9; font-size: 0.667em; line-height: 2.25em; } #content.community_posts_index .right_content .content_block h1 span.small a { color: white; height: 17px; line-height: 17px; text-decoration: none; display: block; } #content.community_posts_index .right_content .content_block section { display: inline; float: left; width: 100%; margin-right: 3.448%; display: inline; float: right; margin-right: 0; #margin-left: -1em; background: #f0f0f0; margin-bottom: 1em; } #content.community_posts_index .right_content .content_block section h2, #content.community_posts_index .right_content .content_block section p { padding-left: 0.5em; padding-right: 0.5em; } #content.community_posts_index .right_content .content_block section h2 { font-size: 1.333em; line-height: 1.125em; margin: 0; padding-top: 0.5em; } #content.community_posts_index .right_content .content_block section p { font-size: 1.083em; line-height: 1.385em; padding-bottom: 0.5em; } #content.community_posts_index .right_content .content_block section p:last-child { margin-bottom: 0; } #content.community_posts_index .right_content .content_block section .featured_small_content { width: 315px; margin: 10px auto; font-weight: bold; height: 200px; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.community_posts_index .right_content .content_block section .featured_small_content a { text-decoration: none; } #content.community_posts_index .right_content .content_block section .featured_small_content a:hover { text-decoration: underline; } #content.community_posts_index .right_content .content_block section .featured_small_content h2 { background: #333333; color: #dedede; position: absolute; left: 0px; top: 0px; margin: 10px; padding: 0; font-size: 1.5em; line-height: 1em; } #content.community_posts_index .right_content .content_block section .featured_small_content h2 a { padding: 0 5px 4px; display: block; color: inherit; } #content.community_posts_index .right_content .content_block section .featured_small_content h2:hover { text-decoration: underline; } #content.community_posts_index .right_content .content_block section .featured_small_content .description { font-weight: normal; color: white; position: absolute; right: 0px; bottom: 0px; margin: 10px; font-size: 1.083em; line-height: 1.385em; text-align: left; width: 94%; white-space: nowrap !important; } #content.community_posts_index .right_content .content_block section .featured_small_content .description a { background: black; background: rgba(0, 0, 0, 0.7); color: inherit; padding: 0px 2px; white-space: nowrap !important; } #content.community_posts_index .right_content .content_block section .featured_small_content .description a:hover { text-decoration: underline; } #content.community_posts_show h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #d2232a; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.community_posts_show .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.community_posts_show .left_content .content { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); color: #444444; padding: 1em; } #content.community_posts_show .left_content .content .poster { float: right; margin-left: 5px; margin-bottom: 5px; } #content.community_posts_show .left_content .content img { padding: 5px; background: white; margin-top: 5px; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.community_posts_show .left_content .content .video { display: block; display: inline-block; margin-right: 5px; margin-bottom: 5px; } #content.community_posts_show .left_content .content .video .play_button { margin: 60px 0 0 90px; padding: 0; border: none; position: absolute; } #content.community_posts_show .left_content .content .video h4 { margin: 0; padding: 0; border: none; position: absolute; } #content.community_posts_show .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; } #content.project_articles_show h1 { clear: both; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); text-align: center; color: #e9bc07; margin: 0; font-size: 2.667em; line-height: 1.125em; } #content.project_articles_show .left_content { display: inline; float: left; width: 62.025%; margin-right: 1.266%; } #content.project_articles_show .left_content .content { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: #fcfdff; background: rgba(252, 253, 255, 0.5); color: #444444; padding: 1em; } #content.project_articles_show .left_content .content .poster { float: right; margin-left: 5px; margin-bottom: 5px; } #content.project_articles_show .left_content .content img { padding: 5px; background: white; margin-top: 5px; -moz-box-shadow: 0 0 10px #cccccc 0; -webkit-box-shadow: 0 0 10px #cccccc 0; -o-box-shadow: 0 0 10px #cccccc 0; box-shadow: 0 0 10px #cccccc 0; } #content.project_articles_show .left_content .content .video { display: block; display: inline-block; margin-right: 5px; margin-bottom: 5px; } #content.project_articles_show .left_content .content .video .play_button { margin: 60px 0 0 90px; padding: 0; border: none; position: absolute; } #content.project_articles_show .left_content .content .video h4 { margin: 0; padding: 0; border: none; position: absolute; } #content.project_articles_show .right_content { display: inline; float: left; width: 36.709%; margin-right: 1.266%; display: inline; float: right; margin-right: 0; #margin-left: -1em; }