@charset "utf-8"; /* CSS Document */ /* ----------------------------------------------------------------------------------------------------- filename : /_css/uaajc_layout.css purpose : UAAJC global stylesheet: for use with all Justice Center web pages version : 3.0; 6 Mar 2012 IN PROGRESS copyright : (c) Justice Center, University of Alaska Anchorage author : msgreen prior vers : 2.0; 9 July 2010 Layout and typography for the Justice Center home page is based on the current UAA CMS. This stylesheet includes primarily layout elements, including their typography if they are essentially "fixed" elements that govern many or all pages. Typography that mainly affects the #maincontent div (where most unique content on the site lives) can be found in the uaajc_main.css stylesheet. -- LAYOUT -- The basic layout is variable-width but constrained to a minimum of 760px to accomodate users still using 800x600 screens and a maximum of 960px so that text-heavy pages don't go too wide. Layout can be one-column or two-column; two-column uses a leftnav menu. Default style is a 760px to 960px page of one column (no leftnav). This governs most Justice Center pages. However, the home page and major index pages (Research, Publications, etc.) have two columns, with the left column having a leftnav menu. Number of columns and page width are defined by applying to following styles to the tag: .column1 (default style) .column2 (2 column used for Justice Center home page and major index pages Note that the leftnav menu can be applied, if desired, to variable-width pages. All 2-column pages need to have the menu items added. >>>>>>>> DEPRECATED. In v2.0, JC home page & major index pages were fixed width at 760px in line with CMS at that time. No more. .column1_fixed .column2_fixed (fixed-width at 760px and used for Justice Center home page and major index pages) <<<<<<<<< Another major difference between page layout is in the masthead, defined in the #jcstuff div: .masthead_jc (default style) .masthead_forum (Alaska Justice Forum -- defined in the stylesheet uaajc_forum.css) Both styles have logo & other elements to go with them, which are built into the Dreamweaver templates. Structure: #wrapper #header #headnav #jcstuff #midwrapper #mainnav #main #breadcrumbs #maincontent #footer ----------------------------------------------------------------------------------------------------- */ /* BODY ================================================================================================ Body and outermost wrapper ===================================================================================================== */ /* default body styling for the majority of Justice Center pages*/ body { background-color: #FFF; display: block; margin-right: auto; margin-left: auto; min-width: 760px; max-width: 960px; } #wrapper { display: block; background-color: #FFF; margin-right: auto; margin-left: auto; } body.column1_fixed #wrapper, body.column2_fixed #wrapper { width: 760px; } /* HEADER ============================================================================================== Page-spanning top-level elements, including top page navigation, logo, etc. ===================================================================================================== */ #header { /* Wrapper for #topNav and JC logo header elements. */ display: block; padding: 15px 0 15px 0; } /* topNav ----------------------------------------------------------------------------- UAA CMS nav ------------------------------------------------------------------------------------- */ #topNav { /* top row nav containing UAA CMS standard elements from DenaliView.css #topnav */ display: block; font-family: Arial, Helvetica, sans-serif; font-size: 11px; top: 15px; float: right; color: #6A6A68; vertical-align: middle; } #topNav a { color: #6A6A68; padding: 0 5px 0 5px; } /* wrapper2 ---------------------------------------------------------------------------- WRAPPER for all content below header (including footer). Used to apply shadow. ------------------------------------------------------------------------------------- */ #wrapper2 { box-shadow: 0px 0px 4px #999; } /* Universal box shadow from UAA-CMS DenaliView.css*/ .glow { /* CSS3 Dec -- IE Fallback in IE stylesheet */ -moz-box-shadow: 0px 0px 4px #999; -webkit-box-shadow: 0px 0px 4px #999; box-shadow: 0px 0px 4px #999; } /* topbar ----------------------------------------------------------------------------- Green toplevel breadcrumbs and search bar ------------------------------------------------------------------------------------- */ #topbar { background-image: url(../images/topbar.jpg); background-repeat: repeat-x; background-position: top; background-color: #014933; padding: 5px 10px 15px 10px; /* after fixing searchbar, change to "5 px 10px" */ color: #FEC425; } #topbar a { color: white; } #breadcrumbs { /* breadcrumb navbar */ font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; font-weight: 400; background-color: #014933; } /* ------- jcsearch [Justice Center custom search] --------- */ #jcsearch { float: right; padding: 5px 0 0 0; } #jcsearch2 { padding: 5px 0 0 0; } /* Align search button image properly with the search box. (Browser compatibility problem on IE for Mac 5.2, but no one uses that browser so I won't worry.) */ #cse-search-box input, #cse-search-box2 input { vertical-align: middle; } /* jcstuff ----------------------------------------------------------------------------- Justice Center logo and affiliate links; or Alaska Justice Forum masthead. #jcstuff is the wrapper for this section. The standard for most pages is .mastheadjc, which should be accompanied by the #chsw and #sac divs and, in the document itself, the UAA Justice Center logo with image maps. Use the .masthead_forum style for Alaska Justice Forum pages, accompanied by relevant divs and images. ------------------------------------------------------------------------------------- */ #jcstuff { /* wrapper */ display: block; width: 100%; } /* masthead_jc --------------------------------------------------------------------- Default masthead for Justice Center pages: should always be accompanied by the #chsw and #sac divs and, in the document itself, the UAA Justice Center logo with image maps. For Alaska Justice Forum pages, use #masthead_forum, which is defined in the uaajc_forum.css stylesheet. (In practice, this means using Forum Dreamweaver templates.) ------------------------------------------------------------------------------------- */ /* Background image for header styled similarly to UAA CMS but modified to fit size of current Justice Center logo */ /* header-background.gif = 915px wide x 115px high. Top row = 85px high, bottom row = 30px high. */ #masthead_jc { height: 115px; border-bottom-color: #222338; border-bottom-style: solid; border-bottom-width: 20px; /* huge black bottom border matching UAA CMS */ } /* MIDWRAPPER ========================================================================================== Wrapper for all elements between header and footer, including mainnav (if applicable) and main content. #midwrapper is styled differently for Alaska Justice Forum pages governed by uaajc_forum.css. ===================================================================================================== */ #midwrapper { clear: both; display: block; margin: 0; } /* Apply to wrapper for 2-column pages needing a leftnav menu (Justice Center home page and index pages). Background image provides background color for leftnav column */ body.column2 #midwrapper, body.column2_fixed #midwrapper { background-image: url(../images/leftnav_bg.gif); background-repeat: repeat-y; background-position: left; border-left-width: 0px; border-left-style: none; } /* MAINNAV ----------------------------------------------------------------------------- Left nav column on 2-column pages. Irrelevant to 1-column layouts. ------------------------------------------------------------------------------------- */ #mainNav { /* Wrapper for nav column on 2-column pages. */ display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; /* approx. 8 pts.? */ width: 230px; } /* ---------- MENU [main menu]------------------- */ #menu { background-color: #4E4E4E; } /* Setting top/bottom padding for links rather than setting specific line height (& vertical alighment) accomodates IE users who have View > Text Size on their browsers set to "Larger" or "Largest." Longer lines will still go to two or more lines, but will not overlap text in the next line down. */ #menu a { display: block; color: #FFF; text-decoration: none; padding: .5em .25em .5em 0; } * html #menu a { height: 1px; } /* IE 5-6 hack for fixing links displayed as blocks. */ /* Nav menu styles based more-or=less on UAA CMS NavOne-NavThree styles. However, here nav2 and nav3 give a different background on hover as a visual cue, rather than underlining as in UAA CMS. */ #menu ul { margin: 0; } #menu li { margin: 0; list-style-type: none; line-height: 120%; border-bottom: 1px solid white; } .nav1 { /* Justice Center Home button will appear UAA gold. */ text-indent: 10px; font-weight: bold; background-color: #FFCC00; } .nav1b { /* Justice Center for Students button will be bold. */ text-indent: 10px; font-weight: bold; } .nav1 a { /* Justice Center home page link will have UAA green font color. */ color: #00583D !important; } .nav1b a { /* Justice Center for Students link will have UAA gold font color. */ color: #FFCC00 !important; } .nav2 { text-indent: 10px; font-weight: bold; } .nav3 { padding-left: 20px !important; } #menu a:hover { background-color: #818181; } /* This set of styles will set the leftnav menu for the current page to white with bold black text. Depends on: the id assigned to the body plus the id assigned to the link itself in the menu. */ body#about a#aboutLink, body#history a#historyLink, body#mission a#missionLink, body#faculty a#facultyLink, body#pubs a#pubsLink, body#researchindex a#researchindexLink, body#researchabout a#researchAboutLink, body#ajsac a#ajsacLink, body#authors a#authorsLink, body#events a#eventsLink, body#press a#pressLink { background-color: #FFF; color: #000; font-weight: bold; } /* Justice Center contact information. Generally this only appears on the home page; hence, this section is set as an optional template area in Dreamweaver templates. */ #contact { display: block; padding: 9px; color: #FFCC00; background-color: #4E4E4E; } #contact a { color: #FFCC00; } #contact h2 { font-size: 1em; color: #FFCC00; } #contact p { margin-bottom: 0; line-height: 120%; } /* MAIN -------------------------------------------------------------------------------- Main content of page. ------------------------------------------------------------------------------------- */ body.column1 #main, body.column1_fixed #main, #forum #main { /* wrapper for main content on 1-column page */ display: block; padding: 16px 10px 10px 10px; } #research #main { display: block; padding: 16px 16px 10px 16px; } body.column2 #main, body.column2_fixed #main { /* wrapper for main content on 2-column page */ margin-left: 250px; padding: 16px 10px 10px 0; } /* MENUS ----------------------------------------------------------------------------------------- Menus other than the two-column-page leftnav menu. ----------------------------------------------------------------------------------------------- */ /* PAGE MENUS Horizonal menuS using | to separate menu items. Used primarily for quick navigation within a subsection of the site (A-Z directory, top level of Alaska Justice Forum, etc.) or within a page. For the most part these menus exist in the two optional areas (optArea1 and optArea2) defined within the jc_master template. in optArea1 -- at top of the page directly under the masthead (i.e., above breadcrumbs and page title): #azmenu A-Z topical guide #pagemenu1 generic pagemenu #forummenu1 Alaska Justice Forum menu on article pages with links to issue index and PDF of issue in optArea2 -- below title #forummenu2 Alaska Justice Forum menu used only on forumindex and forumabout pages (including Reprints) .pagemenu2 generic menu which can be used more than once per page (seeing as it's a class not an id) .menuicon for use with icons such as the PDF or video/audio play icons in abstract div below the abstract/summary proper .topicmenu for a related-topic menu, usually in the abstract div of an A-Z page (Only general layout of #forummenu1 and #forummenu2 is given here. See FORUMMENU in uaajc_forum.css for color definitions, which are related to specific issues of the Forum.) --------------------------------------------------------------------------*/ #a-z-menu, #pagemenu1, #forummenu1, #forummenu2 { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; padding: 8px 0; margin-bottom: 12px; } #a-z-menu { background-color: #FBE285; } #a-z-menu, #pagemenu1 a, #forummenu1 a, #forummenu2 a { padding: 0 5px 0 5px; font-weight: bold; } /* pagemenu2 and topicmenu horizonal menu within a page using | to separate menu items --------------------------------------------------------------------------*/ .pagemenu2, .topicmenu { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; margin: 16px 0; } .pagemenu2 a, .topicmenu a { padding: 0 5px 0 5px; } #faculty .pagemenu2 { margin: 0; } .topicmenu { /* for a related-topic menu, usually in the abstract div */ padding: 5px 5px 5px 5px; margin-bottom: 0px; background-color: #E9EFE9; } .topicmenu p { margin-bottom: 0px; } /* MAINCONTENT [where the actual unique content of the pages lives] ---------------------------------- This is where the actual unique content of the pages lives. Styles within this div are in the stylesheet uaajc_main.css. ----------------------------------------------------------------------------------------------------*/ #maincontent { margin-top: 5px; } /* FOOTER ============================================================================================== Page-spanning bottom content containing standard UAA logo and footer elements. ===================================================================================================== */ #footer { /* wrapper */ display: block; background-image: url(../images/uaa-cms-footer-bkgrnd.jpg); font-family: Arial, Helvetica, sans-serif; font-size: 0.6em; color: #FFC423; line-height: 130%; height: 29px; padding: 8px; clear: both; } /* footleft [left column of the footer] -------------------------------------------- */ #footleft { display: block; width: 392px; float: left; } #uaalogo { width: 52px; height: 19px; float: left; margin: 3px 3px 0pt 0pt; display: inline; /* IE bug fix for margins on floated elements */ } .footer-update { color: #D4DFD4; } /* footright [right column of the footer] -------------------------------------------- */ #footright { display: block; float: right; text-align: right; } #footlinks { /* set color of | between links to black */ color: #000; } #footlinks a { /* but the links themselves are UAA gold */ color: #FFCC00; text-decoration: none; } #footlinks a:hover { text-decoration: underline; } #ttt { margin-top: 8px }