#topnav { /**Blank**/: } ul.DropMenu { list-style: none; margin-top:50px; margin-left: -12px; padding-bottom: 0; padding-left: 25px; position: relative; width: 100%; float: left; text-align: left; background:url(../../../images/Menu_Gradient_Apple.JPG); height:100%; box-shadow: 0px 3px 5px rgba(5,5,5,0.5),0px 0px 0px rgba(2, 2, 2, .5); } .lt-ie9 .DropMenu { /***For lt IE8***/ background: #424a52; text-align: left; } /* *****************To Make two triangles*********************/ .DropMenu:before, .DropMenu:after { content: ""; position: absolute; z-index: -1; /***This is a bug in IE8***/ border-style: solid; border-width: 12px; } .DropMenu:before { border-color:transparent; /**hack for IE8**/ border-color: rgba(144,144,144, .95) rgba(100,100,100, .95) transparent transparent; left: -1px; bottom: -23px; } .DropMenu:after { border-color:transparent; /**hack for IE8**/ border-color: rgba(144,144,144, .95) transparent transparent rgba(100,100,100, .95); right: 0; bottom: -23px; } ul.DropMenu li { position: relative; display: block; float: left; height: 36px; vertical-align:central; } .DropMenu li#form:hover { background: transparent } ul.DropMenu li > a { font: 1.23em/1.6 'Trebuchet MS', sans-serif; text-decoration: none; margin-top:4px; padding-left:9px; padding-right:9px; height:35px; letter-spacing: 0px; display: block; color: rgb(255,255,255); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: medium; } ul.DropMenu li a.arrow_down { background: url(../images/arrow_down.png) no-repeat 88% 40%; text-align: left; padding-right:25px; } .DropMenu > li:hover { background:#FFF; /***For Older Browser*******/ background: rgba(130,130,130, 0.8); margin-top:0px; height:35px; color: #000; } /***================HOME ICON=================***/ .home_icon { width: 27px; height: 28px; padding:0px; top:0px; margin-left: -3px; text-align: left; } /***===================SOCIAL ICON=====================***/ #social li a { float: left; } #social:hover, #social li:hover { background: none } .social_icon { -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; vertical-align: middle; opacity: .8; margin-top: 3px; padding:0px; width: 24px; height: 24px; background: none; } .social_icon:hover { opacity: 1; width: 27px; height: 27px; border-radius: 10px; } /***================================DROP CODING STARTS HERE=====================================***/ /***--------------------Common Code----------------------***/ .left_drop, .nested_left_drop, .right_drop, .one_col_drop, .contact_form { position: absolute; background: #6f6f6f; /***For Older Browser*******/ background: #6f6f6f; box-shadow: -1px 1px 2px rgba(250, 250, 250, .3), 1px 2px 2px rgba(2, 2, 2, .4); top: 45px; visibility: hidden; opacity: 0; -webkit-transition: all .4s ease-out; -moz-transition: all .35s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; } .left_drop ul li, .right_drop ul li { width: 100%; clear: both; height: 36px; } .left_drop ul li a, .right_drop ul li a { font-size: medium; padding: 0px 5px; white-space: nowrap; text-align: left; } .left_drop ul li:hover, .right_drop ul li:hover { background: rgb(130,130,130); box-shadow: inset 0 0 40px 2px rgba(130,130,130,0.8); text-align: left; } /***========================Left Drop (CATEGORY MENU)==========================****/ .left_drop { left: 0; width: 120px; text-align: left; top:36px; } .left_drop ul li { text-align: left } .nested_left_drop { width: 235px; left: 120px; top: 0px; text-align: left; } .left_drop a.arrow_left { background: url(../images/arrow_left.png) no-repeat 93% 35%; text-align: left; vertical-align:middle; } /* **Nested Drop Appear on Hover****/ .left_drop li:hover > .nested_left_drop { opacity: 1; visibility: visible; text-align: left; } /***===========================Right Drop (RIGHT MENU)==============================****/ .right_drop { right: 0; width: 165px; } .right_drop ul li { text-align: right } /* **=======================ONE COL DROPDOWN MENU==========================****/ .one_col_drop { float: left; width: 650px; left: 0; padding: 10px; } .one_col_list_head { font: 400 1.4em/1.3 'Trebuchet MS', sans-serif; color: #f9f9f9; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 1px 1px rgba(3, 3, 3, .7), 0 0 0px rgba(200, 200, 200, .2); width: 100%; text-align: center; margin: 10px 0 5px 0px; padding: 5px 20px; } .col_650 { float: left } .col_650 img { width: 100px; float: left; box-shadow: 0 0 3px 0px rgba(10, 10, 10, .9); height: 60px; opacity: .85; padding: 2px; background: #fff; margin: 10px; } .col_650 p { width: 95%; font: 1.1em/1.5 helvetica, arial; padding: 10px 5px; color: #ddd; text-align:left; word-spacing: 1px; } .lt-ie8 .col_650 p { /**IE7 Hack**/ width:80%; } .col_650 p a.read_more { font-size: 13px; color: rgb(60,147,180); display: inline; white-space: nowrap; padding: 0 8px; text-decoration: none; } .col_650 p a.read_more:hover { text-decoration:underline; } .col_650 img:hover { opacity: 1 } /* **=============================CONTACT FORM================================****/ .contact_form { width: 320px; left: 0; top:36px; } .form_header { font: 500 1.5em/1.4 'Trebuchet MS', sans-serif; color: #fff; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 1px 1px rgba(3, 3, 3, .7), 0 0 0px rgba(200, 200, 200, .2); margin: 10px 20px 5px; } .contact_form #drop_form { margin-left: 20px } .contact_form #drop_form label { float: left; color:#fff; font: 1.16em/1.2 'Trebuchet MS' arial; } .contact_form #drop_form input, #message_box { padding: 3px 3px 3px 3px; width: 250px; display: block; font-size: 13px; margin: 0px 0; font-family: 'Trebuchet MS', sans-serif; border: 1px solid rgba(90, 90, 90, .7); background: rgb(252, 254, 252); } .lt-ie8 .contact_form #drop_form input, .lt-ie8 #message_box { /***IE7 Hack***/ margin-left: -25px; } #message_box { resize: vertical; overflow: hidden; min-height: 60px; } .contact_form #drop_form input:focus, #message_box:focus { outline: none; box-shadow: 0 0 0 2px rgba(120, 120, 120, .52); } #submit_form { float: left; vertical-align: top; } #submit_form input.form_btn { width: 100px; display: block; color: #fff; float: left; font-size: 14px; letter-spacing: 1px; margin: 5px 15px 12px 0px!important; border: none; padding: 5px 6px; border-radius: 0px; background: #0f0e0f; /***For Older Browser***/ background: rgba(13, 12, 11, .75); box-shadow: 0 2px 1px rgba(0, 0, 0, .9); top: 0; } #submit_form input.form_btn:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .9); -webkit-transform: translate(0, 1px); -moz-transform: translate(0, 1px); -ms-transform: translate(0, 1px); -o-transform: translate(0, 1px); vertical-align: top; } /* *************DropDown Appear on Hover for all drops******************/ .DropMenu li:hover > .one_col_drop, .DropMenu li:hover > .left_drop, .DropMenu li:hover > .right_drop, .DropMenu li:hover > .contact_form { visibility: visible; opacity: 1; text-align: left; }