/* ---------------------------------------------------------- Respect for Marriage CSS - Freedom to Marry Managed by: Blue State Digital TABLE OF CONTENT 01 - HTML5 Boilerplate 02 - COMMON STYLES 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - SIDEBAR 07 - FRAMEWORK 08 - UTILITY 09 - PRINT COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =HTML5 Boilerplate ------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select {vertical-align:middle;} /* end HTML5 Boilerplate reset */ /* HTML5 boilerplate base styles */ html { overflow-y: scroll; } body { font:13px/1.231 sans-serif; *font-size:small; } select, input, textarea, button { font:99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } ul, ol { list-style-type: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } i, em { font-style: italic; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } .ie7 img { -ms-interpolation-mode: bicubic; } label, input[type=button], input[type=submit], button { cursor: pointer; } button, input, select, textarea { margin: 0; } button { width: auto; overflow: visible; } /* end HTML5 boilerplate base styles */ /* 02 =UTILITY ------------------------- */ caption, th { text-align: left; } .cufon-loading * { visibility: hidden !important; } .floatl { float: left; margin: 0; padding: 0 1.5em 1.5em 0; } .floatr { float: right; margin: 0; padding: 0 0 1.5em 1.5em; } .required { color: red; } .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } input:valid, textarea:valid { } ::-moz-selection{ background: #1fb9e7; color:#fff; text-shadow: none; } ::selection { background:#1fb9e7; color:#fff; text-shadow: none; } .image { display: block; } .image img { display: block; } /* 03 =COMMON STYLES ------------------------- */ body { font: 0.8125em/1.25em Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; color: #555555; } select, input, textarea { color: #444; } h1, h2, h3, h4, h5, h6 { font: 1.2em "futura-pt", Futura, Century Gothic, AppleGothic, Helvetica, Arial, sans-serif; margin: 0.5em 0; } h1 { font-size: 2.25em; color: #999; text-transform: uppercase; font-weight: normal; padding: 0 0 0.25em; border-bottom: 1px solid #ebebeb; margin: 0 0 0.75em; } .base h2 { font-size: 1.8em; } .base h3 { font-size: 1.4em; } .base p { line-height: 1.8em; margin: 0.5em 0; } a:hover, a:active { outline: none; } a { color: #0e789d; text-decoration: none; } a:link { -webkit-tap-highlight-color: #9f1c20; } a:hover, a:active, a:focus { color: #9f1c20; } .base blockquote { margin: 1.5em 0; background: #eee; padding: 1.5em; } .base ul, .base ol { margin: 1.5em 3em; line-height: 1.8em; } .base ul li, .base ol li { padding: 0 0.5em; } .base ul li { list-style: outside circle; } .base ol li { list-style: outside decimal; } .base li ol { list-style: outside lower-alpha; } .base li ul { list-style: outside disc; } .arrow span { padding: 0 10px 0 0; background: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/arrow2.png) no-repeat right center; } .button, input.submit { background: #9f1c20; color: #fff; text-transform: uppercase; text-align: center; padding: 0.5em 1em; display: block; font: 1.35em/1.5em "futura-pt"; border: none; } .button:hover, input.submit:hover, .button:focus, input.submit:focus { background: #0e789d; color: #fff; } .button.arrow span { background-image: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/arrow-white2.png); } .button.arrow:hover span { background-image: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/arrow-white-blue.png); } .more { text-transform: uppercase; font-family: "futura-pt"; color: #9f1c20; } .more.inline { color: #555555; } .info, figcaption { color: #a5a4a4; font-family: "myriad-pro", Myriad Pro; font-weight: 300; } .info { text-transform: uppercase; } figcaption { margin: 0.5em 0 0; } figure, .image { display: block; overflow: hidden; } figure img, .image img { display: block; max-width: 100%; margin: 0 auto; } input.text, textarea { border: 1px solid #eee; padding: 0.75em 1em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-box-shadow: inset 1px 1px 3px 0px rgba(0,0,0,0.3); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: inset 1px 1px 3px 0px rgba(0,0,0,0.3); /* FF3.5 - 3.6 */ box-shadow: inset 1px 1px 3px 0px rgba(0,0,0,0.3); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */ -webkit-border-radius: .5em; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ -moz-border-radius: .5em; /* FF1-3.6 */ border-radius: .5em; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } /* 03 =LAYOUT ------------------------- */ html, body { background: #fff; } header a.logo { background: #fff url(http://www.respectformarriage.org/page/-/respect/wrapper/logo4.png) no-repeat center; height: 122px; } nav { font-family: "futura-pt"; text-align: center; } nav a { display: block; } /*** Superfish ***/ .sf-menu, .sf-menu * { list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { background: white; position: absolute; top: -999em; width: 9em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { background: white; border: 1px solid #c5dfe8; margin: -1px 0 0; text-align: left; 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 { background: white; border-top: 1px solid white; left: -1px; padding-top: .5em; top: 2em; /* match top ul list item height */ z-index: 999; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 9em; /* 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; } header nav { border-top: 1px solid #c5dfe8; border-bottom: 1px solid #c5dfe8; text-transform: uppercase; padding: 0 0.5em; font-size: 0.95em; } header nav li { border-left: 1px solid #c5dfe8; margin: 0.5em 0; float: left; } header nav a { padding: 0.5em 1em; } header nav li.about { border: none; } #main { padding: 1.5em; } footer { background: #b2b1b1; color: #fff; padding: 1.5em; font: 1.15em "futura-pt"; } footer a { color: #ffffff; } footer nav { font-weight: bold; margin: 0 0 1.5em; } footer nav a { padding: 1em; border-bottom: 2px solid #fff; } footer p.copyright { font-size: 0.85em; text-align: center; } footer a.logo { background: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/logo-gray.png) no-repeat center; height: 60px; margin: 0 0 1.5em; } .wrap { margin-bottom: 1.5em; } #content .block h2, #logos .block h3, #sidebar .block h3 { color: #0e789d; padding: 0 0 0.25em; border-bottom: 1px solid #c5dfe8; font-size: 1.4em; } #content h3, #sidebar .block h4 { font-family: inherit; font-size: inherit; line-height: 1.6em; margin: 0 0 1em; } #content h3 a, #sidebar .block h4 a { color: inherit; } .block .info { margin: 0; line-height: normal; } .block figcaption { color: inherit; font: inherit; } #sidebar .block { margin: 0 0 1.5em; } #sidebar-about .text, #sidebar-time4marriage .text { background-color: #0e789d; box-shadow: inset 0px 5px 15px 0px rgba(0,0,0,.15); padding: 1.5em; color: #fff; font: 1.35em/1.5em "futura-pt"; } #sidebar-time4marriage .text { background-image: url('http://respectformarriage.orghttp://www.respectformarriage.org/page/-/respect/images/tout_time4marriage.png'); background-repeat: no-repeat; background-position: right bottom; padding-bottom: 120px; } #sidebar-about p { background: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/rings2.png) no-repeat bottom; padding: 0 0 5em; } #sidebar-about a.button, #sidebar-time4marriage a.button { margin: 0.25em 0 0; } .jcarousel-clip { overflow: hidden; } .jcarousel-prev-disabled, .jcarousel-next-disabled { display: none; visibility: hidden; } .jcarousel-prev, .jcarousel-next { border-width: 10px; border-style: solid; position: absolute; top: 70px; } .jcarousel-prev { left: -10px; border-color: transparent #ccc transparent transparent; } .jcarousel-next { right: -10px; border-color: transparent transparent transparent #ccc; } #logos { padding: 1.5em; } #logos ul { margin: 0; line-height: normal; } #logos li { float: left; list-style: none; margin: 0; padding: 0; } #logos-members .links li { float: none; list-style: circle outside; margin: 10px 20px; } #home #logos-members .jcarousel-clip { margin: 0 20px; } #logos .image { line-height: 5em; margin: 0 1em; text-align: center; } #logos .image img { display: inline; vertical-align: middle; max-height: 50px; } #logos-chairs li { width: 50%; } #logos-chairs .text { display: none; visibility: hidden; } #content #logos { padding: 0; } #content #logos-members .image { margin: 0 1em 1em; } #content #logos-chairs li { float: none; width: auto; margin: 0 0 1.5em; } #content #logos-chairs .image { margin: 1em 0; width: 25%; float: left; line-height: normal; } #content #logos-chairs .text { display: block; visibility: visible; float: right; width: 75%; } #content #logos-chairs .text p { margin: 0 0 0 1em; } #feature { padding: 0 0 1.5em; } #feature figure { position: relative; } #feature figcaption { background: rgba(255,255,255,.8); } .oldie #feature figcaption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF); zoom: 1; } #feature figcaption p { margin: 1.5em 0; } #feature nav { margin: 0 0 1.5em; } #feature nav li { float: left; width: 20px; } #feature nav a { width: 20px; height: 15px; background: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/feature-pager2.png) no-repeat left center; } #feature nav a:hover, #feature nav a:focus, #feature nav li.active a { background-position: -20px center; } #home #main ul { margin: 0; line-height: normal; } #home #main li { list-style: none; margin: 0; padding: 0; } #home #main .entry { border: none; } #home #stories .entry { margin: 0 0 1em; } #home #stories figure { margin: 0 0 .5em; } #home #stories figure img { display: block; margin: 0; } .index #content .entry { margin: 0 0 1.5em; border-bottom: 1px dotted #eee; padding: 0 0 1.5em; } .index #content .has-thumbnail .image { width: 35%; } .index #content .entry p { margin: 0; } .article #content figure { margin: 0 0 1em; } .article #content figure img { margin: 0; } #content h2:first-child { margin: 0 0 0.5em; } #the-coalition #content a.button { margin: 1.5em 0; } #time-4-marriage #page-above { background: #e7f7fc ; padding: 10px; width:auto; margin: 0 0 15px; position: relative; } #time-4-marriage #page-above .addthis_toolbox { margin-bottom: 40px; } #time-4-marriage #page-above .atclear { clear: left; } #time-4-marriage #video-more-tab { background: #0e789d; position: absolute; left: 0; bottom: 0; border: 2px solid #ffffff; border-width: 2px 2px 0 0; padding: 10px 15px; } #time-4-marriage #video-more-tab a { color: #ffffff; } #time-4-marriage #page-above .video { margin: 0 0 15px; } #time-4-marriage .video .video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } #time-4-marriage .video .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #time-4-marriage #page-below {width:100%;} #time-4-marriage #video-more-content { display: none; background: #e7f7fc; margin: -13px 0 15px; padding: 10px; position: relative;} #time-4-marriage .thumbnail { display: block; position: relative; min-height: 90px; padding-left: 130px; margin-bottom: 10px;} #time-4-marriage .thumbnail img { position: absolute; top: 0; left: 0; } #time-4-marriage #video-more-content .close { font-weight: bold;position: absolute; right: 10px; top: 10px; } @media screen and (min-width: 768px) { .wrap { margin-right: 1.5em; } header nav { font-size: 1em; } footer nav li { float: left; } footer nav a { padding: 0 0 0.5em; margin: 0 1em; } #content { float: left; width: 60%; } #sidebar { float: right; width: 40%; } .full-width #content { float: none; width: auto; } #logos-chairs { float: left; width: 35%; } #logos-members { float: right; width: 65%; } #content #logos-chairs, #content #logos-members { float: none; width: auto; } #feature { padding: 0; } #feature figure { height: 27.75em; } #the-coalition #content a.button { width: 35%; } #time-4-marriage #page-above .video { float: right; margin: 15px; width: 500px; } #time-4-marriage #page-above .video-description { margin: 15px 15px 0; } #time-4-marriage .column { float: left; padding: 0 2.2%; width: 31%;} #time-4-marriage #left-col { border-right: 1px solid #cecece; padding-left: 0; } #time-4-marriage #right-col { float: right; padding: 0; } #time-4-marriage #video-more-content { padding: 25px; } #time-4-marriage .thumbnail { display: inline-block; margin: 0 4px; vertical-align: top; width: 120px; padding: 0; } #time-4-marriage .thumbnail img { position: static; } .ie7 #time-4-marriage .thumbnail { display: inline; zoom: 1; } } @media screen and (min-width: 600px) and (max-width: 960px) { header nav { font-size: 1.35em; padding: 0 1.5em; } header nav a { padding: 0.5em 1.5em; } footer nav { font-size: 1em; } } @media screen and (min-width: 960px) { html, body { background: #f7f7f7 url(http://www.respectformarriage.org/page/-/respect/wrapper/images/bkgd.png); } #container { max-width: 960px; background: #fff; margin: 0 auto; box-shadow: 0 0 10px 1px rgba(0,0,0,.2); padding: 1.5em 0 0; } header { position: relative; height: 120px; } header a.logo { width: 40%; left: 30%; z-index: 2; position: absolute; } header nav li.about a { padding-right: 2em; } header nav li.legislation a { padding-left: 2em; } header nav li.doma a { padding-left: 2em; } header nav li.doma li a { padding-left: 1em; } header nav { z-index: 1; position: relative; top: 40px; font-size: 1.15em; } header nav li.right { float: right; } header nav li.action { border: none; } footer nav { float: right; width: 82%; } footer nav li.about a { margin-left: 0; } footer nav li.press a { margin-right: 0; } footer p.copyright { float: right; width: 82%; text-align: left; } footer a.logo { float: left; width: 15%; background-position: left top; } #content { width: 70%; } #sidebar { width: 30%; } #feature figure img { width: 100%; max-width: none; } #feature figure { position: relative; } #feature figcaption { position: absolute; bottom: 0; left: 0; width: 100%; } #feature figcaption p { margin: 1.5em 6em 1.5em 1.5em; } #feature .more span { background-image: url(http://www.respectformarriage.org/page/-/respect/wrapper/images/arrow-gray2.png); padding: 0 10px; } #feature nav { position: absolute; right: 3em; bottom: 1.5em; margin: 0; } #home #stories, #home #news { float: left; width: 50%; } #time-4-marriage #video-more-content h2 { float: left; width: 10%; } } /* PRINT ------------------------- */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; } /* hide disqus since it is extraneous content that just increases page size */ #disqus_thread {display:none;} a.dsq-brlink {display:none;} /* float blog entry images to decrease page length */ #main {overflow:hidden;} #main img { float:left; clear:both; /*keeps images from piling up next to each other*/ margin:0 10px 10px 0; } }