#orbit-bar { top: 0px; left: -10px; right: -10px; height: 40px; z-index: 1041; position: fixed; margin-bottom: 0; } #orbit-bar .orbitlogo { width: 20px; height: 20px; background-size: 70%; display: inline-block; background-position: center; background-repeat: no-repeat; background-image: url(<%= asset_path 'orbit-logo.svg' %>); /* For Suck IE */ background-image: url(<%= asset_path 'orbit-logo.png' %>)\9; } #orbit-bar.navbar .nav > li > a { color: #EEE; text-shadow: 0 -1px 0 #000; border-right: 1px solid #363636; box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar.navbar .nav > li:first-child > a { border-left: 1px solid #363636; box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.3), inset -1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar.navbar .nav > li > a:focus, #orbit-bar.navbar .nav > li > a:hover { background-color: #0095CF; text-shadow: 0 -1px 0 #014380; } #orbit-bar.navbar .nav li.dropdown.open > .dropdown-toggle, #orbit-bar.navbar .nav li.dropdown.active > .dropdown-toggle, #orbit-bar.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: #0095CF; text-shadow: 0 -1px 0 #014380; } #orbit-bar .navbar-inner { height: 40px; border-width: 0; min-height: 40px; background-color: #333333; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.7); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.7); box-shadow: 0 2px 10px rgba(0,0,0,.7); /* Customization Color*/ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#1D1D1D)); background-image: -webkit-linear-gradient(top, #333333, #1D1D1D); background-image: -moz-linear-gradient(top, #333333, #1D1D1D); background-image: -o-linear-gradient(top, #333333, #1D1D1D); background-image: linear-gradient(to bottom, #333333, #1D1D1D); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#1D1D1D', GradientType=0); } #orbit-bar .nav { top: auto; left: auto; right: auto; bottom: auto; } #orbit-bar .nav [class^="icon"], #orbit-bar .nav [class*=" icon"] { font-size: 1.5em; } /*Login*/ #orbit-bar .modal { width: 460px; margin-left: -230px; } #orbit-bar .modal-footer { text-align: center; } #orbit-bar .modal .container { width: 312px; margin-bottom: 0; } #orbit-bar .modal [class^="icon"], #orbit-bar .modal [class*=" icon"] { font-size: 1em; color: #8D8D8D; } #orbit-bar .modal .input-append, #orbit-bar .modal .input-prepend { margin-bottom: 15px; } #orbit-bar .modal .other-sign-in { position: relative; text-align: center; margin-top: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #EDEDED; } #orbit-bar .modal .other-sign-in .btn { padding: 4px 0; display: block; margin-bottom: 5px; width: 100%; } #orbit-bar .modal .other-sign-in p { position: absolute; width: 30px; height: 30px; background-color: #FFF; padding: 0 10px; margin-bottom: 0; margin-left: -25px; line-height: 30px; left: 50%; bottom: -15px; font-size: 1.3em; color: #B1B1B1; } /*Search*/ #orbit-bar #search { margin-bottom: 0; position: relative; padding: 8px 10px 0; border-right: 1px solid #363636; box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar #search form { margin-bottom: 8px; } #orbit-bar #search input[type="text"] { height: 14px; line-height: 15px; font-size: 13px; padding-left: 25px; padding-right: 25px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; /* For Suck IE */ line-height: 16px\9; } #orbit-bar #search .icon-search, #orbit-bar #search .search-clear { position: absolute; color: #A3A3A3; top: 14px; } #orbit-bar #search .icon-search { left: 13px; top: 15px; font-size: 1.2em; } #orbit-bar #search .search-clear { right: 14px; font-size: 1.3em; } #orbit-bar #search .search-clear:hover { color: #333; cursor:pointer; } /*User info*/ #orbit-bar #orbit-user .user-pic { width: 40px; height: 40px; margin: -12px 10px -10px -15px; } /*Language & flag*/ #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { background-image: url(<%= asset_path 'flag.png' %>); background-repeat: no-repeat; background-color: transparent; display: inline-block; margin: -8px 0 -8px -5px; width: 24px; height: 24px; } #orbit-bar #orbit-language .dropdown-menu [class^="flag-"], #orbit-bar #orbit-language .dropdown-menu [class*=" flag-"] { margin: -8px 10px -8px 0px; } .flag-bg {background-position: 0px 0px;} .flag-cs {background-position: -24px 0px;} .flag-da {background-position: -48px 0px;} .flag-de {background-position: -72px 0px;} .flag-en {background-position: 0px -24px;} .flag-es {background-position: -24px -24px;} .flag-fi {background-position: -48px -24px;} .flag-fr {background-position: -72px -24px;} .flag-hr {background-position: 0px -48px;} .flag-id {background-position: -24px -48px;} .flag-is {background-position: -48px -48px;} .flag-it {background-position: -72px -48px;} .flag-ja {background-position: 0px -72px;} .flag-kr {background-position: -24px -72px;} .flag-lt {background-position: -48px -72px;} .flag-lv {background-position: -72px -72px;} .flag-ms {background-position: 0px -96px;} .flag-nb {background-position: -24px -96px;} .flag-nl {background-position: -48px -96px;} .flag-pl {background-position: -72px -96px;} .flag-pt-BR {background-position: 0px -120px;} .flag-pt {background-position: -24px -120px;} .flag-ro {background-position: -48px -120px;} .flag-ru {background-position: -72px -120px;} .flag-sk {background-position: 0px -144px;} .flag-sl {background-position: -24px -144px;} .flag-sr {background-position: -48px -144px;} .flag-sv {background-position: -72px -144px;} .flag-th {background-position: 0px -168px;} .flag-tr {background-position: -24px -168px;} .flag-zh-CN {background-position: -48px -168px;} .flag-zh-TW {background-position: -72px -168px;} /* For Retina */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { background-image: url(<%= asset_path 'flag@2x.png' %>); background-size: 96px 192px; } } /* Responsive */ @media (max-width: 480px) { #orbit-bar .navbar-inner .nav { margin-right: 0; } #orbit-bar #orbit-user span, #orbit-bar #search { display: none; } #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { margin: -8px; } #orbit-bar #orbit-user .user-pic { margin: -12px -15px -10px -15px; } #orbit-bar .modal { width: 350px; margin-left: -175px; } }