@charset "UTF-8"; /* CSS Document */ /* Theme Name: IndiePix 2010 white MAIN HEADER and FOOTER Hierarchy: This is the main header/footer css for indiepixfilms.com. Should be listed second Author: Kyle Walters Date: early 2010 NEEDS: indiepix_headerfooter_ie6.css, indiepix_headerfooter_ie7.css */ /************HEADER***************/ /*Simple Nav */ ul { } .simple_h_nav ul { letter-spacing:1px; font-size: 11px; font-weight:100; height: 30px; text-transform:lowercase; list-style: none; margin:0; padding:0; } .simple_h_nav ul li { list-style: none; float:left; } .simple_h_nav ul li a { padding:0px 10px; line-height: 30px; } /*Structure*/ #header { width: 100%; padding: 0; margin: 0; background-color:#fefefe; } #above { font-size:9px; text-transform: uppercase; letter-spacing: 1px; line-height:27px; padding-top: 3px; } #header_main { clear: both; border: 1px solid #9FADAE; padding: 0; margin: 0; width: 948px; background-color: #E2E7EA; } #nav_sub { clear: both; } #promo_header { clear:both; } /*Above*/ #above_left { float: left; text-align:left; width: 300px; } #above_right { float: right; text-align: right; width: 600px; padding-right: 20px; } #above_right img { vertical-align: top; } /*#above_right span { padding-left:10px; }*/ #above h1 { font-size: 9px; font-weight: normal; float: left; display:inline; line-height: 27px; padding: 0; margin:0; padding-right: 5px; padding-left: 13px; letter-spacing: 1px; } #above_right ul li { float: right; text-transform: uppercase; font-size: 9px; font-weight: normal; } #above_right ul li a { padding:0px 7px; } #above .addthis_toolbox { padding: 3px 0px 0px 0px; height: 27px; overflow: hidden; } #above .addthis_toolbox img:hover{ opacity: 0.8; } .above_cart { background:url(/image/232512) no-repeat top left; background-position:5px 7px; display: block; display:inline-block; margin-left: 3px; } .above_cart span { margin-left: 25px; } li.above_cart a { padding-left: 23px; border-left: 1px solid #2e3131; } #above .above_name { font-weight: bold; padding:0px 7px; line-height: 30px; } #above a:link, #above a:visited { color: #2e3131; } #above a:active, #above a:hover { color:#7DA0A1; } /*Main*/ #header .get_independent { width: 263px; height: 95px; background-color: #E2E7EA; } /**************** SEARCH STUFF ****************/ #header .search_nav { float:right; width: 248px; display:block; line-height: 34px; background-color: #CBD7D7; height: 34px; padding:0px 0px 0px 15px; } #header .logo { background-color: #fefefe; } #header td.searchnav { height: 34px; } #header .search_nav input { font-size:0.8em; } #header .search_nav fieldset { border:0; margin:0; padding: 0; background: #CBD7D7; height: 32px; line-height: 32px; } #header .search_btn { vertical-align:middle; margin: 0px 0px; padding:0 } #header .search_nav form{ margin:0; padding:0; padding-top: 2px; height: 32px; line-height: 32px; } /************ GET INDEPENDENT *************/ .newsletter_join { } .get_independent h2 { font-size: 16px; font-weight: 100; text-transform: uppercase; color: #2e3131; background-color: transparent; margin: 0; padding: 0px; letter-spacing:1px; padding-left: 16px; padding-bottom: 7px; } .get_independent span { font-size: 9px; margin: 0px 15px 0px 19px; display: block; letter-spacing: 1px; font-style:italic; } #header .newsletter_join { float:right; width: 248px; display:block; padding:0px 0px 0px 15px; } #header .newsletter_join input { font-size:0.8em; } #header .newsletter_join fieldset { border:0; margin:0; padding: 0; background-color:transparent; } #header .join_btn { color: #fefefe; background: #425252; font-weight: normal; border: 1px solid #425252; text-transform:uppercase; letter-spacing:1px; } #header .join_btn:hover { color: #2e3131; background: #CBD7D7; cursor: pointer; } #header .newsletter_join form{ margin:0; padding:0; padding-top: 2px; } #newsletter_thanks { background: #CBD7D7; padding: 5px; color: #2e3131; margin-right: 10px; margin-bottom: 7px; } #newsletter_thanks span{ margin-left: 0px !important; } /************* MAIN NAVIAGATION ************/ #navigation { /*width: 685px;*/ } #header .nav_main { background-color: #E2E7EA; width: 685px; height: 34px; line-height: 34px; text-transform:uppercase; font-size: 14px; font-weight: 100; letter-spacing:1px; margin: 0px; padding: 0px; float: left; } #header td.nav_main { height: 34px; overflow:hidden; } #header .nav_main ul { list-style: none; height:34px; overflow:hidden; margin: 0px; padding: 0px; } #header .nav_main ul ul{ list-style: none; height: auto; overflow: visible; } #header .nav_main ul li { list-style: none; } #primary-nav li li { /*this is for second level*/ width: 120px; } #primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; } #primary-nav ul { /*this is for second level*/ position: absolute; top: auto; display: none; background-color: #2e3131; padding: 0px; text-align:left; margin-top: 0px; margin-left: -1px; border:solid 1px #9FADAE; border-top:0px; } #primary-nav li { /*this is for all levels */ margin-left: 0px; float: left; } #primary-nav li li { /*this is for second level*/ margin-left: 0px; margin-top: -1px; float: none; position: relative; border-top:0px; } /* Styling the basic apperance of the menu elements */ #primary-nav a { display: block; margin: 0px; } #primary-nav li a { /*this is for top level*/ padding: 0em 1em; color: #2e3131; text-decoration: none; line-height:34px; font-family: 'Josefin Sans', sans-serif; font-weight: 700; } #primary-nav li li a { /*this is for second level*/ font-size:10px; } #primary-nav li, #primary-nav li.menuparent { } #primary-nav li.menu_current a, #primary-nav li.menu_current a:hover { background-color: #2e3131; color: #fefefe; padding: 0em 1em; text-decoration: none; line-height:34px; } #primary-nav li.menu_current, #primary-nav li.menu_current:hover { background-color: #2e3131; color: #fefefe; text-decoration: none; line-height:34px; } /* Styling the apperance of menu items on hover */ /*this is for top level on rollover, but seems to get overridden*/ #primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { background-color: #fefefe; color: #2E3131; } #primary-nav li:hover a, #primary-nav li.menuh a, #primary-nav li.menuparenth a, #primary-nav li.menuactiveh a #primary-nav li.menu_seconditemh a{ background-color: #fefefe; color: #2E3131; } #primary-nav li:hover ul a, #primary-nav li.menuh ul a, #primary-nav li.menuparenth ul a, #primary-nav li.menuactiveh ul a{ /*this is for second level*/ color: #fefefe; background-color: #2E3131; border-left:0px; border-right:0px; } #primary-nav ul li:hover a, #primary-nav ul li.menuh a, #primary-nav ul li.menuparenth a, #primary-nav ul li.menuactiveh a{ color: #fefefe; background-color: #2E3131; } #primary-nav ul li:hover a:hover, #primary-nav ul li.menuh a:hover, #primary-nav ul li.menuparenth a:hover, #primary-nav ul li.menuactiveh a:hover, #primary-nav li.menu_seconditemh a:hover{ background-color: #fefefe; color: #2E3131; } /* The magic - set to work for up to a 3 level menu, but can be increased unlimited */ /* just add #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul ul ul, for fourth level */ #primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; } /* #primary-nav ul ul ul li:hover ul, #primary-nav ul ul ul li.menuparenth ul, for fourth level */ #primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { display: block; } /* IE Hacks */ #primary-nav li li { float: left; clear: both; } #primary-nav li li a { height: 1%; } /****** SUB NAVIGATION ******/ #nav_sub { height:34px; overflow:hidden; } /*********** PROMO ***********/ #promo_header { width: 100%; } #promo_header h3 { margin: 0; padding: 0; } #promo_header h3 a { display: block; background: no-repeat top left; float: left; } #header h3 a span{ display: none; } /*promo options*/ #promo_header .leftbig h3 a{ width: 600px; height: 40px; } #promo_header .rightsmall h3 a{ width: 350px; height: 40px; } #promo_header .leftsmall h3 a{ width: 350px; height: 40px; } #promo_header .rightbig h3 a{ width: 600px; height: 40px; } #promo_header .full h3 a{ width: 950px; height: 40px; } /************************* FOOTER *************************/ /* Structure */ #footer { width:100%; clear:both; background-color:#fefefe; } #footer_genres { background: url(/image/232515) no-repeat top left; margin: 0px 0px 10px; /*height: 60px;*/ /*overflow: hidden;*/ } #footer_genres ul { margin-left: 240px; } #footer_main { clear: both; border: 1px solid #9FADAE; padding: 0; margin: 0; width: 948px; } .footer_about { background: url(/image/232516) no-repeat top left; padding: 0 20px 0 253px; margin: 20px 0px; } .footer_about p { font-size: 12px; } #below p { font-size: 11px; margin-left: 16px; letter-spacing: 1px; margin-bottom: -5px; margin-top: 20px; font-weight: 100; } .footer_nav_holder { padding:15px 10px 15px 50px; background: #3e3d3d; } .footer_nav { float:left; width: 20%; } .footer_nav ul li{ margin-left:0px; list-style:none; list-style-image:none; display:block; } .footer_nav ul { margin-left:0px; padding-left:0px; } .footer_nav a, .footer_nav a:visited { color:#FFF; text-decoration:underline; } .footer_nav a:hover { color: #B2CDCD; } .footer_title{ color: #FEFEFE; font-size: 18px; text-transform:uppercase; font-weight:100; margin-bottom: 0.8em; letter-spacing: 1px; } /************ FOOTER - GET INDEPENDENT *************/ .foot_newsletter_join { } .foot_get_independent { width: 248px; float:right; color: #fefefe; text-align: left; } .foot_get_independent h2 { font-size: 16px; font-weight: 100; color: #fefefe; text-transform: uppercase; background-color: transparent; margin: 0; padding: 0px; letter-spacing:1px; padding-left: 0px; padding-bottom: 7px; } .foot_get_independent span { font-size: 9px; margin: 0px 15px 0px 0px; display: block; letter-spacing: 1px; font-style:italic; } #footer .newsletter_join { float:right; width: 248px; display:block; padding:0px 0px 0px 0px; } #footer .newsletter_join input { font-size:0.8em; } #footer .newsletter_join fieldset { border:0; margin:0; padding: 0; background-color:transparent; } #footer .join_btn { color: #2e3131; background: #CBD7D7; font-weight: normal; border: 1px solid #CBD7D7; text-transform:uppercase; letter-spacing:1px; } #footer .join_btn:hover { color: #fefefe; background: #425252; cursor: pointer; } #footer .newsletter_join form{ margin:0; padding:0; padding-top: 2px; } #newsletter_thanks_footer { background: #e2e7ea; padding: 5px; color: #2e3131; margin-bottom: 7px; } .footer_icons img { margin-right: 10px; } .footer_icons img:hover { opacity: 0.8; }