bearshop/static/css/master.css

581 lines
14 KiB
CSS

html{
height: 100%;
width: 100%;
font-size: 100%;
}
@font-face {
font-family: 'Share Tech';
/*src: url('../fonts/Share Tech.ttf');*/
src: url('../fonts/Montserrat-ExtraLight.otf');
}
@font-face {
font-family: 'Share Tech';
/*src: url('../fonts/Share Tech.ttf');*/
src: url('../fonts/Montserrat-SemiBold.otf');
font-weight: bold;
}
body{
/*font-family: 'Share Tech';*/
font-family: 'Roboto Slab', serif;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ed9017+0,f6e6b4+40,f6e6b4+99 */
background: #ed9017; /* Old browsers */
background: -moz-linear-gradient(top, #ed9017 0%, #f6e6b4 40%, #f6e6b4 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ed9017 0%,#f6e6b4 40%,#f6e6b4 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ed9017 0%,#f6e6b4 40%,#f6e6b4 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
margin: 0px 0px;
padding: 0px 0px;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.page_navigation{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
.page_button{
margin: 0px 5px;
padding-bottom:10px;
border:1px solid silver;
color:black;
padding: 0px 6px;
text-align: center;
cursor:pointer;
background-color: rgba(255,255,255,0.5);
}
.page_button:hover{
text-decoration: underline;
}
a{
/*color: white;*/
text-decoration: none;
}
a:visited{
color: blue;
/*text-decoration: none;*/
}
#navigation a{
color: white;
}
#navigation{
width: 100%;
color: white;
background-color: teal;
font-size: 31px;
padding: 5px;
font-weight: bold;
position:fixed;
top: 0px;
box-shadow: 0px 0px 30px black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00437f+27,001159+95,0c1f6d+100 */
background: #00437f; /* Old browsers */
background: -moz-linear-gradient(top, #00437f 27%, #001159 95%, #0c1f6d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00437f 27%,#001159 95%,#0c1f6d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00437f 27%,#001159 95%,#0c1f6d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00437f', endColorstr='#0c1f6d',GradientType=0 ); /* IE6-9 */
}
#navigation ul{
display: inline;
height:30px;
/*float: right;*/
}
#navigation ul li{
padding-left: 15px;
padding-right: 15px;
display: inline;
float: right;
}
#navigation a:hover{
text-decoration: underline;
}
#navigation ul li:hover{
text-decoration: underline;
}
.flashed_messages{
text-align: center;
/*font-style: italic;*/
color: white;
font-size: large;
font-weight: bold;
width: 100%;
background-color: #FFF8DC;
/*border: 1px solid #EAC117;*/
/*color: #966F33;*/
padding: 8px;
background-color: darkviolet;
position: fixed;
top: 30px;
left:0px;
box-shadow: 0px 0px 150px black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f0e6a+0,ad1283+16,7f0e6a+93 */
background: #7f0e6a; /* Old browsers */
background: -moz-linear-gradient(top, #7f0e6a 0%, #ad1283 16%, #7f0e6a 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7f0e6a 0%,#ad1283 16%,#7f0e6a 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7f0e6a 0%,#ad1283 16%,#7f0e6a 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f0e6a', endColorstr='#7f0e6a',GradientType=0 ); /* IE6-9 */
}
#disclaimer{
padding:0px 50px;
color: maroon;
}
#disclaimer h3{
text-decoration: underline;
}
#login_box_background{
max-width: 600px;
max-height: 420px;
padding: 2%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: white;
opacity: .1;
}
#login_box{
color: #222;
font-size: larger;
border-top: 1px solid black;
border-bottom: 1px solid black;
max-width: 600px;
max-height: 420px;
min-height: 200px;
padding: 2%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#vertical{
color: #222;
font-size: large;
border-right: 1px solid black;
border-left: 1px solid black;
max-width: 1250px;
min-width: 600px;
height: 100%;
min-height: 100%;
padding: 2%;
padding-top:20px;
margin: auto;
margin-top: 100px;
margin-bottom: 100px;
}
input{
display: block;
margin:auto;
width: 90%;
height: 40px;
font-size: x-large;
padding: 5px;
}
textarea{
display: block;
margin:auto;
font-size: x-large;
width: 90%;
height: 40px;
padding: 5px;
font-family: 'Share Tech';
}
h1{
text-decoration: italic;
border-bottom: 1px solid white;
}
*[id$="button"]:hover{
box-shadow: 0px 0px 5px gray;
text-decoration: underline;
}
*[id$="link"]:hover{
box-shadow: 0px 0px 5px gray;
text-decoration: underline;
}
*[id$="button"]{
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
*[id$="link"]{
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
#red_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: red;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
#green_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: green;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
}
#blue_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: blue;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
/*vertical-align: middle;*/
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00437f+27,001159+95,0c1f6d+100 */
background: #00437f; /* Old browsers */
background: -moz-linear-gradient(top, #00437f 27%, #001159 95%, #0c1f6d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00437f 27%,#001159 95%,#0c1f6d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00437f 27%,#001159 95%,#0c1f6d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00437f', endColorstr='#0c1f6d',GradientType=0 ); /* IE6-9 */
}
#blue_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: blue;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00437f+27,001159+95,0c1f6d+100 */
background: #00437f; /* Old browsers */
background: -moz-linear-gradient(top, #00437f 27%, #001159 95%, #0c1f6d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00437f 27%,#001159 95%,#0c1f6d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00437f 27%,#001159 95%,#0c1f6d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00437f', endColorstr='#0c1f6d',GradientType=0 ); /* IE6-9 */
}
#teal_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: teal;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
margin: 10px auto;
cursor: pointer;
}
#teal_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: teal;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: pointer;
}
#darkorange_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: darkorange;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
margin: 10px auto;
cursor: pointer;
}
#darkorange_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: darkorange;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7400+0,dd5100+83,ff7400+100 */
background: #ff7400; /* Old browsers */
background: -moz-linear-gradient(top, #ff7400 0%, #dd5100 83%, #ff7400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff7400 0%,#dd5100 83%,#ff7400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff7400 0%,#dd5100 83%,#ff7400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ff7400',GradientType=0 ); /* IE6-9 */
}
#grey_button{
text-transform: uppercase;
text-align: center;
width: 95%;
height: 60px;
background-color: grey;
border: none;
display: block;
font-family: 'Share Tech';
font-size: xx-large;
color: white;
/*vertical-align: middle;*/
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7400+0,dd5100+83,ff7400+100 */
background: #ff7400; /* Old browsers */
background: -moz-linear-gradient(top, #ff7400 0%, #dd5100 83%, #ff7400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff7400 0%,#dd5100 83%,#ff7400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff7400 0%,#dd5100 83%,#ff7400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ff7400',GradientType=0 ); /* IE6-9 */
}
#grey_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: grey;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: not-allowed;
}
#red_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: red;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
#green_button_link{
text-transform: uppercase;
text-align: center;
width: 95%;
color: white;
font-family: 'Share Tech';
line-height: 60px;
background-color: green;
display: block;
font-size: xx-large;
margin: 10px auto;
cursor: pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
}
#sell_box{
font-size: larger;
}
#sell_box p{
padding: 0px 50px;
}
#sell_box img{
vertical-align: middle;
/*display: block;*/
margin: 0 auto;
}
.product{
color: black;
border: 1px solid silver;
text-transform: uppercase;
text-align: center;
padding-bottom: 0px;
/*padding: 0px;*/
/*margin-bottom: 0px;*/
cursor: pointer;
display:inline-block;
/*width: 400px;*/
min-width: 400px;
/*margin: 0px 0px 10px;*/
margin: 10px auto;
background-color: rgba(255,255,255,.5);
}
.product:hover{
text-decoration: underline;
box-shadow: 0px 0px 8px silver;
}
.product img{
vertical-align: middle;
display: block;
background-color: #ececec;
margin: 0 auto;
}
.product h2{
/*padding: 0px;*/
margin: 8px;
}
.product span{
color: darkgreen;
}
::-webkit-input-placeholder {
color: #afafaf;
}
:-moz-placeholder {
color: #afafaf;
opacity: 1;
}
::-moz-placeholder {
color: #afafaf;
opacity: 1;
}
:-ms-input-placeholder {
color: #afafaf;
}
#product_image{
display: block;
margin: 0 auto;
text-align: center;
}