old-ribica/front-ui/app/css/main.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic);
/* site  */
html {
overflow-y: scroll;
}
body{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100%  ;
background-size: cover  ;
background-position: center ;
background-repeat: no-repeat;
font-family: 'Roboto', sans-serif;
}
#left-nave {
background: blue;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;
}
.beba{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-size: cover;
}
html, body { height: 100%; width: 100%; margin: 0; }
h1 h2 h3 h4 h5{
font-family: 'Roboto', sans-serif;
}
.col-centered{
float: none;
margin: 5% auto;
}
.mybutton{
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.mybutton:hover  {
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
margin-top: 8px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.add-to-cart-button {
background-color: #00a8a8;
padding: 6px 11px !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
.add-to-cart-button:hover  {
background-color: #06c3c3 !important;
padding: 6px 11px !important;
color: black !important;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff !important;
}
a{
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.mynav li{
display: inline-block;
}
.mynav {
margin-top: 6px;
text-align: center;
}
.mynav a{
text-decoration: none;
color: black;
}
.mynav a:hover{
text-decoration: none;
color: #06c3c3;
}
.mytopnav li a{
text-decoration: none;
color: black;
}
.mytopnav li a:hover{
text-decoration: none;
color: #06c3c3;
background: none;
}
.mynav li .mybutton {
background-color: #00a8a8;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
}
.mynav li .mybutton:hover  {
background-color: #06c3c3;
padding: 4px 10px !important;
margin-top: 6px;
display: block;
border-radius: 3px;
border: solid #06c3c3 1px;
color: #ffffff;
}
.productbox{
cursor: pointer;
-moz-box-shadow: 1px 2px 2px #cccccc;
-webkit-box-shadow: 1px 2px 2px #cccccc;
box-shadow: 1px 2px 2px #cccccc;
height: auto;
background-color: rgba(255, 255, 255, 0.6);
margin-top: 10px;
margin-bottom: 35px;
}
.productbox img{
height: auto;
border-bottom: solid gray 1px;
width: 100%;
}
.productbox div{
padding: 4px 10px;
}
.productbox a{
color: black;
text-decoration: none;
}
.productbox a:hover{
color: black;
text-decoration: none;
text-decoration: underline;
}
.productbox div span{
color: black;
}
#beba{
padding-left: 45px;
padding-right: 45px;
margin-left: -23px;
margin-right: -23px;
}
#beba:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#dijete:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/dijete-bg_gff80o.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#dijete:hover a{
color: white;
}
#mama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/mama-bg_rqbnuo.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#mama:hover a{
color: white;
}
#madeinbih:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#madeinbih:hover a{
color: white;
}
#onama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#onama:hover a{
color: white;
}
#marka:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/marka-bg_cy8hpe.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#marka:hover a{
color: white;
}
#akcija:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/akcija-bg_xtawus.png");
background-position:  center ;
background-size: 100% 100%;
color: white;
background-repeat: no-repeat;
}
#akcija:hover a{
color: white;
}
.mydropdown li:hover .sub-menu {
visibility: visible;
display: block;
}
.mydropdown:hover .dropdown-menu {
display: block;
visibility: visible;
}
.navbar-default{
color: black;
background-color: white;
border-color: lightgray;
}
.navbar-default .navbar-nav > li > a{
color:black;
}
.navbar-default .navbar-nav > li{
padding-left:  16px;
padding-right:  16px;
}
.navbar-default .navbar-nav > li > a:focus{
background-color: rgba(255, 255, 255, 0.6) !important;
-moz-box-shadow:  0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
border: none !important;
border-radius: 2px;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
color:#fff;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:94%;
margin-left: 3%;
border-top: none !important;
-moz-box-shadow:  0px 1px 2px #999;
-webkit-box-shadow: 0px 1px 2px #999;
box-shadow: 0px 1px 2px #999;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
padding-left: 10px;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: black;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
.dropdown-header p {
border-bottom: solid 1.5px lightgray !important;
margin-bottom: 2px;
text-transform: uppercase;
color: black;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 16px;
}
.mycart{
position: absolute;
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/cart-icon_p9u63r.png");
background-position:  center center;
background-size: cover;
background-repeat: no-repeat;
width: 42px;
height: 44px;
padding-bottom: 0px;
right:-14px;
bottom: -15px;
text-align: right;
}
.mycart div {
text-align: right;
}
.mycart span{
position: absolute;
left: 13.4px;
top: 4px;
color: #ffffff;
}
.mycart span:hover{
color: white;
}
#myhome{
border-bottom: solid #06c3c3 1px;
}
#myhome-hover:hover  {
border-bottom: solid #06c3c3 1px;
}
.sidebar ul{
list-style: none;
}
.sidebar li{
margin-left:10px;
margin-bottom: 5px;
color:black;
padding: 10px;
border-bottom: solid 1px lightgray;
}
.sidebar li a{
text-decoration: none;
color:black;
}
.sidebar li a:hover{
color:#06c3c3;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}
@media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
border-top:none !important;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>ul {
margin-bottom:  0px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.error-message {
color: red;
}
.white_button{
background-color: #f9f9f9;
width: 40px;
height: 40px;
padding-bottom: 7px;
/*display: block;*/
border-radius: 1px;
margin-top: 8px;
border: solid #cccccc 1px;
color: #4d4d4d !important;
font-size: 16px;
}
.search-box {
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
padding-left: 10px;
padding-right: 10px;
}
.search-button {
background-color: #f9f9f9;
color: #31b8b8;
border: 1px solid #cccccc;
border-radius: 0px;
margin-left: 5px;
}
.qty-box {
background-color: #efefef;
border-radius: 0px;
border: 1px solid #cccccc;
}
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
}
.cart-title {
font-size: 29px;
color: #06c3c3;
}

.footer {
text-align: center;
width: 100%;
bottom: 20px;
margin-bottom: 20px;
}

.message {
font-size: 130%;
text-align: left;
margin-left: 20px;
margin-right: 20px;
}

.payment {
box-sizing: border-box;
color: rgb(102, 102, 102);
display: block;
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 36px;
line-height: 18.2px;
width: 708px;
word-wrap: break-word;
}

.message { 
  font-size: 130%;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px; 


}

.normal-message { 
  text-align: left;
  margin-left: 20px;
  margin-right: 20px; 


}