/* Theme Name : Mega Menu Complete Set Author URI : http://themeforest.net/user/Keliah Version : 1.0 */ /* TABLE OF CONTENTS 1. Menu Bar 2. Drop Down Common Container 3. Drop Down Specific Containers 4. Columns Grid 5. Drop Down Typography 6. Colors */ /* _____________________________________________________________________________ 1. Menu Bar _____________________________________________________________________________ */ #menu { list-style:none; width:990px; margin:0 auto; height:36px; position:relative; /*z-index:9999;*/ padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold; color:#FFFFFF; border:solid 1px #000000; background-color: #2E2E2E; } #menu li { float:left; margin:0px 2px 0px 0px; border:none; } #menu li:hover, .active { background:#161616; } #menu li a { font-size:12px; color:#FFFFFF; outline:0; font-weight:bold; text-decoration:none; display:block; padding: 11px 15px; } #menu li:hover a { color:#FFFFFF; } #menu li .drop { padding-right:30px; background:url("../img/down.png") no-repeat right center; } /* Right aligned menu item */ #menu li.right { float:right; margin-right:-1px; } #menu li.right a { margin-right:5px; } /* _____________________________________________________________________________ 2. Drop Down Common Container _____________________________________________________________________________ */ #menu li .dropcontent { margin:0px auto; position:absolute; left:-9999em; top:36px; /* Places the drop down under the menu bar */ z-index:9998; /* For IE7 */ padding:23px 0px 10px 0px; text-align:left; border:1px solid #1b1b1b; border-top:none; background:#161616; /* Rounded Corners */ -moz-border-radius: 0px 0px 4px 4px; -webkit-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } #menu li .dropfirst { margin:0px auto 0px -1px; /* Fixes a 1px issue for the 1st drop down */ } /* Showing Drop Down on Mouse Hover - Left aligned */ #menu li:hover .dropcontent {left:auto;} /* Showing Drop Down on Mouse Hover - Right aligned */ #menu li .align_right {right:-1px;} #menu li:hover .align_right { left:auto; right:-1px; } /* _____________________________________________________________________________ 3. Drop Down Specific Containers _____________________________________________________________________________ */ #menu .drop1column {width: 80px;} #menu .drop2columns {width: 160px;} #menu .drop3columns {width: 240px;} #menu .drop4columns {width: 320px;} #menu .drop5columns {width: 400px;} #menu .drop6columns {width: 480px;} #menu .drop7columns {width: 560px;} #menu .drop8columns {width: 640px;} #menu .drop9columns {width: 720px;} #menu .drop10columns {width: 800px;} #menu .drop11columns {width: 880px;} #menu .drop12columns {width: 960px;} /* _____________________________________________________________________________ 4. Columns Grid _____________________________________________________________________________ */ #menu .col_1, #menu .col_2, #menu .col_3, #menu .col_4, #menu .col_5, #menu .col_6, #menu .col_7, #menu .col_8, #menu .col_9, #menu .col_10, #menu .col_11, #menu .col_12 { display:inline; float: left; position: relative; margin-left: 15px; margin-right: 15px; } #menu .col_1 {width:50px;} #menu .col_2 {width:130px;} #menu .col_3 {width:210px;} #menu .col_4 {width:290px;} #menu .col_5 {width:370px;} #menu .col_6 {width:450px;} #menu .col_7 {width:530px;} #menu .col_8 {width:610px;} #menu .col_9 {width:690px;} #menu .col_10 {width:770px;} #menu .col_11 {width:850px;} #menu .col_12 {width:930px;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* _____________________________________________________________________________ 5. Drop Down Typography _____________________________________________________________________________ */ #menu p, #menu h1, #menu h2, #menu h3, #menu h4, #menu h5, #menu h6 { color:#FFFFFF; } #menu h1, #menu h2 { background:url("../img/menu_separator.jpg") bottom repeat-x; padding-bottom:12px; } #menu h1, #menu h2, #menu h3 { margin-bottom:18px; } #menu h4, #menu h5, #menu h6 { margin-bottom:12px; } #menu h1 { font-size:36px; line-height:36px; } #menu h2 { font-size:30px; line-height:42px; } #menu h3 { font-size:28px; line-height:28px; } #menu h4 { font-size:21px; line-height:24px; } #menu h5 { font-size:18px; line-height:28px; } #menu h6 { font-family:"Lucida Grande","Lucida Sans Unicode",sans-serif; font-size:14px; line-height:18px; text-transform:uppercase; } /* Links */ #menu li .dropcontent a { text-transform:none; font-size:12px; display:inline; padding:0; } #menu li .dropcontent a:hover { padding:0; } /* Images & Boxes */ #menu li .black_box { background-color:#111111; color: #eeeeee; padding:6px 8px 6px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } #menu .imgshadow { background:#000000; padding:4px; border:1px solid #222222; margin-top:5px; margin-bottom:18px; -moz-box-shadow:0px 0px 5px #000000; -webkit-box-shadow:0px 0px 5px #000000; box-shadow:0px 0px 5px #000000; } #menu .img_left { float:left; margin-right:12px; } #menu .img_right { float:right; margin-left:12px; } /* Lists */ #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; padding:0; margin:0; float:none; text-align:left; } #menu li ul li:hover { background:none; border:none; } #menu ul.list, #menu ul.list2, #menu ol.num, #menu ol.num2 { margin:0 0 18px 20px; } #menu ul.list li, #menu ul.list2 li, #menu ol.num li, #menu ol.num2 li{ padding:0 0 0 12px; line-height:24px; } #menu .list { list-style:disc; } #menu .list2 { list-style:square; } #menu .num { list-style:decimal; } #menu .num2 { list-style:upper-latin; } #menu li .dropcontent ul.list li a, #menu li .dropcontent ul.list2 li a, #menu li .dropcontent ol.num li a, #menu li .dropcontent ol.num2 li a { color:#cccccc; } #menu li .dropcontent ul.list li a:hover, #menu li .dropcontent ul.list2 li a:hover, #menu li .dropcontent ol.num li a:hover, #menu li .dropcontent ol.num2 li a:hover { color:#ffffff; } #menu ul.thumbnails li { margin-bottom:18px; } #menu ul.categories { background:url("../img/menu_separator.jpg") top repeat-x; } #menu ul.categories li, #menu ul.categories li:hover { background:url("../img/menu_separator.jpg") bottom repeat-x; padding:9px 0 9px 0; } #menu li .dropcontent ul.categories li a { color:#cccccc; } #menu li .dropcontent ul.categories li a:hover { color:#ffffff; } /* Paragraphs with Icons */ #menu .calendar, #menu .note, #menu .help, #menu .delete, #menu .favorite, #menu .lock, #menu .archive, #menu .briefcase, #menu .search, #menu .user { padding-left:36px; margin-bottom:18px; } #menu .calendar {background:url("../img/icons/calendar.png") no-repeat 0px 5px} #menu .note {background:url("../img/icons/note.png") no-repeat 0px 5px} #menu .archive {background:url("../img/icons/archive.png") no-repeat 0px 5px} #menu .search {background:url("../img/icons/search.png") no-repeat 0px 5px} #menu .help {background:url("../img/icons/help.png") no-repeat 0px 5px} #menu .delete {background:url("../img/icons/delete.png") no-repeat 0px 5px} #menu .favorite {background:url("../img/icons/favorite.png") no-repeat 0px 5px} #menu .lock {background:url("../img/icons/lock.png") no-repeat 0px 5px} #menu .briefcase {background:url("../img/icons/briefcase.png") no-repeat 0px 5px} #menu .user {background:url("../img/icons/user.png") no-repeat 0px 5px} /* Paragraphs with borders */ #menu .dark, #menu .brown, #menu .yellow, #menu .red, #menu .blue, #menu .green { padding-left:15px; color:#cccccc; margin-bottom:18px; } #menu .dark {border-left:#3B3B3B solid 7px} #menu .brown {border-left:#8D8767 solid 7px} #menu .yellow {border-left:#DBA742 solid 7px} #menu .red {border-left:#C05D48 solid 7px} #menu .blue {border-left:#52878B solid 7px} #menu .green {border-left:#B0BD85 solid 7px} /* Tables */ #menu #table_light, #menu #table_dark { width:100%; padding:0; margin:6px 0 18px 0; font-size:12px; } #menu #table_light th, #menu #table_dark th { text-align:left; padding:12px 9px 12px 9px; font-weight:bold; font-size:12px; } #menu #table_light { border:1px solid #cbcbcb; border-bottom:none; } #menu #table_light th { color:#3A3A3A; border-bottom:1px solid #cbcbcb; background:#F5F5F5; } #menu #table_light td { border-bottom:1px solid #cbcbcb; background:#fff; padding:12px 9px 12px 9px; color:#888; } #menu #table_dark { border:1px solid #000; border-bottom:none; } #menu #table_dark th { color:#FFF; border-bottom:1px solid #000; background:#0D0D0D; } #menu #table_dark td { border-bottom:1px solid #000; background:#0F0F0F; padding:12px 9px 12px 9px; color:#DDD; } /* Dropcap */ .dropcap { display:block; float:left; font-size:42px; line-height:36px; margin:2px 8px 0 0; } /* Form Elements */ #menu form { font-size:12px; margin:0; padding:0; width:100%; } #menu legend, #menu label { font-size:12px; letter-spacing:1px; text-transform:uppercase; } #menu input, #menu textarea, #menu select { font-family:Arial,Helvetica,sans-serif; font-size:12px; padding:5px; margin:5px 0 5px 0; background:#f5f5f5; border:1px solid #ddd; border-radius:3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #menu .radio, #menu .checkbox { background:none; border:none; } #menu select { width:260px; } #menu textarea { width:360px; height:110px; } #menu input:hover, #menu textarea:hover { border:1px solid #ccc; } #menu textarea:hover { border:1px solid #BBB; } #menu optgroup { font-style:normal; } #menu .button { margin-right:18px; padding:4px; } #menu .blackbg { background:#000000; } /* _____________________________________________________________________________ 6. Colors _____________________________________________________________________________ */ /* Blue */ #menu.menu_blue li .dropcontent a {color:#FFFFFF;} /* 53% */ #menu.menu_blue li .dropcontent a:hover {color:#DF6300;} /* 43% */