@import url(http://fonts.googleapis.com/css?family=Open+Sans); /*body { background-color: #eee; background-image: url(../images/patterns/light_toast.png); color: #666; font-family: 'Open Sans', sans-serif; font-size: 12px; margin:0px; padding:0px; } */ @font-face { font-family: 'PSLKittithadaSP'; src: url('fonts/PSLKittithadaSP/PSL094SP.TTF'); } a { color: #f92f00; text-decoration: none; } a:hover { color: #000; } ol, ul { list-style: none; padding:0px; margin:0px; } #wrap { margin: 0 auto; } .inner { margin: 0 auto; max-width: 940px; padding: 0 0px; } .relative { position: relative; } .right { float: right; } .left { float: left; } /* HEADER */ #wrap > header { /* background-color: #333; */ padding-bottom: 20px; } .logo { display: inline-block; font-size: 0; padding-top:10px; } #navigation { position: absolute; right: 20px; bottom: 0px; } #menu-toggle { display: none; float: right; } /* HEADER > MENU */ #main-menu { float: right; font-size: 0; margin: 5px 0; } #main-menu > li { display: inline-block; margin-left: 17px; padding: 2px 0; } #main-menu > li.parent { background-image: url(../images/plus-gray.png); background-size: 7px 7px; background-repeat: no-repeat; background-position: left center; } #main-menu > li.parent > a { padding-left: 14px; } #main-menu > li > a { font-family: PSLKittithadaSP,Verdana, Geneva, sans-serif; font-size:18pt; font-weight:bold; letter-spacing:1px; color: #131313; line-height: 14px; padding: 30px 0; text-decoration:none; } #main-menu > li:hover > a, #main-menu > li.current-menu-item > a { color: #f92f00; } /* HEADER > MENU > DROPDOWN */ #main-menu li { position: relative; } ul.sub-menu { /* level 2 */ display: none; left: 0px; top: 38px; padding-top: 10px; position: absolute; width: 150px; z-index: 9999; } ul.sub-menu ul.sub-menu { /* level 3+ */ margin-top: -1px; padding-top: 0; left: 149px; top: 0px; } ul.sub-menu > li > a { background-color: #333; border: 1px solid #444; border-top: none; color: #bbb; display: block; font-size: 12px; line-height: 15px; padding: 10px 12px; } ul.sub-menu > li > a:hover { background-color: #2a2a2a; color: red; } ul.sub-menu > li:first-child { border-top: 3px solid #f92f00; } ul.sub-menu ul.sub-menu > li:first-child { border-top: 1px solid #444; } ul.sub-menu > li:last-child > a { border-radius: 0 0 2px 2px; } ul.sub-menu > li > a.parent { background-image: url(../images/arrow.png); background-size: 5px 9px; background-repeat: no-repeat; background-position: 95% center; } #main-menu li:hover > ul.sub-menu { display: block; /* show the submenu */ } @media all and (max-width: 100px) { #navigation { position: static; margin-top: 20px; } #menu-toggle { display: block; } #main-menu { display: none; float: none; } #main-menu li { display: block; margin: 0; padding: 0; } #main-menu > li { margin-top: -1px; } #main-menu > li:first-child { margin-top: 0; } #main-menu > li > a { background-color: #333; border: 1px solid #444; color: #bbb; display: block; font-size: 14px; padding: 12px !important; padding: 0; } #main-menu li > a:hover { background-color: #444; } #main-menu > li.parent { background: none !important; padding: 0; } #main-menu > li:hover > a, #main-menu > li.current-menu-item > a { border: 1px solid #444 !important; color: #000 !important; } ul.sub-menu { display: block; margin-top: -1px; margin-left: 20px; position: static; padding: 0; width: inherit; } ul.sub-menu > li:first-child { border-top: 1px solid #444 !important; } ul.sub-menu > li > a.parent { background: #333 !important; } }