/* ---------------------------------------------------------- Ogra-Fianna Fail CSS Managed by: Blue State Digital TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { background: #dbe5db url(/page/-/images/wrapper/ogra/images/gradient-bg.gif) repeat-x; color: #000; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { background: url(/page/-/images/wrapper/ogra/images/pattern-bg.jpg) center top no-repeat; color: #5a5a5a; font-family: Arial, Helvetica, sans-serif; } .base { font-size: 12px; line-height: 18px; } .base h1 { font-size: 24px; line-height: 30px; } .base h2 { font-weight: bold; font-size: 18px; line-height: 24px; } .base h3 { font-weight: bold; font-size: 14px; line-height: 20px;} .base h4 { font-weight: bold; line-height: 18px; } .base p { margin-bottom: 18px; } a { color: #2b7526; text-decoration: none; } a:hover { color: #f7941e; } blockquote { margin-bottom: 18px; } .base ul, .base ol { margin: 0 0 18px 18px; } .base ul li { list-style: disc; } .base ul li li { list-style: circle; } .base ol li { list-style: decimal; } .base ul li, .base ol li { } .base li ol, .base li ul { margin: 0 0 0 18px; } hr { background-color: #dbe5db; border: 0; color: #dbe5db; clear: both; height: 1px; margin: 0 0 18px 0; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { margin: 0 auto; width: 960px; } #header { } #masthead { float: left; font-size: 36px; margin: 10px 0 15px 10px; } #masthead a { background: url(/page/-/images/wrapper/ogra/images/ogra.gif) left top no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 183px; height: 91px; } #quick-signup { border: 1px solid #dedede; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: right; margin: 20px 10px 10px; padding: 10px; } #quick-signup legend { color: #5a5a5a; font-size: 12px; font-weight: bold; padding-bottom: 2px; text-transform: uppercase; } #quick-email, #quick-phone { border: 1px solid #dbd9d9; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #b9b9b9; font-size: 12px; padding: 5px; } #quick-submit { background: #62cb5a url(/page/-/images/wrapper/ogra/images/green-bt-bg.gif) 0px center repeat-x; border: 1px solid #5ec257; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); cursor: pointer; font-size: 12px; font-weight: bold; letter-spacing: 1px; padding: 5px 20px; text-transform: uppercase; } input:hover#quick-submit { color: #ffe716; } #navigation { background: #62cb5a url(/page/-/images/wrapper/ogra/images/green-bt-bg.gif) 0px center repeat-x; border-top: 1px solid #9dd999; border-bottom: 1px solid #5c9857; clear: both; font-size: 12px; font-weight: bold; margin: 0 0 10px 0; width: 960px; text-transform: uppercase; } #navigation li { border-left: 1px solid #5c9857; border-right: 1px solid #9dd999; float: left; } #navigation a { color: #fff; display: block; padding: 10px 28px; } #navigation a:hover { color: #ffe716; } #navigation #fianna-fail { border-right: none; } /*** SUPERFISH ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 12em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: -1px; top: 2.7em; /* match top ul list item height */ z-index: 1000; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { background: #000; top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; } .sf-menu a { padding: 1em 16px; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #fff; } .sf-menu li { background: url(images/divider.gif) left center no-repeat; } .sf-menu li li { background: #62cb5a; text-transform: none; } .sf-menu li li li { background: #62cb5a; text-transform: none; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #62cb5a; color: #ffe716; outline: 0; } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } #main { background: #fff url(/page/-/images/wrapper/ogra/images/main-divider.gif) 640px 0 repeat-y; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); clear: both; overflow: hidden; width: 960px; } .full-width #main { background-image: none; } #content { float: left; padding: 20px 0; width: 640px; } #home #content { padding-top: 0; } .full-width #content { float: none; width: 960px; } .rss-feed { float: right; margin: 0 20px; } .section-title { margin: 0 20px; } .date-byline { color: #aba889; } .button a { background: #62cb5a url(/page/-/images/wrapper/ogra/images/green-bt-bg.gif) 0px center repeat-x; border: 1px solid #5ec257; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); cursor: pointer; font-size: 12px; font-weight: bold; letter-spacing: 1px; padding: 5px 20px; text-transform: uppercase; } .button a:hover { color: #ffe716; } .entry { border-bottom: 1px dotted #dbe5db; margin: 0 20px; padding: 15px 0; } .entry h2 { margin-bottom: 3px; } .entry .thumb { border: 1px solid #c2cbc2; float: left; box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); margin: 0 10px 10px 0; padding: 3px; } .entry-body { float: right; width: 460px; } .base .summary, .base .date-byline { margin-bottom: 0; } .base .entry-footer { color: #dbe5db; margin-bottom: 3px; } .more { font-size: 14px; margin: 15px 20px; } #sidebar .more { margin: 10px 0; } #content .nav, .pagination { clear: both; padding: 10px 20px; } .prev-entry { float: left; width: 290px; } .next-entry { float: right; text-align: right; width: 290px; } #action-center { background: #b80d24; color: #fff; margin: 0 0 5px 0; padding: 20px; text-align: center; } .base #action-center ul { border-top: 1px solid #c84254; margin: 0; padding: 0; } .base #action-center li { border-bottom: 1px solid #c84254; font-size: 14px; list-style: none; margin: 0; text-transform: uppercase; } #action-center li a { background: #b80d24 url(/page/-/images/wrapper/ogra/images/red-bt-bg.gif) 0px center repeat-x; display: block; padding: 15px 0; } #connect { background: #3fab37 url(/page/-/images/wrapper/ogra/images/connect-bg.gif) repeat-x; border: 5px solid #5ec257; color: #fff; margin: 0; padding: 20px; text-align: center } #connect a { margin: 0 5px; } .base #connect p { margin: 0; } #action-center h2, #connect h2 { font-size: 18px; font-weight: bold; margin-bottom: 10px; text-transform: uppercase; } #action-center a, #connect a { color: #fff; } #action-center a:hover { color: #f7941e;; } #sidebar { float: left; padding: 0 0 20px 0; width: 320px; } #sidebar .module { border-bottom: 1px solid #dbe5db; padding: 20px; } #sidebar .module h2 { margin-bottom: 10px; } #sidebar .ogra-sb-btn { display: block; text-align: center; width: 100% } #latest-video object { margin-bottom: 9px; } #footer { background: url(/page/-/images/wrapper/ogra/images/fianna-fail.gif) 20px center no-repeat; border: 1px solid #cfd4c4; font-size: 12px; line-height: 16px; margin: 20px 0 40px 0; padding: 15px 20px; text-align: right; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #column-one { float: left; width: 640px; } #column-two { background: #fff; float: left; width: 320px; } #hero { background: #5a5a5a url(/page/-/images/wrapper/ogra/images/feature-bg.gif) 0 0 no-repeat; color: #fff; border: 5px solid #fff; margin: 0; } #hero .image { border: 1px solid #999; margin: 10px; overflow: hidden; height: 278px; } #hero .blurb { padding: 10px 15px 15px; } #hero h1 { font-size: 27px; font-weight: bold; line-height: 30px; } #hero .summary { float: left; margin-right: 10px; width: 412px; } .base #hero .button { float: left; margin-bottom: 0; } #hero .button a { background: #535353 url(/page/-/images/wrapper/ogra/images/grey-bt-bg.gif) 0px center repeat-x; border: 1px solid #444; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; display: block; font-size: 14px; font-weight: bold; letter-spacing: 1px; margin: 5px 0 0 0; padding: 6px 15px; text-transform: uppercase; } #hero .button a:hover { color: #f7941e; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .page-title { margin-bottom: 9px; } /*=VIDEO*/ #video object, #video-entry object { margin: 0 0 10px 0; } .video-display { float: left; width: 640px; } #gallery-display { padding: 10px 20px; } #gallery-display object { margin-bottom: 18px; } .video-list { float: right; width: 320px; } .video-gallery { padding: 10px 10px 10px 0; } .videoThumb { margin: 0 10px 0 0; } .video-list .pagination { padding: 10px 0; } #videos-entry .entry object { margin: 9px 0 18px 0; } /*=LOCAL ORGANIZATIONS*/ #local-orgs .column { float: left; margin: 10px 0 0 20px; width: 290px; !important } #local-orgs .column h2 { text-transform: capitalize; } #local-orgs .base .column p { border-top: 1px dotted #dbe5db; margin: 0; padding: 10px 0; } /*=EVENTS*/ .event td { margin: 0; padding: 15px 0; vertical-align: top; } .event .date { background: #dbefdb; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; /*color: #658eba;*/ margin: 0 10px 0 0; padding: 5px 0 7px; text-align: center; width: 4em; } .base .event p { margin: 0; } .event .month { font-weight: bold; text-transform: uppercase; } .base .event .day { font-size: 21px; margin: 1px 0 0 0; } #event-search { border-top: 1px solid #eff5f5; border-bottom: 1px solid #eff5f5; margin: 5px 20px; padding: 15px 0; } #event-search form { margin: 10px 0 0; } .event .desc { width: 540px; } /*=NATIONAL YOUTH COMMITTEE*/ .member { border-bottom: 1px dotted #dbe5db; margin: 0 20px; padding: 15px 0 5px; } #columns .member { float: left; margin: 0 0 0 20px; width: 300px; height: 75px;} .member .thumb { border: 1px solid #c2cbc2; float: left; box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); margin: 0 10px 10px 0; padding: 3px; } .member-details { float: right; width: 540px; } #columns .member-details { width: 240px; } /*=DISQUS COMMENTS*/ #disqus_thread { } .base #disqus_thread #dsq-content h3 { } /*=PHOTO-GALLERY*/ #thumbnails .thumb { border: 1px solid #c2cbc2; float: left; box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); margin: 0 10px 10px 0; padding: 3px; } #images { height: 360px; margin: 24px 0 0 0; overflow: hidden; } #images .slide { text-align: center; width: 640px; } #image-nav { border-top: 1px solid #dbe5db; margin: 0 20px; padding: 10px 0; position: relative; text-align: center; } #image-nav #next { background: url(/page/-/images/wrapper/ogra/images/next.gif) right center no-repeat; margin-left: 10px; padding: 2px 22px 2px 0; } #image-nav #prev{ background: url(/page/-/images/wrapper/ogra/images/previous.gif) left center no-repeat; margin-right: 10px; padding: 2px 0 2px 22px; } /* Add THIS styles */ .at300b, .at300m, .at300bs { cursor:pointer; display:inline; float:left; margin-right:3px; } .at15t_print { background-position:0 -96px; margin-right:10px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ .submit, #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter { background: #62cb5a url(/page/-/images/wrapper/ogra/images/green-bt-bg.gif) 0px center repeat-x; border: 1px solid #5ec257; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); color: #fff; font-size: 12px; cursor: pointer; font-weight: bold; letter-spacing: 1px; padding: 5px 20px; text-transform: uppercase; } /*Targets most of the submit buttons used in the framework, using this style definition you can alter the typography, color, and background properties of the button*/ input:hover.submit, input:hover#submit_button, input:hover#date-filter { color: #ffe716; } #framework input.text, #framework textarea { border: 1px solid #dbd9d9; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #b9b9b9; font-size: 12px; padding: 5px; } /*Use this definition to target most of the text input fields*/ /*=Events*/ /* 07 =UTILITY ---------------------------------------------------------- */ .cufon-loading { visibility: hidden !important; } /*Prevents flash of unstyled content*/ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}