@import url("reset.css"); div#wrapper { width: 1200px; margin: 0 auto; text-align: left; } h2 { padding: 11px 15px; /*--ONLY FOR DERMNSTRATION PURPOSE. CHANGE THIS AS PER YOUR REQUIREMENT--*/ } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CSS FOR MAIN NAVIGATION BAR STYLING STARTS HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ ul#nav-bar { float: left; width: 1200px; height: 31px; position: relative; border: 0px solid #6e6e6e; /*--YOU CAN CHANGE THE NAV-BAR BORDER COLOR HERE--*/ border-bottom: none; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*--Gradient--*/ /* background: url(../images/nav-bg.png) repeat-x 0 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#b1b1b1)); background-image: -webkit-linear-gradient(top, #f7f7f7, #b1b1b1); background-image: -moz-linear-gradient(top, #f7f7f7, #b1b1b1); background-image: -o-linear-gradient(top, #f7f7f7, #b1b1b1); background-image: -ms-linear-gradient(top, #f7f7f7, #b1b1b1); -webkit-box-shadow: 0px 1px 0px #5d5d5d; -moz-box-shadow: 0px 1px 0px #5d5d5d; box-shadow: 0px 1px 0px #5d5d5d; */ } /*-- AS IE6 DOES NOT UNDERSTAND CHILD SELECTORS WE HAVE CREATED SEPARATE CLASS NAMES FOR LIST ITEMS AND THEIR LINKS. THIS WILL HELP US CREATING LESS COMPLICATED CSS FOR IE6. FOR "li" ENTER CLASS NAME: "top-menu" FOR "a" ENTER CLASS NAME" "top-menu" THE HTML CODE SHOULD BE SOMETHING LIKE THIS: --*/ ul#nav-bar li.top-menu { float: left; height: 30px; /*--THAT IS, HEIGHT OF NAVIGATION BAR INCLUDING BORDERS--*/ width: auto; } ul#nav-bar li a.top-menu { float: left; width: auto; height: 31px; padding: 0px 14px; font-family: 'Carme', Verdana, Geneva, sans-serif; font-size:1.3em; color:#1D477C; /*--NAV MENU TEXT COLOR. CHANGE THIS AS PER YOUR REQUIREMENTS--*/ } ul#nav-bar li.first-dd, ul#nav-bar li.first-dd a.top-menu { /*--ADDING ROUNDED CORNER TO LEFT--*/ -webkit-border-radius: 2px 0px 0px 2px; -moz-border-radius: 2px 0px 0px 20px; border-radius: 2px 0px 0px 2px; } ul#nav-bar li.first-dd a.top-menu { padding-left: 20px; } /*--CHANGE BACKGOUND GRADIENT AND TEXT COLOR OF NAV MENUS ON MOUSEOVER--*/ ul#nav-bar li.top-menu:hover a.top-menu { color: #fff; text-shadow: 0px 1px 1px #000; /*--Gradient--*/ background: url(../images/blue-hover-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#36b5ff), to(#006dac)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #36b5ff, #006dac); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #36b5ff, #006dac); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #36b5ff, #006dac); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #36b5ff, #006dac); /*--For IE10--*/ } /*--FOR DOWNWARD ARROW--*/ ul#nav-bar li.top-menu a.top-menu span { float: left; width: auto; line-height: 30px; } ul#nav-bar li.top-menu a.top-menu span em { float: right; height: 17px; width: 14px; margin: 7px 0px 0px 6px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px -72px; } ul#nav-bar li.top-menu:hover a.top-menu span em { background-position: 0px -48px; } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CSS FOR MAIN NAVIGATION BAR STYLING ENDS HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* GENERAL STYLES FOR DROPDOWN MENUS START HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------ GENERAL STYLE FOR LEVEL-ONE DROPDOWN MENU: WE HAVE KEPT THE WHOLE CONTENT OF A LEVEL-ONE DROPDOWN MENU INSIDE A "div" WITH CLASS NAME "level1" AND APPLIED CSS3 SHADOW AND GRADIENT TO THIS CONTAINER. AS WE'LL APPLY CSS3 TRANSITION EFFECT TO DROPDOWN MENUS THEY CANNOT BE CODED IN A TRADITIONAL WAY LIKE, POSITIONING "left: -9999px;" AND ON MOUSEOVER "left: auto;". HERE, INITIALLY WE'LL KEEP THE HEIGHT OF .level1 AS "0" AND ON MOUSEOVER WE'LL ASIGN ACTUAL HEIGHT AS PER THE DESIGN ("height: auto;" DOESN'T WORK WITH CSS3 TRANSITION). REMEMBER, DON'T ADD ANY TOP OR BOTTOM BORDER TO .level1 AS IT WILL CREATE UNWANTED PROBLEM WHEN USER MOVES MOUSE CURSOR NEAR THE BOTTOM BORDER OF MAIN NAV-BAR. -------------------------------------------------------------------------------------------------------------------------------------*/ .level1 { position: absolute; top: 41px; border: 1px solid #d1d1d1; border-bottom: none; border-top: none; overflow: hidden; /*--HIDE FLOWING OUT OF CONTENT DURING TRANSITION--*/ /*--CHANGE FOLLOWING TWO VALUES ON MOUSEOVER--*/ opacity: 0; /*--CHANGE OPACITY TO 1 ON MOUSEOVER--*/ height: 0px; /*--WE'LL CHANGE THIS HEIGHT ON MOUSEOVER--*/ /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; /*--ADDING SHADOW--*/ -webkit-box-shadow: 0px 2px 0px #bebebe; -moz-box-shadow: 0px 2px 0px #bebebe; box-shadow: 0px 2px 0px #bebebe; /*--Gradient--*/ background: #fff url(../images/bottom-gradient.png) left bottom repeat-x; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dbdbdb), color-stop(88%, #fff)), color-stop(95%, #f7f7f7)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #fff, #fff 88%, #f7f7f7 95%, #dbdbdb); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #fff, #fff 88%, #f7f7f7 95%, #dbdbdb); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #fff, #fff 88%, #f7f7f7 95%, #dbdbdb); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #fff, #fff 88%, #f7f7f7 95%, #dbdbdb); /*--For IE10--*/ /*--ADDING CSS3 SLIDING UP/DOWN EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; /*--TRANSITION DELAY 400ms--*/ -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } /*------------------------------------------------------------------------------------------------------------------------------------- SPECIFIC POSITIONING FOR LEFT-ALIGNED, RIGHT-ALIGNED AND FULL-WIDTH DROPDOWN MENUS. DEPENDING UPON YOUR PREFERENCE JUST ADD ANY OF THE FOLLOWING CLASS NAMES TO .level1: "left-aligned-dd" = FOR LEFT ALIGNED DROPDOWN MENU "right-aligned-dd" = FOR RIGHT ALIGNED DROPDOWN MENU "full-width-dd" = FOR FULL WIDTH DROPDOWN MENU "first-dd" = FOR THE FIRST DROPDOWN MENU REASON BEHIND CREATING "first-dd": IN THIS ITEM WE HAVE CREATED A NAV-BAR WITH 20PX ROUNDED CORNER AND WE HAVE PREFERRED TO KEEP THE THE FIRST DROPDOWN MENU AND FULL-WIDTH DROPDOWN MENU 20PX AWAY FROM THE LEFT. HOWEVER, FOR "left-aligned-dd" THE DROPDOWN MENU IS POSITIONED RELATIVE TO ITS PARENT "li" AND WE'LL APPLY "left= 0px;" FOR THIS CLASS. BUT, THIS IS NOT APPLICABLE TO FIRST DROPDOWN MENU. THAT IS WHY, WE HAVE CREATED SEPARATE CLASS NAME FOR FIRST DROPDOWN MENU. FOR SEARCH OPTION DROPDOWN MENU, PLEASE CHECK STYLING OF SEARCH OPTIONS DROPDOWN MENU. -------------------------------------------------------------------------------------------------------------------------------------*/ li.left-aligned-dd, li.right-aligned-dd { position: relative; /*--POSITION DROPDOWN MENUS RELATIVE TO "li"--*/ } /*--HIDE FOLLOWING THREE CODES FROM IE6--*/ ul#nav-bar > li.left-aligned-dd .level1 { left: 0px; } ul#nav-bar > li.right-aligned-dd .level1 { right: 0px; } ul#nav-bar > li.first-dd .level1, ul#nav-bar > li.full-width-dd .level1 { left: 20px; } /*------------------------------------------------------------------------------------------------------------------------------------- WIDTH OF TWO COLUMN, THREE COLUMN, FOUR COLUMN AND FULL-WIDTH DROPDOWN MENUS: AS WE HAVE DECIDED TO KEEP FULL-WIDTH DROPDOWN MENU WIDTH = 920PX, WE PREFERRED TO KEEP THE COLUMN WIDTH 184PX (920 / 5 = 184). YOU CAN ALWAYS REPLACE THESE COLUMN WIDTHS WITH YOUR OWN AS PER YOUR REQUIREMENTS. DO NOT FORGET TO OVERRIDE/REPLACE THESE DROPDOWN MENU WIDTHS IF YOU HAVE CHANGED THE COLUMN WIDTHS OR IF YOU HAVE VERTICAL BORDERS BETWEEN COLUMNS. WE HAVE CUSTOMIZED THESE VALUES FOR TWO COLUMN AND THREE COLUMN DROPDOWN MENUS (PLEASE CHECK THE RELAVANT SECTIONS BELOW). DROPDOWN MENU WIDTHS: ONE COLUMN DROPDOWN MENU: 184PX TWO COLUMN DROPDOWN MENU: 368PX THREE COLUMN DROPDOWN MENU: 552PX FOUR COLUMN DROPDOWN MENU: 736PX FULL-WIDTH DROPDOWN MENU: 920PX FOR MEMBERS AND CONTACT DROPDOWN MENU WE HAVE CUSTOMIZED THESE VALUES AND KEPT THE COLUMN WIDTHS AS 300PX. MEMBERS DROPDOWN MENU: 300PX CONTACT DROPDOWN MENU: 600PX STYLING OF SEARCH OPTION DROPDOWN MENU IS QUITE DIFFERENT FROM OTHER DD MENUS. FOR SEARCH OPTION DROPDOWN MENU PLEASE CHECK STYLING OF SEARCH OPTIONS DROPDOWN MENU BELOW. -------------------------------------------------------------------------------------------------------------------------------------*/ /*--WIDTHS OF DROPDOWN BOXES--*/ div.onecol-dd { width: 230px; /* ancho una colomna */ } div.twocols-dd { width: 368px; } div.threecols-dd { width: 552px; } div.fourcols-dd /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANNNNNNNNNNNNNNNNNNNNNNNNNNNNCCCCCCCCCCCCCCCCCCCCCCHHHHHHHHHHHHHHHHHOOOOOOOOOOOOOOOO*/ { width: 730px; } div.full-width-dd { width: 920px; } div.members-dd { width: 300px; } div.contact-dd { width: 600px; } /*------------------------------------------------------------------------------------------------------------------------------------ STYLING OF COLUMNS FOR DROPDOWN BOXES: IN THIS TEMPLATE BASIC SINGLE COLUMN WIDTH IS 154px WHICH ALSO HAS 15px PADDING ON LEFT AND RIGHT SIDE. WE HAVE CREATED FIVE COLUMN WIDTHS FOR THIS TEMPLATE. HOWEVER, YOU CAN CREATE MORE COLUMNS AND ASSIGN CLASS NAMES LIKE "dd-col6", "dd-col7", etc. YOU CAN ALSO CHANGE THE VALUES OF COLUMN WIDTHS HERE AS PER YOUR REQUIREMENTS, FOR EXAMPLE, YOU CAN ARRANGE YOUR COLUMN WIDTHS ACCORDING TO 960GS. CHECK THE FOLDER: "basic template based on 960gs". IF YOU NEED TO USE DIFFERENT COLUMN WIDTHS IN A DROPDOWN MENU WHICH DO NOT FOLLOW ANY OF THE BASIC COLUMN WIDTHS THEN YOU CAN CUSTOMIZE THEM WHILE STYLING THAT SPECIFIC DROPDOWN MENU. WE HAVE DONE THIS FOR "MEMBERS" AND "CONTACT" DROPDOWN MENU. -------------------------------------------------------------------------------------------------------------------------------------*/ .dd-col1, .dd-col2, .dd-col3, .dd-col4, .dd-col5 { float: left; padding: 0px 15px; padding-bottom: 15px; /*--JUST FOR DEMONSTRATION. CHANGE THIS AS PER YOUR REQUIREMENTS--*/ font-family: 'Carme', Verdana, Geneva, sans-serif; font-size: 14px; } .dd-col1 { width: 154px; /*184-30 = 154*/ } .dd-col2 { width: 338px; /*368-30 = 338*/ } .dd-col3 { width: 522px; /*552-30 = 522*/ } .dd-col4 { width: 730px; /*736-30 = 706*/ } .dd-col5 { width: 890px; /*920-30 = 890*/ } /*------------------------------------------------------------------------------------------------------------------------------------ COMMON STYLE FOR TEXT/PASSWORD INPUTS AND TEXTAREA. WE'LL OVERRIDE THESE STYLES IN SPECIFIC CASES LIKE, SEARCH FIELD. SINCE IE6 DOES NOT SUPPORT ATTRIBUTE SELECTORS WE NEED TO TARGET SEPARATE IDs FOR THESE INPUTS IN "nav-IE6.css" -------------------------------------------------------------------------------------------------------------------------------------*/ .level1 input[type="text"], /*--FOR TEXT INPUT FIELDS--*/ li.searchbox-dd input[type="text"], /*--FOR SEARCH INPUT FIELD--*/ .level1 input[type="password"], /*--FOR PASSWORD INPUT FIELDS--*/ .level1 textarea /*--FOR TEXTAREA--*/ { width: auto; height: auto; border: none; padding: 5px 10px; color: #000; font-family: 'Carme', Verdana, Geneva, sans-serif; font-size: 14px; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; /*--CREATING INSET SHADOW--*/ -webkit-box-shadow: 0px 1px 2px #7f7f7f inset; -moz-box-shadow: 0px 1px 2px #7f7f7f inset; box-shadow: 0px 1px 2px #7f7f7f inset; } /*--:FOCUS AND :HOVER STYLE--*/ .level1 input[type="text"]:hover, .level1 input[type="text"]:focus, /*--FOR TEXT INPUT FIELDS--*/ li.searchbox-dd input[type="text"]:hover, li.searchbox-dd input[type="text"]:focus, /*--FOR SEARCH INPUT FIELD--*/ .level1 input[type="password"]:hover, .level1 input[type="password"]:focus, /*--FOR PASSWORD INPUT FIELDS--*/ .level1 textarea:hover, .level1 textarea:focus /*--FOR TEXTAREA--*/ { background-color: #ceedff; } /*--COMMON STYLE FOR BUTTONS. WE OVERRIDE THESE STYLES IN SPECIFIC CASES LIKE, SEARCH BUTTON--*/ button { display: inline-block; width: auto; border: 1px solid #00517f; padding: 4px 5px 4px 12px; font-family: 'Carme', Verdana, Geneva, sans-serif; font-size: 14px; text-shadow: 0px 1px 1px #000; color: #fff; cursor: pointer; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; /*--Gradient--*/ background: url(../images/blue-button-bg.png) repeat-x top left; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#0096ee), to(#005c91), color-stop(35%, #50bfff)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #0096ee, #50bfff 35%, #005c91); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #0096ee, #50bfff 35%, #005c91); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #0096ee, #50bfff 35%, #005c91); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #0096ee, #50bfff 35%, #005c91); /*--For IE10--*/ } /*--ALIGN BUTTON TEXT AND ARROW USED IN BUTTON--*/ button span, button em.arrow-right { float: left; width: auto; margin: 0; } button em.arrow-right { height: 15px; width: 14px; margin-left: 6px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px -23px; } /*--ARROWS USED IN TEXT LINKS--*/ span.arrow-right { display: inline-block; vertical-align: middle; height: 8px; width: 6px; margin-left: 6px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px -114px; } /*------------------------------------------------------------------------------------------------------------------------------------- SLIDING UP/DOWN ANIMATION OF THE DROPDOWN MENU: FOR SLIDING UP/DOWN ANIMATION WE NEED TO KEEP THE WHOLE CONTENT INSIDE A CONTAINER AND ANIMATE THE WHOLE DIV. HERE "dd-container" (dd = dropdown) HOLDS ENTIRE CONTENT OF EVERY DROPDOWN MENU (EXCEPT "onecol-dd" DROPDOWN MENU) AND WE HAVE APPLIED CSS3 TRANSITION EFFECT TO IT. IN ORDER TO CREATE THIS EFFECT WE NEED TO HIDE THE OVERFLOW OF ".level1" (THAT IS, THE PARENT OF "div.dd-container"). BUT IF ".level1" CONTAINS FLYOUT MENUS IT NEEDS TO UNHIDE THE OVRFLOW ON MOUSEOVR. AS "div.onecol-dd" CONTAINS FLYOUT MENUS WE HAVE CREATED SIMPLE "ease-in" CSS3 TRANSITION EFFECT FOR THIS DROPDOWN MENU. -------------------------------------------------------------------------------------------------------------------------------------*/ .level1 > div.dd-container { position: relative; /*--ADDING CSS3 SLIDING UP/DOWN EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } /*-------SHOW/HIDE DROPDOWN BOX ON MOUSEOVER/MOUSEOUT. HERE WE NEED TO ENTER ACTUAL HEIGHT OF ".level1" IN ORDER TO PERFORM CSS3 TRANSITION. CHANGE THESE VALUES AS PER YOUR DESIGN REQUIREMENTS-----*/ ul#nav-bar > li:hover .level1 { opacity: 1; height: auto; /*--ENTER ACTUAL HEIGHT FOR EACH DROPDOWN MENU SEPARATELY--*/ } ul#nav-bar > li:hover div.dd-container { top: 0px; /*--POSITION OF DROPDOWN MENU CONTAINER AFTER MOUSEOVER--*/ } /*-----------------------ONE COLUMN DROPDOWN-------------------*/ /*-- IF DROPDOWN MENU CONTAINS FLYOUT MENUS THEN YOU NEED TO INSERT "overflow: visible;"--*/ div.onecol-dd { overflow: visible; /*--UNHIDE OVERFLOW FOR FLYOUT MENUS--*/ } ul#nav-bar > li:hover div.onecol-dd { height: 300px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ /*--(34+1) x 16 - 1 = 524. 34px = HEIGHT OF EACH DROPDOWN LINK, 14 = NUMBER OF LINKS. ADD 1PX FOR EACH TOP BORDER. DELETE 1PX AS TOP LINK DOES NOT HAVE ANY TOP BORDER. ADJUST THE HEIGHT OF SINGLE COLUMN DROPDOWN MENU AS PER THE NUMBER OF DROPDOWN LINKS YOU HAVE--*/ } /*--CHANGE HEIGHT AND OPACITY OF LIST ITEMS IN SINGLE COLUMN DROPDOWN MENU--*/ ul#nav-bar > li:hover div.onecol-dd > ul > li { height: 35px; visibility: visible; } /*--CHANGE HEIGHT OF LINKS IN SINGLE COLUMN DROPDOWN MENU--*/ ul#nav-bar > li:hover div.onecol-dd > ul > li > a { height: 34px; } /*---------------------FOUR COLUMN DROPDOWN-------------------*/ ul#nav-bar > li:hover div.fourcols-dd /******************** ALLLTOOO **************************************/ { min-height: 265px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } /*--POSITION OF DROPDOWN MENU CONTAINER BEFORE MOUSEOVER--*/ div.fourcols-dd > div.dd-container { top: -500px; /*--HEIGHT OF "div.fourcols-dd"--*/ } /*--------------------THREE COLUMN DROPDOWN---------------*/ ul#nav-bar > li:hover div.threecols-dd { height: 346px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } div.threecols-dd > div.dd-container { top: -346px; /*--HEIGHT OF "div.threecols-dd"--*/ } /*---------------------TWO COLUMN DROPDOWN------------------*/ ul#nav-bar > li:hover div.twocols-dd { height: 270px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } /*--POSITION OF DROPDOWN MENU CONTAINER BEFORE MOUSEOVER--*/ div.twocols-dd > div.dd-container { top: -270px; /*--HEIGHT OF "div.twocols-dd"--*/ } /*---------------------FULL-WIDTH DROPDOWN------------------*/ ul#nav-bar > li:hover div.full-width-dd { height: 458px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } div.full-width-dd > div.dd-container { top: -458px; /*--HEIGHT OF "full-width-dd"--*/ } /*---------------------MEMBERS DROPDOWN---------------------*/ ul#nav-bar > li:hover div.members-dd { height: 310px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } /*--POSITION OF DROPDOWN MENU CONTAINER BEFORE MOUSEOVER--*/ div.members-dd > div.dd-container { top: -310px; /*--HEIGHT OF "div.members-dd"--*/ } /*----------------------CONTACT DROPDOWN-------------------*/ ul#nav-bar > li:hover div.contact-dd { height: 535px; /*--ACTUAL HEIGHT OF THE DROPDOWN MENU IN ORDER TO EXPERIENCE CSS3 TRANSITION EFFECT--*/ } /*--POSITION OF DROPDOWN MENU CONTAINER BEFORE MOUSEOVER--*/ div.contact-dd > div.dd-container { top: -535px; /*--HEIGHT OF "div.contact-dd"--*/ } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* GENERAL STYLES FOR DROPDOWN MENUS END HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CUSTOMIZED STYLES FOR DRODOWN MENUS START HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* HERE GOES CSS FOR CUSTOMIZED DROPDOWN MENUS. WE HAVE CUSTOMIZED TWO COLUMN, THREE COLUMN, FOUR COLUMN AND FULL-WIDTH DROPDOWN MENUS FOR THIS TEMPLATE. WE HAVE KEPT PLENTY OF READY MADE OPTIONS IN THESE DROPDOWN MENUS SO THAT YOU CAN SIMPLY MAKE SOME CHANGES IN HTML/CSS CODES IN ORDER TO ACHIEVE YOUR REQUIREMENTS. YOU CAN SIMPLY CUSTOMIZE EACH OF THESE DROPDOWN MENUS OR ADD NEW DROPDOWN MENUS AS PER YOUR DESIGN REQUIREMENTS.--*/ /*-----------------------------------------------------ONE COLUMN DROPDOWN MENU------------------------------------------------------*/ div.onecol-dd > ul > li { text-align: center; width: 230px; /* 184 */ overflow: hidden; /*--HIDE OVERFLOW OF FLYOUT MENUS DURING TRANSITION--*/ /*--CHANGE THIS VALUE ON MOUSEOVER--*/ height: 0px; /*--ADDING CSS3 TRANSITION EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } div.onecol-dd > ul > li.flyout { position: relative; overflow: visible; visibility: hidden; } /*--STYLING LINKS--*/ div.onecol-dd > ul > li > a { display: inline-block; width: 230px; /* 184 */ color: #333; font-family: 'Carme', Verdana, Geneva, sans-serif; font-size: 14px; overflow: hidden; border-top: 1px solid #d9d9d9; /*--CHANGE THIS VALUE ON MOUSEOVER--*/ height: 0; /*--ADDING CSS3 TRANSITION EFFECT--*/ -webkit-transition: height 400ms ease-in 400ms; -moz-transition: height 400ms ease-in 400ms; -o-transition: height 400ms ease-in 400ms; transition: height 400ms ease-in 400ms; } div.onecol-dd > ul > li:first-child > a { border-top: none; } div.onecol-dd > ul > li > a span { display: inline-block; width: 200px; /*--184 - (10 + 4 + 4) = 166--*/ height: 26px; padding-left: 10px; margin: 4px 4px 3px; /*--ADDING BORDER RADIUS--*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*--CHANGE TEXT STYLE AND BACKGROUND ON MOUSEOVER--*/ div.onecol-dd > ul > li:hover > a span { color: #fff; font-weight: bold; text-shadow: 0px 1px 1px #000; /*--Gradient--*/ background: url(../images/blue-hover-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#36b5ff), to(#006dac)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #36b5ff, #006dac); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #36b5ff, #006dac); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #36b5ff, #006dac); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #36b5ff, #006dac); /*--For IE10--*/ } /*--RIGHT ARROWS ON EACH LIST ITEM--*/ div.onecol-dd > ul > li > a span em { float: right; height: 15px; width: 15px; margin: 5px 10px 0px 0px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px 0px; } /*--CHANGE ARROW ON MOUSEOVER--*/ div.onecol-dd > ul > li:hover > a span em { background-position: 0px -23px; } /*------------------------------------------------------FOUR COLUMN DROPDOWN MENU----------------------------------------------------*/ div.fourcols-dd div.tier1, div.fourcols-dd div.tier2 { float: left; width: 736px; /*--WIDTH OF "div.fourcols-dd"--*/ border-bottom: 1px solid #d3d3d3; /*ADDING BORDER BETWEEN TWO TIERS--*/ } div.fourcols-dd div.tier2 { clear: left; border-bottom: none; } /*--APPLYING TEXT STYLES TO EACH PARAGRAPHS--*/ div.fourcols-dd div.tier1 div.col2 p { font-style: italic; } div.fourcols-dd div.tier1 div.col3 p { font-weight: bold; } /*--TIER ONE HIGHLIGHT BOX--*/ div.fourcols-dd div.tier1 div.col4 p { width: 136px; padding: 8px; color: #0182d4; font: bold italic 1em/17px Georgia, "Bitstream Vera Serif", Constantia, serif; border: 1px solid #bababa; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*--Gradient--*/ background: url(../images/text-box-1-top-bg.png) repeat-x left top, url(../images/text-box-1-bottom-bg.png) repeat-x left bottom;/*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-color: #f4f4f4; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e9e7), color-stop(35%, #50bfff)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #fff, #f4f4f4 8%, #f4f4f4 92%, #e8e9e7); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #fff, #f4f4f4 8%, #f4f4f4 92%, #e8e9e7); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #fff, #f4f4f4 8%, #f4f4f4 92%, #e8e9e7); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #fff, #f4f4f4 8%, #f4f4f4 92%, #e8e9e7); /*--For IE10--*/ } /*--ALL LINK COLOR IN TIER ONE--*/ div.fourcols-dd div.tier1 div a { display: inline-block; line-height: 1; margin-top: 5px; } div.fourcols-dd div.tier1 div a span { color: #1b80e5; } div.fourcols-dd div.tier1 div a:hover span { text-decoration: underline; } /*--FOUR COLUMN DD: TIER TWO--*/ div.fourcols-dd div.tier2 div h2 { padding-left: 0; font-size: 1.5em; } /*--FOUR COLUMN DD TIER TWO: COLUMN ONE--*/ div.fourcols-dd div.tier2 div.col1 p img { float: left; width: 72px; height: 72px; padding: 3px; background: #fff; border: 1px solid #c6c6c6; margin: 3px 6px 0px 0px; } /*--ARRANGE TWO COLUMNS OF LIST ITEMS--*/ div.fourcols-dd div.tier2 div.col1 ul { float: left; width: 154px; margin-left: 30px; margin-top: 8px; } div.fourcols-dd div.tier2 div.col1 div ul.list-col1 { margin-left: 0; } /*--INSERT LIST MARKER IN THE BACKGROUND--*/ div.fourcols-dd div.tier2 div.col1 ul li { margin-top: 4px; width: 138px; background: url(../images/list-arrow.png) no-repeat left center; padding-left: 16px; } div.fourcols-dd div.tier2 div.col1 ul li a { font: bold 1.1em/1.1 Arial, Helvetica, sans-serif; color: #1b80e5; } div.fourcols-dd div.tier2 div.col1 ul li a:hover { text-decoration: underline; } /*--TIER TWO: HIGHLIGHTED TEXT BOX--*/ div.fourcols-dd div.tier2 div.highlight { display: inline-block; position: relative; /*--SO THAT THE CORNER IMAGE CAN BE POSITIONED ABSOLUTELY--*/ width: 308px; padding: 13px; border: 2px solid #262626; overflow: visible; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*--Gradient--*/ background: url(../images/text-box-2-top-bg.png) repeat-x left top, url(../images/text-box-2-bottom-bg.png) repeat-x left bottom;/*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-color: #202020; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9b9c), to(#9a9b9c), color-stop(35%, #50bfff)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #9a9b9c, #202020 5%, #202020 95%, #9a9b9c); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #9a9b9c, #202020 5%, #202020 95%, #9a9b9c); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #9a9b9c, #202020 5%, #202020 95%, #9a9b9c); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #9a9b9c, #202020 5%, #202020 95%, #9a9b9c); /*--For IE10--*/ } /*--CORNER IMAGE--*/ div.fourcols-dd div.tier2 div.highlight div.corner img { position: absolute; width: 69px; height: 53px; left: 268px; top: -3px; } div.fourcols-dd div.tier2 div.highlight h3 { color: #fff; margin-bottom: 5px; } /*--ARRANGE TWO COLUMNS INSIDE HIGHLIGHTED BOX--*/ div.fourcols-dd div.tier2 div.highlight ul { float: left; width: 139px; margin-left: 30px; } div.fourcols-dd div.tier2 div.highlight ul.col1 { margin: 0; } div.fourcols-dd div.tier2 div.highlight ul li { color: #ccc; font-size: 1em; line-height: 16px; margin-top: 10px; } div.fourcols-dd div.tier2 div.highlight a.img-thumb { display: inline-block; width: 133px; height: 74px; padding: 3px; background: #fff; } div.fourcols-dd div.tier2 div.highlight a span { display: inline-block; color: #0cf; margin-top: 5px; } div.fourcols-dd div.tier2 div.highlight a:hover span { text-decoration: underline; } div.fourcols-dd div.tier2 div.highlight a span.arrow-right { margin-top: 0px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px -132px; } /*--------------------------------------------------------THREE COLUMN DROPDOWN MENU-------------------------------------------------*/ /*--MODIFYING DROPDOWN MENU WIDTH--*/ div.threecols-dd { width: 553px; /*--WE HAVE INCREASED THE WIDTH BY 1PX AS THERE IS ONE VERTRICAL BORDER BETWEEN COLUMN ONE AND TWO--*/ } /*--MODIFYING COLUMN PADDING--*/ div.threecols-dd div.dd-col1, div.threecols-dd div.dd-col3 { padding-bottom: 0; } /*--ARRANGING TWO TIERS--*/ div.threecols-dd div.tier1, div.threecols-dd div.tier2 { float: left; width: 553px; /*--WIDTH OF "div.threecols-dd"--*/ border-bottom: 1px solid #d3d3d3; /*ADDING BORDER BETWEEN TWO TIERS--*/ padding: 15px 0px; } div.threecols-dd div.tier2 { clear: left; padding: 0; border-bottom: none; } /*-----TIER ONE-----*/ div.threecols-dd div.tier1 div div.first-child { margin-bottom: 15px; } /*--CREATE BORDER BETWEEN COLUMN ONE AND COLUMN TWO--*/ div.threecols-dd div.tier1 div.col1 { border-right: 1px solid #d3d3d3; } /*--GENERAL STYLE FOR LIST ITEMS AND LINKS--*/ div.threecols-dd div.tier1 div div ul { margin-top: 5px; } div.threecols-dd div.tier1 div div ul li { margin-top: 2px; } div.threecols-dd div.tier1 div a { color: #1b80e5; line-height: 1.1; } div.threecols-dd div.tier1 div a:hover { text-decoration: underline; } /*--COLUMN ONE BOLD LINKS--*/ div.threecols-dd div.tier1 div.col1 div ul { margin-left: 12px; /*--IN ORDER TO SHOW LIST MARKERS--*/ } div.threecols-dd div.tier1 div.col1 div ul li { list-style-type: disc; color: #1b80e5; /*--LIST MARKER COLOR--*/ } div.threecols-dd div.tier1 div.col1 div ul li a { font: bold 1.1em/1.1 Arial, Helvetica, sans-serif; } /*--TAKE A TOUR VIDEO--*/ div.threecols-dd div.tier1 div.col1 div p { margin: 5px 0px; } div.threecols-dd div.tier1 div.col1 div a.vid-thumb { display: inline-block; position: relative; /*--SO THAT PLAY BUTTON COULD BE POSITIONED ABSOLUTELY--*/ width: 146px; height: 72px; padding: 3px; border: 1px solid #c6c6c6; } div.threecols-dd div.tier1 div.col1 div a.vid-thumb span.play-btn { position: absolute; left: 56px; top: 19px; width: 42px; height: 42px; background: url(../images/play-button-sprite.png) no-repeat 0px 0px; } /*--CHANGE PLAY BUTTON ON MOUSEOVER. THIS DOES NOT WORK IN IE6--*/ div.threecols-dd div.tier1 div.col1 div a.vid-thumb:hover span.play-btn { background-position: 0px -52px; } /*--------------------TIER TWO------------------*/ /*--CREATING BOXED LINKS--*/ div.threecols-dd div.tier2 a { float: left; width: 246px; padding: 10px 15px; } /*--CREATING VERTICAL BORDER BETWEEN TWO BOXED LINKS--*/ div.threecols-dd div.tier2 a.first-child { border-right: 1px solid #d3d3d3; } /*--POSITIONING ICONS--*/ div.threecols-dd div.tier2 a span { float: left; width: 32px; height: 32px; margin-right: 8px; } /*--STYLING HEADER--*/ div.threecols-dd div.tier2 a strong { float: left; width: auto; padding-bottom: 3px; font: bold 1.3em/1.1 Arial, Helvetica, sans-serif; color: #1b80e5; } div.threecols-dd div.tier2 a:hover strong { text-decoration: underline; } div.threecols-dd div.tier2 a em { float: left; width: 206px; font: normal 1.1em/15px Verdana, Geneva, Tahoma, sans-serif; color: #333; } /*--------------------------------------------------------TWO COLUMN DROPDOWN MENU---------------------------------------------------*/ /*--MODIFYING DROPDOWN MENU WIDTH--*/ div.twocols-dd { width: 369px; /*--WE HAVE INCREASED THE WIDTH BY 1PX AS THERE IS ONE VERTRICAL BORDER BETWEEN COLUMN ONE AND TWO--*/ } /*--MODIFYING COLUMN PADDING--*/ div.twocols-dd div.dd-col1 { width: 184px; /*--IF DESIGN REQUIRES YOU NEED TO CHANGE THE BASIC CSS OF THE COLUMNS AS WE DID HERE--*/ padding: 0; margin: 15px 0px; border-left: 1px solid #d3d3d3; } div.twocols-dd div.col1 { border-left: none; } div.twocols-dd div ul li a { display: inline-block; width: 154px; padding: 6px 15px 8px; font: bold 1.2em/1 Arial, Helvetica, sans-serif; color: #1b80e5; } div.twocols-dd div ul li a:hover { background: #dae7ff; /*--CHANGING BACKGROUND ON MOUSEOVER--*/ } div.twocols-dd div ul li a span { color: #666; font: normal 0.7em/1 Verdana, Geneva, Tahoma, sans-serif; } /*--------------------------------------------------------FULL-WIDTH DROPDOWN MENU---------------------------------------------------*/ /*--MODIFYING COLUMN PADDING--*/ div.full-width-dd div.dd-col1 { padding: 15px; } /*--STYLING HEADERS WITH BACKGROUND--*/ div.full-width-dd div.tier1 div.header-section, div.full-width-dd div.tier2 div.header-section { height: 30px; background: #eaeaea; padding-bottom: 0; } div.full-width-dd div.header-section h2 { line-height: 30px; padding: 0; font-size: 1.5em; } div.full-width-dd div.header-section a { float: right; width: auto; margin-top: -23px; color: #1b80e5; } div.full-width-dd div.header-section a:hover span { text-decoration: underline; } /*--STYLING LINKS OF TIER ONE--*/ div.full-width-dd div.tier1 div ul { display: inline-block; width: auto; margin-top: 5px; } div.full-width-dd div.tier1 div ul li { margin-top: 2px; } div.full-width-dd div.tier1 div ul li a { color: #1b80e5; line-height: 1.1; } div.full-width-dd div.tier1 div ul li a:hover { text-decoration: underline; } /*-- ARRANGING TIER TWO COLUMNS: WE HAVE CREATED FOUR COLUMNS IN THE TIER TWO EACH OF WHICH HAS GOT 200px WIDTH. THEREFORE MODIFY THE WIDTHS OF "dd-col1" IN TIER TWO. ---*/ div.full-width-dd div.tier2 div.dd-col1 { width: 150px; } /*--STYLING IMAGE THUMBS OF TIER TWO--*/ div.full-width-dd div.tier2 div a.img-thumb { display: inline-block; width: 152px; height: 92px; padding: 3px; background: #fff; border: 1px solid #c6c6c6; } div.full-width-dd div.tier2 div a.img-thumb:hover { border: 1px solid #9f9f9f; } /*--STYLING HEADERS OF IMAGE THUMB SECTIONS--*/ div.full-width-dd div.tier2 div a strong { display: inline-block; padding: 6px 0px 3px; font: bold 1.2em/1.1 Arial, Helvetica, sans-serif; color: #1b80e5; } div.full-width-dd div.tier2 div a strong:hover { text-decoration: underline; } /*------------------------------------------------------------MEMBERS DROPDOWN MENU--------------------------------------------------*/ div.members-dd div.dd-col1 { width: 270px; /*--WE HAVE CHANGED THIS VALUE FROM 184PX TO 270PX AS PER OUR DESIGN REQUIREMENTS--*/ } div.members-dd h2, div.members-dd p, div.members-dd form { width: 270px; /*--WIDTH OF THE COLUMN--*/ } div.members-dd h2 { padding-bottom: 7px; /*--CHANGING DEFAULT PADDING TO MATCH UP WITH THE LINE-HEIGHT OF TEXT BELOW HEADER--*/ } div.members-dd p a { color: #1b80e5; text-decoration: underline; } div.members-dd p a:hover { text-decoration: none; } /*--STYLING LOGIN FORM--*/ div.members-dd form div { float: left; clear: left; width: auto; margin-top: 10px; } div.members-dd form div label { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; } div.members-dd input[type="text"], div.members-dd input[type="password"] { width: 250px; height: 16px; background-color: #dfe1e1; } div.members-dd input#remember-me, div.members-dd form div.remember-me label { display: inline-block; vertical-align: middle; margin-right: 2px; } div.members-dd form div.remember-me label { margin-right: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 1em; font-weight: normal; } div.members-dd form fieldset div span { float: left; width: auto; height: auto; margin-top: 5px; /*--KEEPING VERTICAL GAP BETWEEN INPUT FIELD AND LABEL--*/ } /*--STYLING LOGIN BUTTON--*/ div.members-dd form button.login { margin-bottom: 7px; } div.members-dd form button.login span { margin: 0; } /*--------------------------------------------------------------CONTACT DROPDOWN MENU------------------------------------------------*/ div.contact-dd div.dd-col1 { width: 270px; /*--WE HAVE CHANGED THIS VALUE FROM 184PX TO 270PX AS PER OUR DESIGN REQUIREMENTS--*/ } div.contact-dd h2 { font-size: 1.5em; padding: 11px 0px 7px; /*--CHANGING DEFAULT PADDING TO MATCH UP WITH THE LINE-HEIGHT OF TEXT BELOW HEADER--*/ } div.contact-dd h3 { margin-bottom: 8px; text-decoration: underline; } /*------------------------CONTACT DROPDOWN BOX: COLUMN ONE--------------------------*/ /*--------STYLING CONTACT FORM-------*/ div.contact-dd div form div { float: left; clear: left; width: auto; margin-top: 10px; } div.contact-dd div.col1 em { font-style: normal; font-size: 1.0em; } div.contact-dd strong /*--RED STAR--*/ { color: #f00; font-weight: bold; } div.contact-dd form label { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; } div.contact-dd input[type="text"], div.contact-dd textarea { width: 250px; height: 16px; background-color: #dfe1e1; font-size: 1em; } div.contact-dd textarea { height: 115px; padding: 7px 10px; line-height: 17px; } div.contact-dd form fieldset div span { float: left; width: auto; height: auto; margin-top: 5px; /*--KEEPING VERTICAL GAP BETWEEN INPUT FIELD AND LABEL--*/ } /*--STYLING SUBMIT BUTTON--*/ div.contact-dd form button.submit { margin-bottom: 7px; } div.contact-dd form button.submit span { margin: 0; } /*------------------------CONTACT DROPDOWN BOX: COLUMN TWO--------------------------*/ div.contact-dd div.col2 p img /*--GOOGLE MAP IMAGE, JUST FOR PRESENTATION PURPOSE--*/ { display: inline-block; width: 268px; margin: 8px 0px 0px; border: 1px solid #c6c6c6; } div.contact-dd div.col2 p a em { font-style: italic; color: #1b80e5; text-decoration: underline; } div.contact-dd div.col2 p a:hover em { text-decoration: none; } div.contact-dd div.col2 div { float: left; clear: left; width: 100%; margin-top: 15px; } /*--PHYSICAL ADDRESS--*/ div.contact-dd div.col2 div span { display: inline-block; margin: -2px 0px 13px; font: normal 1em/15px Verdana, Tahoma, sans-serif; color: #000; } div.contact-dd div.col2 div span em { color: #1b80e5; } /*--WORLDWIDE LOCATIONS--*/ div.contact-dd div.col2 div p { margin-top: -2px; line-height: 15px; } div.contact-dd div.col2 div a { float: left; width: auto; margin: 5px 10px 0px 0px; text-decoration: underline; color: #1b80e5; } div.contact-dd div.col2 div a:hover { text-decoration: none; } /*--SOCIAL MEDIA--*/ div.contact-dd div.col2 div.social-media a { width: 32px; height: 32px; } /*--------------------------------------------------------SEARCH OPTIONS DROPDOWN MENU---------------------------------------------*/ /*-- WE HAVE DESIGNED SEARCH OPTIONS DROPDOWN MENU IN SUCH A WAY SO THAT IT APPEARS ONLY WHEN USER HOVER MOUSE CURSOR ON SEARCH FIELD AND/OR SEARCH BUTTON. IN IE WE HAVE ENCOUNTERED A STRANGE PROBLEM. DUE TO PIE SOMETIMES (RARELY) SEARCH BOX DOES NOT APPEAR WHEN WE HOVER THE CURSOR ON SEARCH FIELD. HOWEVER, WHEN WE HOVER THE CURSOR ON SEARCH BUTTON IT ALWAYS TRIGGERS THE DROPDOWN MENU. AS WE HAVE CREATED A DWONWARD ARROW ON THE SEARCH BUTTON IT IS QUITE OBVIOUS THAT USER WILL HOVER/CLICK THE ARROW IN ORDER TO SEE THE OPTIONS. SO WE BELIEVE THIS PROBLEM IS NOT GOING TO EFFECT IE USERS. IF YOU FACE ANY SUCH PROBLEM DUE TO PIE PLEASE CONTACT THE AUTHOR OF PIE (LINK IS GIVEN IN THE instructions.html) WITH YOUR CODE OR ELSE YOU CAN REMOVE PIE IN ORDER TO ACHIEVE FLAWLESS INTERACTIVITY. THIS PROBLEM ALSO COULD BE SOLVED USING JAVASCRIPT, BUT IT IS OUT OF THE SCOPE OF THIS CSS3 ONLY ITEM. --*/ ul#nav-bar li.searchbox-dd /*--POSITIONING "li" CONTAINING SEARCH FIELD AND SEARCH OPTION BOX--*/ { float: right; position: relative; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; border-radius: 0px 20px 20px 0px; } /*-- THE SEARCH FORM HAS BEEN POSITIONED JUST BEHIND THE SEARCH FIELD AND SEARCH BUTTON. HEIGHT AND WIDTH OF THIS FORM ARE KEPT SAME AS THOSE OF THE DIV CONTAINING SEARCH FIELD AND SEARCH BUTTON. THE SEARCH OPTION DROPDOWN BOX SHOULD BE TRIGGERED ONLY WHEN SOME USER HOVER THE MOUSE POINTER OVER THE SEARCH FIELD OR SEARCH BUTTON. FOR THIS WE NEED ONE PARENT (HERE "form") TO MOUSEOVER. --*/ li.searchbox-dd form { float: right; width: auto; height: auto; margin: 6px 7px 0px 0px; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } /*--STYLING SEARCH FIELD--*/ li.searchbox-dd input[type="text"] { float: left; width: 168px; height: 16px; background-color: #fff; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 13px 0px 0px 13px; -moz-border-radius: 13px 0px 0px 13px; border-radius: 13px 0px 0px 13px; /*--CREATING INSET SHADOW--*/ -webkit-box-shadow: 0px 1px 2px #7f7f7f inset, 0px 1px 1px #adadad; -moz-box-shadow: 0px 1px 2px #7f7f7f inset, 0px 1px 1px #adadad; box-shadow: 0px 1px 2px #7f7f7f inset, 0px 1px 1px #adadad; } /*--STYLING SEARCH BUTTON--*/ li.searchbox-dd button.search { float: left; height: 27px; padding: 4px 12px 4px 5px; border-left: 1px solid #0071b1; /*--ADDING ROUNDED CORNER--*/ -moz-border-radius: 0px 14px 14px 0px; border-radius: 0px 13px 13px 0px; } /*--DOWNWARD ARROW ON SEARCH BUTTON--*/ li.searchbox-dd > form span.search-arrow { height: 14px; width: 8px; margin: 0px 8px 0px 0px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px -144px; } /*--CHANGE ARROW DIRECTION ON MOUSEOVER--*/ li.searchbox-dd > form:hover span.search-arrow { background-position: 0px -164px; } /*--HERE GOES STYLING OF SEARCH OPTION DROPDOWN BOX. WE NEED THE DROPDOWN BOX TO APPEAR JUST BELOW THE NAV-BAR--*/ ul#nav-bar li.searchbox-dd div.search-options { top: 41px; right: 16px; width: 243px; } /*---------------SINGLE COLUMN-------------*/ div.search-options ul.single-col { padding: 2px 15px 0px; } div.search-options ul.two-cols { padding: 15px 0px 0px 15px; } div.search-options ul.single-col li, div.search-options ul.two-cols li li { margin-top: 8px; } /*--CHECK BOXES--*/ div.search-options ul li input { float: left; clear: left; width: auto; margin: 2px 4px 0px 0px; } /*--LABELS--*/ div.search-options ul li label { display: inline-block; vertical-align: middle; font-size: 1.1em; line-height: 15px; } /*--LABELS FOR SINGLE COLUMN--*/ div.search-options ul li label { width: 195px; /*--IF YOU HAVE A LABEL LONGER THAN SINGLE LINE MENTION AVAILABLE WIDTH FOR THE LABEL. ELSE, THE LABEL WOULD MOVE BELOW THE INPUT. IF YOU HAVE A SHORT LABEL THEN REPLACE THIS WITH "width: auto".--*/ } /*-------------TWO COLUMNS------------*/ div.search-options ul.two-cols ul { float: left; width: 99px; padding-right: 15px; } /*--LABELS FOR TWO COLUMNS--*/ div.search-options ul.two-cols li label { width: 81px; /*--IF YOU HAVE A LABEL LONGER THAN SINGLE LINE MENTION AVAILABLE WIDTH FOR THE LABEL. ELSE, THE LABEL WOULD MOVE BELOW THE INPUT. IF YOU HAVE A SHORT LABEL THEN REPLACE THIS WITH "width: auto".--*/ } /*----------------TEXT PARAGRAPH AT THE BOTTOM-----------------*/ div.search-options div.advanced-search { clear: both; width: auto; padding: 15px; font-size: 1.1em; line-height: 17px; } div.search-options div.advanced-search p a { text-decoration: underline; color: #1b80e5; } div.search-options div.advanced-search p a:hover { text-decoration: none; } /*---------------- NOW STEP BY STEP SLIDE DOWN/UP DROPDOWN SEARCH OPTIONS BOX ON MOUSEOVER/MOUSEOUT: FIRST, INCREASE THE HEIGHT OF FORM ON MOUSEOVER SO THAT THE DROPDOWN BOX DOES NOT ESCAPE WHILE MOVING DOWN THE MOUSE POINTER FROM THE SEARCH FIELD. SECOND, DROPDOWN BOX SHOULD NOT APPEAR DUE TO "li.searchbox-dd:hover" THIRD, TRIGGER DROPDOWN BOX WHEN MOUSE POINTER ENTERS SEARCH FIELD AND/OR SEARCH BUTTON FOURTH, POSITION OF SLIDING DROPDOWN MENU CONTAINER BEFORE MOUSEOVER FIFTH, POSITION OF SLIDING DROPDOWN MENU CONTAINER AFTER MOUSEOVER ----------------*/ li.searchbox-dd > form:hover /*--HIDE FROM IE6--*/ { height: 36px; } ul#nav-bar > li.searchbox-dd:hover div.search-options /*--HIDE FROM IE6--*/ { height: 0px; opacity: 0; } ul#nav-bar > li.searchbox-dd form:hover div.search-options { height: 346px; opacity: 1; } ul#nav-bar > li.searchbox-dd form div.search-options div.dd-container { top: -346px; /*--POSITION OF DROPDOWN BOX BEFORE MOUSEOVER--*/ } ul#nav-bar > li.searchbox-dd form:hover div.search-options div.dd-container { top: 0px; } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CUSTOMIZED STYLES FOR DRODOWN MENUS END HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* GENERAL STYLES FOR FLYOUT MENUS START HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------------------------------- GENERAL STYLING FOR FLYOUT MENUS: HERE GOES COMMON STYLES FOR ALL LEVEL TWO AND LEVEL THREE FLYOUT MENUS. IN ORDER TO CREATE CSS3 TRANSITION INITIALLY WE'LL KEEP THE WIDTH OF FLYOUT MENU "0" AND ON MOUSEOVER WE'LL ASIGN THE REAL WIDTH OF THE MENU. CALCULATE THE WIDTH OF THE FLYOUT MENU AS PER YOUR DESIGN REQUIREMENTS AND APPLY THAT ON MOUSEOVER. YOU CAN CREATE HIGHER LEVELS OF FLYOUT MENUS HERE. JUST CREATE CORRESPONDING CLASS NAMES LIKE "level5", "level6", etc. THEN APPLY SAME STYLE AS "level3" AND "level4" SHOWN BELOW. -------------------------------------------------------------------------------------------------------------------------------------*/ .level2, .level3, .level4 { position: absolute; top: 0px; /*--ASSIGN APPROPRIATE TOP POSITION--*/ left: 184px; /*--WIDTH OF "div.onecol-dd"--*/ background: #f7f7f7; /*--CHANGE BACKGROUND COLOR AS PER YOUR NEEDS--*/ border-top: 1px solid #d1d1d1; /*--CHANGE BORDER COLOR AS PER YOUR NEEDS--*/ height: auto; /*--CHANGE FOLLOWING TWO VALUES ON MOUSEOVER--*/ opacity: 0; width: 0px; /*--ON MOUSEOVER REPLACE WITH ACTUAL WIDTH OF THE FLYOUT MENU--*/ /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px; /*--ADDING SHADOW--*/ -webkit-box-shadow: 1px 0px 1px #d1d1d1, 0px 2px 0px #bebebe, 1px 0px 0px #d1d1d1 inset; -moz-box-shadow: 1px 0px 1px #d1d1d1, 0px 2px 0px #bebebe, 1px 0px 0px #d1d1d1 inset; box-shadow: 1px 0px 1px #d1d1d1, 0px 2px 0px #bebebe, 1px 0px 0px #d1d1d1 inset; /*--ADDING CSS3 SLIDING EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } .level3, .level4 { left: 185px; } div.level2 { overflow: hidden; } /*----------------------------GENERAL STYLES FOR MULTI-LEVEL FLY OUT MENU------------------------*/ ul.level2, ul.level3, ul.level4 { top: -1px; /*--DUE TO TOP BORDER--*/ } ul.level3, ul.level4 { background: #fff; /*--ADDING ROUNDED CORNER--*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.level4 { background: #f7f7f7; } /*--STYLING LIST ITEMS--*/ div.level1 ul > li ul.level2 li { text-align: left; position: relative; height: 35px; width: 0px; /*--CHANGE THIS VALUE TO 184PX ON MOUSEOVER--*/ /*--ADDING CSS3 SLIDING EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } /*--STYLING LINKS--*/ div.level1 ul.level2 li > a { display: inline-block; overflow: hidden; color: #333; font-family: 'Carme', Verdana, Geneva, sans-serif; font-size: 25px; border-top: 1px solid #d9d9d9; height: 34px; width: 0px; /*--CHANGE THIS VALUE TO 184PX ON MOUSEOVER--*/ /*--ADDING CSS3 SLIDING EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } /*--NO BORDER FOR FIRST CHILD--*/ div.level1 ul.level2 li:first-child > a { border-top: none; } div.level1 ul.level2 li > a span { display: inline-block; width: 166px; /*--185 - (10 + 4 + 5) = 166--*/ height: 26px; padding-left: 10px; margin: 4px 4px 3px 5px; /*--ADDING BORDER RADIUS--*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*--CHANGING BACKGROUND ON MOUSEOVER--*/ div.level1 ul.level2 li:hover > a span { color: #fff; font-weight: bold; text-shadow: 0px 1px 1px #000; /*--Gradient--*/ background: url(../images/blue-hover-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#36b5ff), to(#006dac)); /*--For older webkit browsers--*/ background-image: -webkit-linear-gradient(top, #36b5ff, #006dac); /*--For newer webkit and iOS5+--*/ background-image: -moz-linear-gradient(top, #36b5ff, #006dac); /*--For mozilla--*/ background-image: -o-linear-gradient(top, #36b5ff, #006dac); /*--For Opera 11.10+--*/ background-image: -ms-linear-gradient(top, #36b5ff, #006dac); /*--For IE10--*/ } /*--RIGHT ARROW ON FLYOUT MENUS--*/ div.level1 ul.level2 li > a span em { float: right; height: 15px; width: 15px; margin: 5px 10px 0px 0px; background: url(../images/blue-arrow-sprite.png) no-repeat 0px 0px; } /*--CHANGE ARROW DIRECTION ON MOUSEOVER--*/ div.level1 ul.level2 li:hover > a span em { background-position: 0px -23px; } /*--SHOW MULTI-LEVEL FLYOUT MENUS ON MOUSEOVER--*/ div.level1 > ul > li:hover ul.level2, /*--2ND LEVEL FLYOUT MENU--*/ div.level1 ul.level2 > li:hover ul.level3, /*--3RD LEVEL FLYOUT MENU--*/ div.level1 ul.level3 > li:hover ul.level4 /*--4TH LEVEL FLYOUT MENU--*/ { width: 185px; /*--WIDTH 1PX MORE DUE TO INNER SHADOW--*/ opacity: 1; } /*--CHANGE WIDTH OF LIST ITEMS ON MOUSEOVER--*/ div.level1 > ul > li:hover ul.level2 > li, /*--2ND LEVEL FLYOUT MENU LIST--*/ div.level1 ul.level2 > li:hover ul.level3 > li, /*--3RD LEVEL FLYOUT MENU LIST--*/ div.level1 ul.level3 > li:hover ul.level4 > li /*--4TH LEVEL FLYOUT MENU LIST--*/ { width: 185px; } /*--CHANGE WIDTH OF LINKS ON MOUSEOVER--*/ div.level1 ul > li:hover ul.level2 > li > a, /*--2ND LEVEL FLYOUT MENU LIST--*/ div.level1 ul.level2 > li:hover ul.level3 > li > a, /*--3RD LEVEL FLYOUT MENU LIST--*/ div.level1 ul.level3 > li:hover ul.level4 > li > a /*--4TH LEVEL FLYOUT MENU LIST--*/ { width: 185px; } /*------------------------------------------------------------------------------------------------------------------------------------- WIDTH OF TWO COLUMN AND THREE COLUMN FLYOUT MENUS: -------------------------------------------------- WE DECIDED TO KEEP THE BASIC WIDTH OF EACH COLUMN FOR FLYOUT MENUS = 242px (212px + 15px PADDING ON LEFT AND RIGHT SIDE). YOU CAN ALWAYS REPLACE THESE COLUMN WIDTHS WITH YOUR OWN AS PER YOUR REQUIREMENTS. DO NOT FORGET TO OVERRIDE/REPLACE THESE FLYOUT MENU WIDTHS IF YOU HAVE CHANGED THE COLUMN WIDTHS OR IF YOU HAVE VERTICAL BORDERS BETWEEN COLUMNS. FLYOUT MENU WIDTHS: TWO COLUMN FLYOUT MENU: 484PX THREE COLUMN FLYOUT MENU: 726PX FOR PRODUCT FLYOUT WE HAVE CUSTOMIZED THE WIDTH OF FLYOUT MENU. IN THIS FLYOUT MENU WE HAVE THREE COLUMNS AND TWO VERTICAL BORDERS. THEREFORE THE WIDTH SHOULD BE: 726px + 2px = 728px PRODUCT FLYOUT MENU: 728px STYLING OF COLUMNS FOR FLYOUT MENUS: -------------------------------------- WE HAVE CREATED THREE COLUMN WIDTHS FOR THIS TEMPLATE. HOWEVER, YOU CAN CREATE MORE COLUMNS AND ASSIGN CLASS NAMES LIKE "fly-col4", "fly-col5", etc. YOU CAN ALSO CHANGE THE VALUES OF COLUMN WIDTHS AS PER YOUR REQUIREMENTS, FOR EXAMPLE, YOU CAN ARRANGE YOUR COLUMN WIDTHS ACCORDING TO 960GS. CHECK THE FOLDER: "basic template based on 960gs". IF YOU NEED TO USE DIFFERENT COLUMN WIDTHS IN A FLYOUT MENU WHICH DO NOT FOLLOW ANY OF THE BASIC COLUMN WIDTHS THEN YOU CAN CUSTOMIZE THEM WHILE STYLING THAT SPECIFIC FLYOUT MENU. -------------------------------------------------------------------------------------------------------------------------------------*/ .fly-col1, .fly-col2, .fly-col3 { float: left; padding: 0px 15px; padding-bottom: 15px; /*--JUST FOR DEMONSTRATION. CHANGE THIS AS PER YOUR REQUIREMENTS--*/ font: normal 1.1em/17px Verdana, Geneva, Tahoma, sans-serif;/*--JUST FOR DEMONSTRATION. CHANGE THIS AS PER YOUR REQUIREMENTS--*/ } .fly-col1 { width: 212px; /*--1x242 - 30 = 212--*/ } .fly-col2 { width: 454px; /*--2x242 - 30 = 454--*/ } .fly-col3 { width: 696px; /*--3x242 - 30 = 696--*/ } /*------------------------------------------------------------------------------------------------------------------------------------ SLIDING LEFT/RIGHT ANIMATION FOR FLYOUT MENUS: FOR SLIDING LEFT/RIGHT ANIMATION WE NEED TO KEEP THE WHOLE CONTENT INSIDE A CONTAINER AND ANIMATE THE WHOLE DIV. HERE "div.flyout-container" HOLDS ENTIRE CONTENT OF EVERY FLYOUT MENUS (EXCEPT 2 MULTI-LEVEL FLYOUT MENUS) AND WE HAVE APPLIED CSS3 TRANSITION EFFECT TO IT. IN ORDER TO CREATE THIS EFFECT WE NEED TO HIDE THE OVERFLOW OF ".level2"(THAT IS, THE PARENT OF "div.flyout-container"). BUT IF ".level2" CONTAINS MULTI-LEVEL FLYOUT MENU IT NEEDS TO UNHIDE THE OVRFLOW ON MOUSEOVR. THAT IS WHY FOR MULTI-LEVEL FLYOUT MENUS WE HAVE CREATED SIMPLE "ease-in" CSS3 TRANSITION EFFECT. -------------------------------------------------------------------------------------------------------------------------------------*/ .level2 > div.flyout-container { position: relative; /*--ADDING CSS3 SLIDING EFFECT--*/ -webkit-transition: all 400ms ease-in 400ms; -moz-transition: all 400ms ease-in 400ms; -o-transition: all 400ms ease-in 400ms; transition: all 400ms ease-in 400ms; } /*------SHOW/HIDE FLYOUT MENUS ON MOUSEOVER/MOUSEOUT. HERE WE NEED TO ENTER ACTUAL WIDTH OF "div.level2" IN ORDER TO PERFORM CSS3 TRANSITION. CHANGE THESE VALUES AS PER YOUR DESIGN REQUIREMENTS-----*/ div.level1 > ul > li:hover div.level2 { width: auto; /*--REPLACE WITH ACTUAL WIDTH OF THE FLYOUT MENU--*/ opacity: 1; } div.level1 > ul > li:hover div.level2 div.flyout-container { left: 0; } /*-----------------TWO COLUMN FLYOUT----------------*/ div.level1 > ul > li:hover div.two-cols-flyout { width: 484px; /*--ACTUAL WIDTH OF THE FLYOUT MENU--*/ } div.two-cols-flyout div.flyout-container { width: 484px; /*--WIDTH OF "div.two-cols-flyout"--*/ } div.two-cols-flyout > div.flyout-container /*--HIDE FROM IE6--*/ { left: -484px; } /*----------------------THREE COLUMN FLYOUT-------------------*/ div.level1 > ul > li:hover div.three-cols-flyout { width: 726px; /*--ACTUAL WIDTH OF THE FLYOUT MENU--*/ } div.three-cols-flyout div.flyout-container { width: 726px; /*--WIDTH OF "div.three-cols-flyout"--*/ } div.three-cols-flyout > div.flyout-container /*--HIDE FROM IE6--*/ { left: -726px; } /*----------------------PRODUCT FLYOUT-------------------*/ div.level1 > ul > li:hover div.product-flyout { width: 728px; /*--ACTUAL WIDTH OF THE FLYOUT MENU--*/ } div.product-flyout div.flyout-container { width: 728px; /*--WIDTH OF "div.product-flyout"--*/ } div.product-flyout > div.flyout-container /*--HIDE FROM IE6--*/ { left: -728px; } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* GENERAL STYLES FOR FLYOUT MENUS END HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CUSTOMIZED STYLES FOR FLYOUT MENUS START HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* HERE GOES CSS FOR CUSTOMIZED FLYOUT MENUS. YOU CAN SIMPLY CUSTOMIZE EACH OF THESE FLYOUT MENUS OR ADD NEW FLYOUT MENUS AS PER YOUR DESIGN REQUIREMENTS. WE HAVE CUSTOMIZED TWO COLUMN, THREE COLUMN AND ADDED ELECTRONICS FLYOUT MENU AS PER OUR DESIGN PLAN. WE HAVE KEPT PLENTY OF READY MADE OPTIONS IN THESE FLYOUT MENUS SO THAT YOU CAN SIMPLY CHANGE HTML CODES IN ORDER TO ACHIEVE YOUR REQUIREMENTS--*/ /*-------------------------------------------------------TWO COLUMN FLYOUT MENU------------------------------------------------------*/ /*--MODIFYING COLUMN PADDING--*/ div.two-cols-flyout div.fly-col1 { padding: 0px 15px; } /*--ARRANGING TWO TIERS--*/ div.two-cols-flyout div.tier1 { float: left; width: 485px; padding: 11px 0px 15px; border-bottom: 1px solid #cecece; } div.two-cols-flyout div.tier2 { height: 37px; padding: 0px 15px; line-height: 37px; } /*--MODIFYING HEADERS OF TIER ONE--*/ div.two-cols-flyout div.tier1 h2 { padding: 0px; font-size: 1.5em; } /*--TIER ONE: COLUMN ONE--*/ div.two-cols-flyout div.tier1 div.col1 { border-right: 1px solid #cecece; /*--CREATING VERTICAL BORDER BETWEEN COLUMN ONE AND TWO--*/ } div.two-cols-flyout div.tier1 div.col1 ul { margin-left: 12px; /*--IN ORDER TO SHOW LIST MARKERS--*/ } div.two-cols-flyout div.tier1 div.col1 ul li { margin-top: 8px; list-style-type: disc; color: #333; /*--LIST MARKER COLOR--*/ } div.two-cols-flyout div.tier1 div.col1 ul li:hover { color: #1b80e5; } div.two-cols-flyout div.tier1 div.col1 ul li a { color: #1b80e5; font: bold 1.1em/16px Arial, Helvetica, sans-serif; } div.two-cols-flyout div.tier1 div.col1 ul li a:hover { text-decoration: underline; } /*---------TWO COLUMN FLYOUT: TIER ONE-----------*/ div.two-cols-flyout div.tier1 div p { margin-top: 7px; } /*--FLOAT IMAGE ON LEFT. CHANGE DIRECTION AS PER REQUIREMENTS--*/ div.two-cols-flyout div.tier1 div p img { float: left; width: 52px; height: 52px; padding: 3px; border: 1px solid #c6c6c6; background: #fff; margin: 3px 6px 0px 0px; } div.two-cols-flyout div.tier1 div p span { text-transform: uppercase; color: #1b80e5; } /*--RELATERD LINKS--*/ div.two-cols-flyout div.tier1 div div { margin-top: 12px; } div.two-cols-flyout div.tier1 div div h3 { margin-bottom: 4px; text-decoration: underline; } div.two-cols-flyout div.tier1 div div ul { margin: 6px 0px 13px 17px; } div.two-cols-flyout div.tier1 div div ul li { margin-top: 2px; list-style-type: decimal; } div.two-cols-flyout div.tier1 div div ul li a { line-height: 15px; color: #1b80e5; } div.two-cols-flyout div.tier1 div div ul li a:hover { text-decoration: underline; } div.two-cols-flyout div.tier1 div div ul li:hover { color: #1b80e5; } /*--RELATED PRODUCTS--*/ div.two-cols-flyout div.tier1 div div ul.related-products { margin: 6px 0px 0px 0px; } div.two-cols-flyout div.tier1 div div ul.related-products li { float: left; width: auto; margin: 4px 0px 0px 16px; list-style-type: none; } div.two-cols-flyout div.tier1 div div ul.related-products li.first-child { margin-left: 0; } /*--STYLING IMAGE THUMBS--*/ div.two-cols-flyout div.tier1 div div ul.related-products li a { display: inline-block; width: 52px; height: 52px; padding: 3px; border: 1px solid #c6c6c6; background: #fff; } div.two-cols-flyout div.tier1 div div ul.related-products li a:hover { border: 1px solid #9f9f9f; } /*---------TWO COLUMN FLYOUT: TIER TWO-----------*/ div.two-cols-flyout div.tier2 a { margin-right: 10px; color: #1b80e5; text-decoration: underline; } div.two-cols-flyout div.tier2 a:hover { text-decoration: none; } /*-----------------------------------------------------------THREE COLUMN FLYOUT MENU------------------------------------------------*/ /*--MODIFYING COLUMN PADDING--*/ div.three-cols-flyout div.fly-col1 { padding: 0px 15px; } /*--ARRANGING TWO TIERS--*/ div.three-cols-flyout div.tier1, div.three-cols-flyout div.tier2 { float: left; width: 728px; padding: 11px 0px 15px; border-bottom: 1px solid #cecece; } div.three-cols-flyout div.tier2 { clear: left; padding-top: 15px; border-bottom: none; } /*--MODIFYING HEADERS--*/ div.three-cols-flyout div.tier1 h2, div.three-cols-flyout div.tier2 h2 { padding: 0px; font-size: 1.5em; } /*------------THREE COLUMN FLYOUT: TIER ONE-------------*/ div.three-cols-flyout div.tier1 div.col1, div.three-cols-flyout div.tier1 div.col2, div.three-cols-flyout div.tier1 div.col3 { border-left: 1px solid #cecece; /*--CREATING BORDERS BETWEEN COLUMNS--*/ } div.three-cols-flyout div.tier1 div.col1 { border: none; } /*---------TIER ONE: COLUMN ONE--------*/ div.three-cols-flyout div.tier1 div.col1 img { display: inline-block; width: 204px; height: 112px; padding: 3px; border: 1px solid #c6c6c6; background: #fff; margin-top: 10px; } div.three-cols-flyout div.tier1 div.col1 p span { text-transform: uppercase; color: #1b80e5; } div.three-cols-flyout div.tier1 div.col1 a.arrow-right { display: inline-block; color: #1b80e5; margin-top: 5px; } div.three-cols-flyout div.tier1 div.col1 a.arrow-right:hover span { text-decoration: underline; } /*---------TIER ONE: COLUMN TWO--------*/ div.three-cols-flyout div.tier1 div.col2 ul li { float: left; clear: left; width: 212px; margin-top: 6px; } div.three-cols-flyout div.tier1 div.col2 ul li a strong { font-size: 1.1em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #1b80e5; text-decoration: underline; } div.three-cols-flyout div.tier1 div.col2 ul li a strong:hover { text-decoration: none; } div.three-cols-flyout div.tier1 div.col2 ul li p { line-height: 16px; margin-top: 2px; } div.three-cols-flyout div.tier1 div.col2 a.arrow-right { display: inline-block; color: #1b80e5; margin-top: 6px; } div.three-cols-flyout div.tier1 div.col2 a.arrow-right:hover span { text-decoration: underline; } /*---------TIER ONE: COLUMN THREE--------*/ div.three-cols-flyout div.tier1 div.col3 ul li { float: left; clear: left; width: 208px; height: 60px; padding: 1px; margin: 10px 0px 3px; } div.three-cols-flyout div.tier1 div.col3 ul li:hover { width: 210px; padding: 0; background: #e9e9e9; border: 1px solid #e0e0e0; } div.three-cols-flyout div.tier1 div.col3 ul li img { float: left; width: 52px; height: 52px; padding: 3px; border: 1px solid #c6c6c6; background: #fff; margin-right: 6px; } div.three-cols-flyout div.tier1 div.col3 ul li a strong { font: bold 1.1em/16px Arial, Helvetica, sans-serif; color: #1b80e5; } div.three-cols-flyout div.tier1 div.col3 ul li a strong:hover { text-decoration: underline; } div.three-cols-flyout div.tier1 div.col3 a.arrow-right { display: inline-block; color: #1b80e5; margin-top: 6px; } div.three-cols-flyout div.tier1 div.col3 a.arrow-right:hover span { text-decoration: underline; } /*------------THREE COLUMN FLYOUT: TIER TWO-------------*/ div.three-cols-flyout div.tier2 div.col2 { border-left: 1px solid #cecece; /*--CREATING VERTICAL BORDER--*/ } /*---------TIER TWO: COLUMN ONE--------*/ div.three-cols-flyout div.tier2 div.col1 { width: 455px; /*--ADDING 1PX FOR VERTICAL BORDER IN TIER ONE--*/ } div.three-cols-flyout div.tier2 div.col1 div ul { float: left; width: 95px; /*--YOU CAN DIVIDE COLUMN ONE OF TIER TWO INTO FOUR COLUMNS OF 95PX WIDTH--*/ padding-left: 25px; margin-top: 8px; } div.three-cols-flyout div.tier2 div.col1 div ul.first-child { padding-left: 0px; } div.three-cols-flyout div.tier2 div.col1 div ul li { margin-top: 2px; } div.three-cols-flyout div.tier2 div.col1 div ul li a { font-size: 1em; line-height: 1.1; color: #1b80e5; } div.three-cols-flyout div.tier2 div.col1 div ul li a:hover { text-decoration: underline; } /*---------TIER TWO: COLUMN TWO--------*/ div.three-cols-flyout div.tier2 div.col2 div a.tv-thumb { display: inline-block; width: 410px; height: 63px; border: 1px solid #c6c6c6; margin-top: 10px; } div.three-cols-flyout div.tier2 div.col2 div span { display: inline-block; font-size: 1em; line-height: 15px; margin-top: 5px; } div.three-cols-flyout div.tier2 div.col2 div span a { color: #1b80e5; } div.three-cols-flyout div.tier2 div.col2 div span a:hover { text-decoration: underline; } div.three-cols-flyout div.tier2 div.col2 div.tv-schedule a { float: left; width: auto; font-size: 1em; color: #1b80e5; margin-top: 6px; padding: 0px 8px; text-decoration: underline; border-left: 1px solid #cecece; } div.three-cols-flyout div.tier2 div.col2 div.tv-schedule a.first-child { padding-left: 0; border: none; } div.three-cols-flyout div.tier2 div.col2 div.tv-schedule a:hover { text-decoration: none; } /*-------------------------------------------------------PRODUCT FLYOUT MENU---------------------------------------------------------*/ /*--HERE WE'LL CUSTOMIZE STYLES OF COLUMNS AND ITS COMPONENTS. APPLY YOUR CHANGES HERE AS PER REQUIREMENTS--*/ div.product-flyout ul.fly-col3 { padding: 0; clear: left; width: 728px; font-size: 1em; border-top: 1px solid #cecece; text-align: left; } div.product-flyout div.flyout-container > ul.fly-col3:first-child { border-top: none; } div.product-flyout li.fly-col1 { padding: 15px; border-left: 1px solid #cecece; font-size: 1em; text-align: left; } ul.fly-col3 > li.fly-col1:first-child { border-left: none; } div.product-flyout ul li a, div.product-flyout ul li strong, div.product-flyout ul li em, div.product-flyout ul li span { float: left; width: 126px; } /*--STYLING PRODUCT THUMBNAILS--*/ div.product-flyout ul li a.prod-thumb { width: 72px; /*--RESET PREVIOUS "width: 126px"--*/ height: 72px; padding: 3px; margin-right: 6px; border: 1px solid #c6c6c6; background: #fff; } div.product-flyout ul li a.prod-thumb:hover { border: 1px solid #9f9f9f; } div.product-flyout ul li strong { font: bold 1.2em/1 Arial, Helvetica, sans-serif; color: #000; } div.product-flyout ul li em { margin-top: 4px; font: normal 1.1em/13px Verdana, Geneva, Tahoma, sans-serif; } div.product-flyout ul li em b { color: #f00; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; } /*-------------------CHANGING STYLE FOR THIRD LEVEL ELECTRONICS-FLYOUT MENU-------------------*/ ul.electronics-flyout-lvl3 { height: 130px; /*--MENTION HEIGHT FOR SMOOTH CSS3 TRANSITION--*/ overflow: hidden; } /*--RESET GENERAL MULTI-LEVEL MENU STYLE FOR LIST ITEMS--*/ div.level1 ul li ul.electronics-flyout-lvl3 li { float: left; width: 110px; height: 130px; overflow: visible; } /*--RESET GENERAL MULTI-LEVEL MENU STYLE FOR LINKS--*/ div.level1 ul.electronics-flyout-lvl3 li a { display: inline-block; width: 80px; height: 100px; padding: 15px; border: none; } div.level1 ul li ul.electronics-flyout-lvl3 li a b { font-size: 0.9em; } div.level1 ul li ul.electronics-flyout-lvl3 li a:hover b { color: #1b80e5; } /*--APPLY STYLES FOR PRODUCT IMAGES--*/ div.level1 ul.electronics-flyout-lvl3 li a img { float: left; width: 72px; height: 72px; padding: 3px; margin: -3px 0px 6px 0px; border: 1px solid #c6c6c6; background: #fff; } div.level1 ul.electronics-flyout-lvl3 li a img:hover { border: 1px solid #9f9f9f; } div.level1 ul.electronics-flyout-lvl3 li a span { float: left; clear: left; width: 100%; line-height: 1.1; } div.level1 ul.electronics-flyout-lvl3 li a:hover span { text-decoration: underline; } /*--SHOW THIRD LEVEL ELECTRONICS FLYOUT MENU ON MOUSEOVER--*/ div.level1 ul.level2 > li:hover ul.electronics-flyout-lvl3 { width: 440px; /*--SPECIFY THE WIDTH OF THIRD LEVEL ELECTRONICS FLYOUT MENU ON MOUSEOVER--*/ overflow: hidden; } div.level1 ul.level2 > li:hover ul.electronics-flyout-lvl3 li { width: 110px; /*--SPECIFY THE WIDTH OF LIST ITEMS ON MOUSEOVER--*/ } div.level1 ul.level2 > li:hover ul.electronics-flyout-lvl3 li a { width: 80px; /*--SPECIFY THE WIDTH OF LINKS ON MOUSEOVER--*/ } /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* CUSTOMIZED STYLES FOR FLYOUT MENUS END HERE */ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------FOR MOZILLA'S BUTTON BUG------------------*/ button::-moz-focus-inner { padding: 0px; border: none; } /*--OVERRIDES EXTRA PADDING IN FIREFOX FOR BUTTON ELEMENTS--*/