/* Global Limelight styles ***********************************************************************************************************/ body, html { margin: 0px; padding: 0px; } body { background: none; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 14px; height: 100%; line-height: 1.5; width: 100%; word-spacing: 1px; overflow: hidden; } .page_border { background: #ffffff; position: fixed; z-index: 1; } #border_top, #border_bottom { height: 30px; right: 0; left: 0; } #border_top { top: 0; } #border_bottom { bottom: 0; } #border_left, #border_right { width: 30px; top: 0; bottom: 0; } #border_left { left: 0; } #border_right { right: 0; } /* Header / Navigation ***********************************************************************************************************/ .header_img { /* To fix in place change to "position:fixed;" */ position: fixed; top: 0px; left: 60px; z-index: 11; } .nav_container { /* Vertical nav is not supported, however if you'd like to configure this do so here */ } .nav_container.horizontal { /* Enabled by default */ line-height: 30px; position: fixed; top: 0; right: 120px; white-space: nowrap; width: auto; z-index: 998; } .nav_container.horizontal div { float: left; } #oddball { color: #999999; text-decoration: none; } #nav_loadspin { display: none !important; position: fixed; top: 5px; left: 30px; z-index: 100; } /* Navigation > Links ***************************************************************************************************/ .project_link a, .page_link a, .link_link a, .nav_active a { /* Applied to each navigation link */ border-right: 1px solid #ccc; border-left: 1px solid #ccc; display: block; font-size: 11px; margin: 0 -1px 0 0; padding: 0 30px; text-decoration: none; } .project_link a { color: #999999; } .project_link a:hover { background: #f5f5f5; color: #333333; text-decoration:underline; } .project_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; } .page_link a { color: #999999; text-decoration:none; } .page_link a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; } .page_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; } .link_link a { color: #999999; text-decoration:none; } .link_link a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; } .link_link a:active { background: #cccccc; color: #ffffff; text-decoration: none; } .nav_active a { background: #f5f5f5; color: #000000; font-weight: bold; } .nav_active a:hover { background: #f5f5f5; color: #333333; text-decoration: underline; } .nav_active a:active { background: #cccccc; color: #ffffff; text-decoration: none; } .pagination { color: #555555; font-size: 11px; margin: 0 18px 0 0; z-index:11; } .bottompad .pagination { margin-left: 35px; } .pagination a { color: #555555; text-decoration: underline; } .pagination a:hover { color: #999999; } .pagination a:active { color: #ffffff; } .nav_follow { border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; color: #999999; display: block; font-size: 11px; margin: 0 -1px 0 0; padding: 0 30px; text-decoration: none; } .nav_follow a { color: #999999; text-decoration: none; } .nav_follow a:hover { text-decoration: underline; } .nav_follow a:active { color: #666666; } .view_tag_info { background: #111111; color: #666666; font-size: 11px; line-height: 11px; padding: 14px 22px 5px 15px; position: fixed; left: 30px; bottom: 0; z-index: 990; } .view_tag_info a { color: #0066ff; } .view_tag_info a:hover { color: #ffffff; } .view_tag_info a:active { color: #666666; } #content_container .view_tag_info { background: transparent; color: #444444; font-size: 22px; line-height: 30px; position: absolute; top: 250px; left: 30px; right: 0; text-align: center; } #content_container .view_tag_info a { color: #444444; } #content_container .view_tag_info a:hover { color: #ffffff; text-decoration: underline; } #content_container .view_tag_info a:active { color: #666666; text-decoration: underline; } /* Content ***********************************************************************************************************/ #content_container { clear: both; } /* Content > Project content ***************************************************************************************************/ #maincontainer_scroll { overflow: hidden; position: fixed; top: 30px; right: 30px; bottom: 30px; left: 30px; } #maincontainer { padding: 30px 120px 0px 30px; } .bodycopy a { color: #999999; text-decoration: underline; } .bodycopy a:hover { color: #CCCCCC; } .bodycopy a:active { color: #ffffff; } .project_title { color: #0099ff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: -6px 0 23px 0; } .project_content { color: #999999; } .project_content p { width: 560px; } .project_content br { clear: none !important; } /* Project content > Header *******************************************************************************************/ .project_header { line-height: 29px; } .project_header a { font-family: Lucida Grande, Arial, san-serif; background: #ff3300; color: #222222; display: block; font-size: 14px; font-style: normal; height: 30px; position: fixed; top: 101px; right: 30px; text-align: center; text-decoration: none; width: 30px; } .project_header a:hover { background: #0099ff; color: #222222; text-decoration: none; } .project_header a:active { color: #222222; background: #ffffff; text-decoration: none; } .project_divider { color: #555555; display: none; } .project_index { display:none; } /* Styling of default typographic headers and elements */ h1 { font-size: 22px; line-height: 165%; } h2 { font-size: 16px; line-height: 165%; } h3 { font-size: 14px; line-height: 150%; } blockquote { color: #666666; margin: 0; } p { display: inline; margin: 0; padding: 0; } .project_content img { background: none; margin: 0px 30px 30px 0px; } /* Styling of default typographic headers and elements */ h1 { font-size: 22px; line-height: 165%; } h2 { font-size: 16px; line-height: 165%; } h3 { font-size: 14px; line-height: 150%; } blockquote { color: #666666; margin: 0; } .project_content img { margin: 0px 35px 35px 0px; } /* Project content > Slideshows *******************************************************************************************/ .slideshow_component { float: left; position: relative; margin: 0 0 15px 0; } .slideshow_nav { clear: both; color: #666666; line-height: 29px; position: absolute; left: -30px; font-size: 11px; z-index: 999; } .slideshow_nav.above { top: 0; } .slideshow_nav.below { bottom: 10px; } .slideshow_nav a { font-family: Lucida Grande, Arial, san-serif; background: #ff3300; color: #222222; display: block; float: left; font-size: 14px; font-style: normal; height: 30px; margin: 0; text-align: center; text-decoration: none; width: 30px; } .slideshow_nav a:hover { background: #ffffff; color: #222222; text-decoration: none; } .slideshow_nav a:active { color: #0099ff; background: #ffffff; text-decoration: none; } .slideshow_nav a.slide_prev { border-right: 1px solid #333333; } .slideshow_count { background: #111111; color: #666666; float: left; font-size: 11px; height: 30px; line-height: 30px; padding: 0 15px; } .slideshow_caption { clear: both; display: block; font-size: 11px; padding: 5px 0 5px 0; } .slideshow_wrapper { clear: both; margin: 0px 30px 10px 0px; } #slideshow_container img { margin: 0px; } .slideshow_wrapper a, .slideshow_wrapper a:hover, .slideshow_wrapper a:active { background: none !important; } ul.slideshow_thumbs { margin: 0; padding: 0; } .slideshow_thumb { float: left; list-style: none; margin: -3px 0px 0px -3px; padding: 0px 7px 7px 0px; } .slideshow_thumb a { background: none !important; border: 1px solid transparent; display: block; padding: 2px; } .slideshow_thumb a:hover { background: none !important; border: 1px solid #444444; } a.activeSlide { background: none; border: 1px solid #666666; } .slideshow_thumb a:active, a.activeSlide:hover, a.activeSlide:active { background: none !important; border: 1px solid #666666; } .slideshow_thumb img { border: 0; display: block; margin: 0; height: 80px; } /* Project content > Project footer *******************************************************************************************/ .project_footer { color: #444444; clear: both; padding: 15px 0 0 0; font-size: 11px; } .footer_title_type { color: #444444; font-weight: bold; } .project_views { color: #444444; font-style: italic; } /* Project Footer Links */ .project_footer .permalink a { color: #444444; } .project_footer .permalink a:hover { color: #999999; text-decoration: underline; } .project_footer .permalink a:active { color: #ffffff; } .tags { color: #444444; } .tags a { color: #666666; text-decoration: none; } .tags a:hover { color: #999999; text-decoration: underline; } .tags a:active { color: #ffffff; } .tags a:visited { } .project_footer .editlink a { color: #0066ff; font-style: italic; } .project_footer .editlink a:hover { background: #ffff00; color: #000000; } .project_footer .editlink a:active { background: #000000; color: #ffffff; } .project_bottom { clear: both; border-bottom: 0px dotted #333333; margin: 30px 0px 0px 0px; } /* Content > Thumbnails ***************************************************************************************************/ #thumb_container { background: #111; position: fixed; left: 30px; right: 30px; bottom: 30px; z-index: 99; } #crop_left, #crop_right { position: absolute; top: 0; bottom: 0; z-index: 99; } #crop_left { left: 0; } #crop_right { right: 0; } .project_thumb { float: left; margin: 0 15px 0 0; position: relative; } .project_thumb .hover { text-decoration: none; } .project_thumb:hover { cursor: pointer; text-decoration: none; } .project_thumb .nohover { text-decoration: none; } .project_thumb:hover .cardimgcrop, .project_thumb:hover .cardimgcrop_default { -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; filter: alpha(opacity=75); } .project_thumb:hover .thumb_title { display: block; } .project_thumb:hover .thumb_tag { display: block; } .project_thumb.active .cardimgcrop, .project_thumb.active .cardimgcrop_default { opacity: 1; outline: 2px solid #0099ff; outline-offset: -2px; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); } .project_thumb.active .thumb_title { display: none; } .project_thumb.active .thumb_tag { display: none; } .cardimgcrop { background: #333333; overflow: hidden; position: relative; width: 160px; height: 90px; } .cardimgcrop img { background: #333333; width: 160px; } #content_container.ie .project_thumb { overflow: hidden; width: 160px; height: 90px; } .loader_holder { display: none; position: absolute; top: 8px; left: 8px; z-index: 3; } .thumb_title { display: none; overflow: hidden; position: absolute; top: 7px; left: 10px; width: 140px; z-index: 2; } .thumb_title .text { color: #ffffff; display: block; font-size: 11px; font-weight: bold; line-height: 1.5; text-decoration: underline; } .thumb_tag { display: none; color: #999999; line-height: 15px; overflow: hidden; position: absolute; bottom: 10px; left: 10px; z-index: 2; } .thumb_tag a { color: #999999; font-size: 11px; line-height: 1; text-decoration: none; } .thumb_tag a:hover { text-decoration: underline; } .thumb_tag a:active { color: #ffffff; } /* Search results *******************************************************************************************/ #search_form { position: fixed; top: 0; left: 120px; z-index: 999; } #search_form #search_term { background: #f5f5f5; border-bottom: 0; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: 0; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; height: 30px; line-height: 11px; padding: 0 10px; width: 188px; } #search_form_results { padding-bottom: 90px; } .search_header { color: #666666; float: left; font-size: 14px; font-style: normal; font-weight: normal; margin: 0; padding: 5px 0; width: 145px; } #search_term { background: #1a1a1a; border: 1px solid #333333; color: #cccccc; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0; padding: 5px; width: 220px; } #search_results { float: left; } .result { clear: both; font-size: 14px; line-height: 22px; margin-bottom: 60px; } .search_thumb { float: left; margin: 4px 25px 35px 0px; } .search_thumb img { width: 120px; height: auto; } .search_text { width: 500px; margin-left: 145px; } .search_title a { color: #cccccc; font-weight: bold; text-decoration: none; } .search_title a:hover { color: #ffffff; text-decoration: underline; } .search_title a:active { color: #666666; } .search_tags { color: #666666; font-family: Georgia, times, serif; font-size: 11px; font-style: italic; } .search_tags a { color: #666666; text-decoration: none; } .search_tags a:hover { background: none; color: #cccccc; text-decoration: underline; } .search_tags a:active { color: #666666; } /* Footer ***********************************************************************************************************/ .bottompad { clear: both; position: relative; height: 35px; margin: 35px 0 0 0; width: 705px; display: none; } .bottompad a { padding: 2px 3px 2px 3px; } /* Video component ***********************************************************************************************************/ .video_component { float: left; margin: 0 30px 30px 0; } /* Audio component ***********************************************************************************************************/ .audio_component { color: #777777; font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif; font-size: 10px; height: 30px; line-height: 26px; width: 300px; } .audio_component div { height: 26px; } .audio_component .border { border: 2px solid #aaaaaa; opacity: 0.5; -moz-border-radius: 5px; -webkit-border-radius: 5px; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; } .audio_component .vertical_border { background: #aaaaaa; opacity: 0.50; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; } .audio_component .controls { top: 2px; left: 2px; } .audio_component .play_pause { background: url("/_gfx/playpause.png"); } .audio_component .spectrum .spectrum_bar { background: #666666; } .audio_component .loading { background: #bbbbbb; opacity: 0.25; filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; } .audio_component .progress { background: #bbbbbb; border-right: 1px dotted #333333; opacity: 0.25; filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; } .audio_component .volume_slide.hover { background: #bbbbbb; opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; } /* Scrollbars ******************************************************************************************************/ .jspContainer { position: relative; } .jspPane { position: absolute; } .jspVerticalBar { position: fixed; top: 30px; right: 8px; width: 12px; height: 100%; } .jspHorizontalBar { position: absolute; bottom: -21px; left: 0; width: 100%; height: 12px; } .jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; } .jspCap { display: none; height: 15px; width: 15px } .jspHorizontalBar .jspCap { float: left; } .jspTrack { position: relative; } .jspDrag { background: #808080; position: relative; top: 0; left: 0; height: 30px; cursor: pointer; z-index: 99; filter:alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; opacity: 0.25; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .jspDrag.jspHover, .jspDrag.jspActive { filter:alpha(opacity=40); -moz-opacity: 0.40; -khtml-opacity: 0.40; opacity: 0.40; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; } .jspArrow.jspDisabled { cursor: default; background: #80808d; } .jspVerticalBar .jspArrow { height: 12px; } .jspHorizontalBar .jspArrow { width: 12px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; } /* Internet Explorer fixes ******************************************************************************************************/ #content_container.ie .project_thumb:hover .cardimgcrop img, #content_container.ie .project_thumb:hover .cardimgcrop_default img { filter: alpha(opacity=25); } #content_container.ie .project_thumb.active .cardimgcrop img, #content_container.ie .project_thumb.active .cardimgcrop_default img { filter: alpha(opacity=20); } * html .jspCorner { margin: 0 -3px 0 0; } /* Other ***********************************************************************************************************/ .toolset { /* Admin and following icons — only seen by members */ position: fixed; top: 36px; right: 36px; z-index: 9999; } .cargo_link { /* "Running on Cargo" */ color: transparent; overflow: hidden; text-indent: -9999px; width: 20px; height: 20px; visibility:hidden; } .cargo_link a { background: url(/_gfx/bolt-sc.png) no-repeat center; display: block; font-size: 11px; overflow: hidden; position: fixed; text-indent: -9999px; width: 20px; height: 20px; z-index: 9999; } /* In-browser code editing made "almost bearable" by CodeMirror: http://marijn.haverbeke.nl/codemirror ***********************************************************************************************************/ /********Sarah added***********/ #issue{ align: center; } #download{ position:fixed; bottom:30px; left:60px; } #credit{ position:fixed; top:0px; left:60px; clear: both; } /** * Fullscreen button */ a#fullscreen { background-color: #1a1a1a; background-image: url(/_gfx/fullscreen_open.png); background-repeat: no-repeat; background-position: 67px 3px; border: 1px solid #1a1a1a; color: #bbbbbb; display: block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 11px; line-height: 18px; height: 19px; padding: 0 4px 0 5px; text-align: left; text-decoration: none; width: 74px; } a#fullscreen:hover { background-color: #fff; color: #000; } a#fullscreen:active { background-color: #fff; border: 1px solid #999; color: #666; }