/* @override http://fdd.site/assets/css/layout.css http://fdd.newcitystaging.com/assets/css/layout.css http://fdd/assets/css/layout.css */ /* ------------------------------------------------------------- HAMBO DEVELOPMENT - HTTP://HAMBODEVELOPMENT.COM YOU DESIGN _WE DEVELOP ------------------------------------------------------------- */ /* ---------------------------------------------------------- ============================================================= MASTHEAD ============================================================= --------------------------------------------------------- */ #print_logo { display: none; } #logo { display: block; height: 0; } #site_title { background: url(../images/layout/title.png) no-repeat 0 0; height: 24px; margin: 0 0 10px; text-indent: -9999px; width: 1000px; } #strapline { background: url(../images/layout/strapline.png) no-repeat 0 0; height: 12px; text-indent: -9999px; width: 1000px; } #site_title a, #strapline a { display: block; } /* ---------------------------------------------------------- ============================================================= MAIN NAVIGATION ============================================================= --------------------------------------------------------- */ #nav { background: url(../images/layout/header.png) no-repeat 0 0; height: 86px; left: 0; position: absolute; top: 0; width: 1000px; } #nav ul { list-style: none; margin-left: 36px; } #nav li { float: left; margin-right: 22px; } #nav a { background: url(../images/layout/nav_revised.png) no-repeat 0 0; display: block; float: left; height: 86px; } #nav span { display: block; height: 0; overflow: hidden; } #n_1 a { background-position: 0 0; width: 115px; } #n_1 a:hover, #n_1 a.on { background-position: 0 -86px; } #n_2 a { background-position: -115px 0; width: 108px; } #n_2 a:hover, #n_2 a.on { background-position: -115px -86px; } #n_3 a { background-position: -223px 0; width: 107px; } #n_3 a:hover, #n_3 a.on { background-position: -223px -86px; } #n_4 a { background: url(../images/layout/logo.png) no-repeat 0 0; width: 150px; } #n_5 a { background-position: -330px 0; width: 104px; } #n_5 a:hover, #n_5 a.on { background-position: -330px -86px; } #n_6 a { background-position: -434px 0; width: 94px; } #n_6 a:hover, #n_6 a.on { background-position: -434px -86px; } #n_7 a { background-position: -529px 0; width: 114px; } #n_7 a:hover, #n_7 a.on { background-position: -529px -86px; } /* ---------------------------------------------------------- ============================================================= SITE CONTAINERS ============================================================= --------------------------------------------------------- */ #container { margin: 0 auto; position: relative; width: 1000px; } #header { height: 55px; padding: 100px 0 0; position: relative; } #content { background: transparent url(../images/layout/content.jpg) no-repeat 0 0; /*overflow: hidden;*/ padding: 9px 0 0; } #aside { float: left; overflow: hidden; position: relative; width: 263px; } #main { background: #fff; float: left; padding: 0 25px 10px; position: relative; width: 687px; } #main { border-radius: 0 30px 0 0; -moz-border-radius: 0 30px 0 0; -o-border-radius: 0 30px 0 0; -webkit-border-radius: 0 30px 0 0; } #footer { background: url(../images/layout/footer-shadow.png) no-repeat 0 bottom; height: 47px; margin: 0 0 25px; padding: 0 0 12px; width: 1000px; } .search_results #main { float: left; width: 950px; } .search_results #main { border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0; -o-border-radius: 30px 30px 0 0; -webkit-border-radius: 30px 30px 0 0; } #sr_main { border-right: 1px solid #e1e0dd; float: left; overflow: hidden; padding: 0 25px 0 0; width: 673px; } #sr_side { float: left; padding: 0 0 0 15px; width: 230px; } /* ---------------------------------------------------------- ============================================================= MAIN CONTENT ============================================================= --------------------------------------------------------- */ #headlines { height: 42px; margin: 0 0 15px; padding-top: 391px; position: relative; width: 1000px; overflow: hidden; } #headlines #search_bar { margin: 0 0 0 263px; } #headlines ul { list-style: none; } #headlines img { float: left; height: 391px; position: relative; width: 1000px; } #h_images { height: 391px; left: 0; position: absolute; top: 0; /* width: 4000px; */ } #h_titles li { background: rgba(0, 0, 0, 0.55); color: #fff; display: none; height: 323px; left: 0; padding: 68px 10px 0 15px; position: absolute; top: 0; width: 238px; } .projects #h_titles li { height: 263px; left: 0; padding: 128px 0 0 25px; } #h_titles li.on { display: block; } #h_tabs { left: 22px; position: absolute; top: 372px; } #headlines.projects { height: 0; } #headlines.projects #h_tabs { top: 330px; } #headlines.projects #h_titles li { height: 221px; } #headlines.projects .headline_author a { color: white; } #h_tabs li { float: left; margin-right: 6px; } #h_tabs a { background: #000; color: #fff; display: block; font-family: "Helvetica Neue"; height: 19px; line-height: 18px; text-align: center; width: 35px; } #h_tabs .on a, #h_tabs a:hover { background: #3065a7; } p.headline_title { font-family: "Helvetica Neue"; font-size: 35px; line-height: 34px; margin: 0 0 12px; } p.headline_title a { color: white; outline: none; } p.headline_author { font-size: 11px; color: #fff; } p.headline_source { font-size: 11px; font-style: italic; } p.headline_link { background: url(../images/layout/headline-link.png) no-repeat 0 0; bottom: -42px; height: 42px; left: 0; position: absolute; width: 263px; } p.headline_link a { background: url(../images/layout/headline-link-arrow.png) no-repeat 152px 13px; color: #fff; display: block; font-family: "Helvetica Neue"; font-size: 16px; height: 42px; line-height: 38px; padding: 0 0 0 30px; width: 233px; } #page_title { overflow: hidden; width: 100%; } #page_title h2 { float: left; } #page_title h2.smaller { font-size: 28px; } .projects.center #h_titles li { padding: 47px 0 81px 25px; } /* #main ul { margin: 0 0 1em 2em; } #main ul li { line-height: 1.2; margin-bottom: 6px; font-size: 14px; } */ /* ---------------------------------------------------------- ============================================================= SIDEBAR ============================================================= --------------------------------------------------------- */ #sidebar { background: #dddccf; overflow: hidden; padding: 0 16px 0 22px; } #sidebar { border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -o-border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; } #sidebar .first_item { padding-top: 12px; } .highlight { background: #edede6 url(../images/layout/highlight.gif) no-repeat 0 0; margin: 0 0 10px -5px; padding: 12px 13px 12px 17px; } .highlight ul { list-style: none; } .cta { background: #ababa2; color: #fff; margin: 0 0 3px; } #sidebar .cta { margin-right: -16px; margin-left: -22px; } .cta_head { background: url(../images/layout/cta-head.gif) no-repeat 0 0; color: #fff; display: block; font-family: "Helvetica Neue"; font-size: 16px; height: 42px; line-height: 30px; padding: 0 10px; } .cta form { background: url(../images/layout/cta-form.png) no-repeat 0 bottom; padding: 0 10px 15px; } .cta .textfield { background: none; border: 1px solid #fff; border-style: none none solid; margin-right: 5px; width: 135px; } .cta_links { height: 17px; list-style: none; overflow: hidden; padding: 6px 0 7px; } .cta_links a:hover { text-decoration: underline; } .cta_links li { background: url(../images/layout/cta-link-separator.png) no-repeat right center; float: left; padding-right: 10px; } .cta_links li.last { background: none; } .cta .subscribe_link { color: #fff; display: block; font-size: 11px; height: 16px; } .cta a.rss { background: url(../images/icons/rss.png) no-repeat 0 0; margin: 0 0 0 10px; padding: 2px 0 0 20px; } .cta a.edit { background: url(../images/icons/edit.png) no-repeat 0 1px; margin: 0 0 0 7px; padding: 2px 0 0 30px; } .topics { margin: 0 0 15px; } .last_topics { margin: 0; } .topics li { font-weight: bold; color: #666; background: url(../images/layout/topic-bullet.gif) no-repeat 0 9px; padding: 0 0 0 18px; font-size: 17px; line-height: 1.2; margin-bottom: .5em; } .topics a { display: block; } .primary a { color: #003366; } .primary a:hover { color: #5da2e0; } .secondary { margin: 15px 0 0; } .secondary a { color: #636358; font-size: 15px; line-height: 24px; } .topics li .primary a { } blockquote { color: #646459; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-size: 14px; line-height: 17px; } blockquote.highlight { background-image: none; padding: 10px; } blockquote cite { display: block; font-size: 10px; text-align: right; } #menus { position: absolute; right: 25px; top: 20px; } #menus ul { list-style: none; } #menus li { float: left; margin-left: 6px; } .m_button { background: url(../images/layout/menu-button.png) repeat-x 0 0; border: 1px solid #deddd0; color: #999881; display: block; float: left; font-size: 12px; padding: 0 8px; position: relative; z-index: 20; border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -webkit-border-radius: 7px; text-shadow: 1px 1px 0 #fff; } .m_button span { display: block; padding: 2px 8px 1px } .menu .m_button span { background: url(../images/layout/dd-arrows.png) no-repeat 96% 8px; padding-right: 16px; } .dropdown { background: #e6edf3 url(../images/layout/dropdown.png) repeat-x 0 0; border: 1px solid #e9eef4; display: none; padding: 10px 12px 15px; position: absolute; right: 0; top: 26px; width: 522px; z-index: 100; } .dropdown li { float: left; } .dropdown strong { color: #6f6f6f; display: block; font-size: 13px; padding: 0 0 3px; } .dd_search { float: right; padding-left: 15px; width: 161px; } .dd_search form { margin: 3px 0 0; } .dd_search .textfield { width: 105px; } .dd_main { border-right: 1px dotted #0f3f6c; margin-right: 176px; overflow: hidden; width: 345px; } #menus .dd_main li { background: url(../images/layout/dd-bullet.gif) no-repeat 0 7px; margin: 0; padding: 0 0 2px 8px; width: 106px; } #menus .dd_main li.people_item { height: 80px; } .dd_main li.last { font-weight: bold; text-transform: uppercase; } .dd_main a { color: #003366; font-size: 10px; } .menu:hover .dropdown { display: block; } .menu:hover .m_button { background: #e6edf3 url(../images/layout/dropdown.png) repeat-x 0 0; border-color: #eaeff5; border-bottom: none; color: #003366; padding-bottom: 9px; } .menu:hover .m_button { border-radius: 7px 7px 0 0; -moz-border-radius: 7px 7px 0 0; -o-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; } .r_button { background: url(../images/layout/button_red.png) repeat-x 0 0; color: #fff; display: block; border-radius: 7px; padding: 0 8px; -moz-border-radius: 7px; -o-border-radius: 7px; -webkit-border-radius: 7px; text-shadow: 1px 1px 0 #333; } .r_button:hover { color: #999; } .r_button span { background: url(../images/layout/button_red_arrow.png) no-repeat 94% 7px; display: block; height: 18px; padding: 2px 15px 0 10px; } .article_foot a { padding: 2px 8px 1px; } a.icon { display: block; padding: 4px 0 2px 20px; } a.calendar { background: url(../images/icons/calendar.png) no-repeat 0 0; } a.email { background: url(../images/icons/email.png) no-repeat 0 0; } a.print { background: url(../images/icons/print.png) no-repeat 0 0; } a.twitter { background: url(../images/icons/t_twitter.png) no-repeat 0 0; } a.rss { background: url(../images/icons/t_rss.png) no-repeat 0 0; } a.delicious { background: url(../images/icons/delicious.png) no-repeat 0 0; } #tools { background: url(../images/layout/toolbox.png) no-repeat 0 0; height: 125px; margin: 20px 0 20px 68px; padding: 9px 0 0 10px; width: 186px; } #tools ul { border-bottom: 1px dotted #e1e0dd; list-style: none; overflow: hidden; padding: 0 0 10px; margin: 0; } #tools li { border-right: 1px dotted #e1e0dd; float: left; margin: 0 8px 0 0; padding: 2px 8px 2px 0; } #tools li.t_fontsize { border: none; } #tools div { float: left; padding-top: 12px; width: 88px; } #tools div.last { border-left: 1px dotted #e1e0dd; padding-left: 8px; } #tools a { color: #861e2a; font-size: 9px; font-weight: bold; line-height: 10px; text-transform: uppercase; } #tools div a { margin-bottom: 12px; } #tools .t_fontsize a:hover, #tools .t_fontsize a.on { color: #333; text-decoration: underline; } #tools .t_smaller { font-size: 10px; } #tools .t_normal { font-size: 13px; } #tools .t_larger { font-size: 16px; } .action { margin-top: 5px; } .action ul { list-style: none; } .action li { float: left; margin-right: 10px; } .action a { } .action .calendar { padding-top: 2px; } /* ---------------------------------------------------------- ============================================================= FOOTER ============================================================= --------------------------------------------------------- */ #footer { clear:both; } #footer .wrap { background: #3065a7 url(../images/layout/footer.png) no-repeat 0 0; height: 28px; padding: 10px 17px 9px; position:relative; } #footer p, #footer a { color: #cbcab9; } #footer p { float: left; font-size: 11px; line-height: 15px; width: 268px; } #footer p.last { border-left: 1px dotted #cbcab9; margin-left: 10px; padding-left: 17px; width: 400px; } #footer a { margin: 0 6px; } #footer a:hover { color: #fff; } #footer .social {position: absolute; right:11px; bottom:-4px;} #footer .social a {background: url(../images/icons/social.png) 0 0 no-repeat; display:block; width:36px; height:36px; text-indent: -9999px; margin-left:14px; padding-left: 0; float:left;} #footer .social a.tw {background-position: 0 0;} #footer .social a.fb {background-position: -50px 0;} #footer .social a.yt {background-position: -100px 0;} /* ---------------------------------------------------------- ============================================================= SEARCH BAR ============================================================= --------------------------------------------------------- */ #search_bar { background: #8e8e8b url(../images/layout/search-bar.jpg) no-repeat 0 0; height: 42px; margin: 0 0 15px; position: relative; } #search_bar form { left: 25px; position: absolute; top: 10px; } #search_bar .textfield { background: #e1e1df; border: 1px solid #fff; border-style: none none solid; color: #3c3c3c; padding: 3px 7px 2px; width: 189px; } #sb_links { background: #cdcdca url(../images/layout/sb-links.gif) no-repeat 0 0; float: right; height: 42px; width: 320px; } #sb_links strong { color: #fff; display: block; float: left; font-family: "Helvetica Neue"; font-size: 15px; line-height: 16px; padding: 3px 40px 0 0; text-align: right; width: 60px; } #sb_links ul { list-style: inside square; margin: 4px 0 0 100px; width: 220px; } #sb_links li { color: #6f6f6f; float: left; width: 98px; } #sb_links a { color: #6f6f6f; font-size: 13px; } #sb_links li:first-child a { color: #932330; } #sb_links a:hover { color: #fff; } /* ---------------------------------------------------------- ============================================================= SEARCH RESULTS ============================================================= --------------------------------------------------------- */ .result { color: #333; margin-top: 10px; } .result .meta { margin: 0 0 2px; } .result .thumb { height: 75px; width: 96px; } .pagination { font-size: 12px; line-height: 19px; list-style: none; margin: 0 0 20px; overflow: hidden; } .pagination li, .pagination a { float: left; } .pagination a { background: #e0e8f2; display: block; font-weight: bold; height: 17px; margin: 5px 7px 0 0; text-align: center; width: 17px; } .pagination .here a { background: url(../images/layout/pagination-current.gif) no-repeat 0 0; height: 23px; line-height: 30px; margin-right: 5px; margin-top: 0; width: 19px; } /* ---------------------------------------------------------- ============================================================= FORMS ============================================================= --------------------------------------------------------- */ label { font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-size: 14px; } #gmap_checkboxes { height: 40px; margin-bottom: 20px; padding-top: 20px; position: relative; } #gmap_checkboxes strong { display: block; float: left; padding: 17px 10px 0 0; } .map_type { float: left; height: 15px; margin-right: 15px; padding-top: 15px; position: relative; } .map_type input { float: left; margin-right: 26px; } .map_type label { float: right; font-size: 12px; padding-top: 3px; } .map_type img { bottom: 0; display: block; float: left; left: 20px; position: absolute; } .mt_long input { margin-right: 30px; } /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} blockquote { font-family: georgia; font-size: 17px; line-height: 22px; background: #f6f6f2; padding: 8px 13px; border-top: 1px solid #dddcd0; border-bottom: 1px solid #dddcd0; color: #333333; } table { margin: 13px 0; width: 100%; /* border-bottom: 1px solid #ababa2;*/ /* border-right: 1px solid #ababa2;*/ } table tr.alt td { background: #f2f2ed; } table th { padding: 5px 8px 6px 8px; text-align: left; color: white; background: #ababa2; border-bottom: 1px solid white; border-left: 1px solid #ababa2; } table tr.last-child th.first-child { border-bottom: 1px solid #ababa2; } table tr th.empty { background: none; border: none; } table td { padding: 6px 8px 6px 8px; font-size: 12px; /* border-left: 1px solid #ababa2;*/ } table.comparison { width: auto; border: none; } table.comparison caption { font-size: 15px; margin-bottom: 7px; color: #333; text-align: left; } table.comparison th { background: #ebebea; color: #333; padding: 7px 31px 7px 8px; border: none; } table.comparison th.first-child { background: #dededb; } table.comparison td { padding: 4px 31px 4px 8px; background: #f2f2f1; border: none; } table.comparison td.first-child { background: #eaeae8; } .image-wrap { width: 256px; } .image-wrap img { border: 1px solid #919191; padding: 1px; } .image-wrap .photo-source, .image-wrap .photo-description, .image-wrap .photo-title { font-style: italic; font-size: 11px; } .image-wrap .photo-source { text-align: right; margin: 3px 0; } .image-wrap .photo-title { font-weight: bold; } .callout-wrap { float: right; } .callout { width: 236px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 8px 10px; font-size: 11px; line-height: 16px; background: #f5f6f1; } .callout .r_button:link, .callout .r_button:visited { text-decoration: none; display: inline-block; } .callout ul, .callout p { margin-top: 8px; margin-bottom: 8px; } .callout h3 { color: #333; } .callout ul { margin-left: 25px; } .right { float: right; display: inline; margin: 0 0 15px 15px; } .left { float: left; display: inline; margin: 0 15px 15px 0; } /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url(/assets/images/layout/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(/assets/images/layout/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(/assets/images/layout/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(/assets/images/layout/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(/assets/images/layout/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(/assets/images/layout/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(/assets/images/layout/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(/assets/images/layout/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(/assets/images/layout/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(/assets/images/layout/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(/assets/images/layout/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /* ---------------------------------------------------------- ============================================================= NEWCITY STYLE TWEAKS ============================================================= --------------------------------------------------------- */ #headlines.projects { width: 687px; } #headlines.projects #h_images { width: 9999em; } #headlines.projects img { width: 687px; } /* ---------------------------------------------------------- ============================================================= VIM Style Additions ============================================================= --------------------------------------------------------- */ #map_maker_list { list-style-type: none; margin: 20px 0; padding: 0; } #map_maker_list tr:hover td { cursor: pointer; background-color: #e5e5e5; } .sidebar_links { margin-bottom: 3px;} .sidebar_links img { width: 263px !important;}