Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need help with making my HTML fit all screen resolutions. I'd be glad if someone could help, I'll upload root folder. I've tried to make changes but it wont work.
Tried few different resolutions and it works only on 1920x1080 res.
Thanks
.html
{
background-color: #E6E6E6;
}
#page
{
z-index: 1;
width: 1000px;
min-height: 585px;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #E6E6E6;
background-color: #E6E6E6;
padding-bottom: 61px;
margin-left: auto;
margin-right: auto;
}
#pu27090
{
width: 0.01px;
padding-bottom: 0px;
position: relative;
margin-right: -10000px;
margin-top: 9px;
left: -54px;
}
#u27090
{
z-index: 24;
width: 217px;
margin-left: 52px;
position: relative;
}
#slideshowu5115
{
z-index: 2;
width: 0.01px;
height: 412px;
margin-top: 45px;
position: relative;
}
#u5142
{
position: absolute;
width: 1032px;
height: 412px;
background-color: transparent;
left: 38px;
}
#u5142popup
{
z-index: 3;
}
#u5143
{
z-index: 4;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5190
{
z-index: 6;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u13904
{
z-index: 8;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5208
{
z-index: 10;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5217
{
z-index: 12;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5226
{
z-index: 14;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5235
{
z-index: 16;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5143_clip,#u5190_clip,#u13904_clip,#u5208_clip,#u5217_clip,#u5226_clip,#u5235_clip
{
overflow: hidden;
width: 1032px;
height: 412px;
}
#u5143_img,#u5190_img,#u13904_img,#u5208_img,#u5217_img,#u5226_img,#u5235_img
{
margin-left: -3px;
margin-right: -3px;
}
#u5139-3
{
position: absolute;
width: 15px;
min-height: 20px;
border-style: none;
border-color: transparent;
padding: 10px;
line-height: 20px;
text-align: center;
color: #999999;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
top: 173px;
background: transparent url("../images/levo.png") no-repeat left top;
}
#u5139-3popup
{
z-index: 18;
}
#u5135-3
{
position: absolute;
width: 15px;
min-height: 20px;
border-style: none;
border-color: transparent;
padding: 10px;
line-height: 20px;
text-align: center;
color: #999999;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
top: 173px;
left: 1073px;
background: transparent url("../images/desno.png") no-repeat left top;
}
#u5135-3popup
{
z-index: 21;
}
.SSSlideLoading /* slideshowFreeStyle */
{
background: url("../images/loading.gif") no-repeat center center;
}
#menuu27092
{
z-index: 26;
width: 585px;
position: relative;
margin-right: -10000px;
margin-top: 62px;
left: 230px;
}
#u27093
{
width: 130px;
min-height: 31px;
position: relative;
margin-right: -10000px;
}
#u27096
{
width: 130px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27096.MuseMenuActive
{
border-style: none;
border-color: transparent;
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27098-4
{
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27098-4_clip
{
overflow: hidden;
width: 42px;
height: 17px;
vertical-align: top;
}
#u27098-4_img
{
display: block;
}
#u27127
{
width: 161px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 132px;
}
#u27128
{
width: 161px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27128:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27130
{
height: 17px;
width: 73px;
vertical-align: top;
background: url("../images/u27130.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27128.MuseMenuActive #u27130
{
background: url("../images/u27130-a.png") no-repeat 0px 0px;
}
#u27120
{
width: 135px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 295px;
}
#u27123
{
width: 135px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27128:active,#u27123:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27124
{
height: 17px;
width: 48px;
vertical-align: top;
background: url("../images/u27124.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 43px;
}
#u27123.MuseMenuActive #u27124
{
background: url("../images/u27124-a.png") no-repeat 0px 0px;
}
#u27113
{
width: 153px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 432px;
}
#u27116
{
width: 153px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27123:active,#u27116:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27116:active
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27117
{
height: 17px;
width: 65px;
vertical-align: top;
background: url("../images/u27117.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27116.MuseMenuActive #u27117
{
background: url("../images/u27117-a.png") no-repeat 0px 0px;
}
.SSFirstButton,.SSPreviousButton,.SSNextButton,.SSLastButton,.SSSlideLink,.SSCloseButton,.MenuItem /* slideshowFreeStyle */
{
cursor: pointer;
}
body
{
padding-top: 35px;
}
#page .verticalspacer
{
clear: both;
}
if you are trying to make it fit in all the screen sizes. always use media queries.
Something like this will easy for you. its clean and simple
/* Tablet Landscape */
#media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
The easiest way to make your page fit all screens would be to use media queries which set specific rules depending on the width of the screen. Media queries are the magic behind responsive website design. I would suggest ready more about media queries and also you can use the query template below.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
I'm trying to add a kind of offset border to my img using z-index:-1. Using z-index:1 i get the border displayed on top and using z-index:-1 the border doesn't appear. I searched why could this happen and the most common answer was that positioning was missing and i have a position realtive in the div and position absolute on after. And i have position relative on my parent div and absolute in my after. I tried instead of using after making the outside border another div but doing this makes the image "dissapear".
Here is how the image looks with z-index:1
And how it looks with z-index:0
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div className="styled-pic">
<img
className="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
Adding z-index:2 to the styled-pic class fixes it.
Final result:
.styled-pic {
position: relative;
max-width: 300px;
z-index: 2;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
I think you want to create something like this. Wait for a while I will upload the solution slowly.
code pen
https://codepen.io/ash_000001/pen/vYWdEjW?editors=1100
body {
background: pink;
padding: 30px;
}
.about-image{
height: 165px;
width: 275px;
}
div {
background: white;
height: 165px;
width: 275px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div><img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img></div>
See the modified code snippet below.
Added position: absolute; to the .about-image itself, so it preserves the context with the other absolute-positioned element (i.e. ::after pseudo element.)
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 0;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 300px;
object-fit: cover;
margin-top: 22px;
z-index: 3;
}
<div class="styled-pic">
<img class="about-image" src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg" />
</div>
Try this below code
body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 10;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 0;
left: -2px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div class="styled-pic">
<img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
I have made my website in Bootstrap Studio with HTML and CSS
This is what my website looks like on PC:
I have tried to use #media to scale a box up when it is viewed on mobile:
.container_a {
text-align: left;
padding: 0px;
padding-left: 0px;
margin: 0px;
padding-right: 0px;
color: #fafafa;
background: #000000;
padding-bottom: 0px;
border: 2.4px solid #999;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
height: 33%;
width: 30%;
}
.container_a {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#media (min-width: 768px) {
container_a {
text-align: left;
padding: 0px;
padding-left: 0px;
margin: 0px;
padding-right: 0px;
border-radius: 10 px;
color: #fafafa;
background: #000000;
padding-bottom: 0px;
border: 2.4px solid #999;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
height: 33%;
width: 30%;
}
}
#media (min-width: 320px) and (max-width: 768px) {
container_a {
width: 80%;
height: 35%;
}
}
But it doesn't work:
Why does it not work?
This does not answer your question, since it's typo related and will be closed, but you can really reduce your CSS to something more manageable since you have a bunch of redundant code:
.container_a {
text-align: left;
padding: 0;
margin: 0;
color: #fafafa;
background: #000000;
border: 2.4px solid #999;
/* Shorthand for border-radius */
border-radius: 7px 7px 0 0;
position: absolute;
top: 50%;
left: 50%;
/* combine into the translate shorthand */
transform: translate(-50%, -50%);
/* Put your mobile styles here */
width: 80%;
height: 35%;
}
#media (min-width: 768px) {
.container_a {
/* Only add the properties that change */
height: 33%;
width: 30%;
}
}
I'm trying to make like tablet with iframe. (Demo: http://tab.vn-rp.cz/). In some resolution it look fine, but when I drag window and start chaning resolutions, it get worse and iframe gets out of svg border around. I just have an ugly code below:
/*iPhone4 iframe*/
html, body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
#media only screen and (max-height: 1000px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 60%;
margin: auto;
position: relative;
}
#browser {
height: 85.8%;
width: 96%;
position: absolute;
top: 2.4%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (min-height: 1000px) and (max-height: 1070px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 65%;
margin: auto;
position: relative;
}
#browser {
height: 75.2%;
width: 96%;
position: absolute;
top: 2%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (min-height: 1070px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 60%;
margin: auto;
position: relative;
}
#browser {
height: 76.9%;
width: 96%;
position: absolute;
top: 2.2%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (max-height: 1000px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 825px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 830px;
margin-left: 300px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 830px;
margin-left: 550px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 833px;
margin-left: 800px;
}
}
#media only screen and (min-height: 1000px) and (max-height: 1070px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 782px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 790px;
margin-left: 240px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 790px;
margin-left: 520px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 790px;
margin-left: 785px;
}
}
#media only screen and (min-height: 1070px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 825px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 830px;
margin-left: 300px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 830px;
margin-left: 550px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 833px;
margin-left: 800px;
}
}
-- HTML Code
<body>
<br>
<br>
<div id="iphone4" class="w3-animate-bottom">
<iframe name="browser" id="browser" src="http://tab.vn-rp.cz/page.html"></iframe>
<img class="panilek" src="http://tab.vn-rp.cz/panilek.svg" />
<img onClick="back();" style="cursor:pointer;" class="back" src="http://tab.vn-rp.cz/leftbutton.svg" />
<img onClick="$('#browser').attr('src', 'http://tab.vn-rp.cz/page.html');" style="cursor:pointer;" class="home" src="http://tab.vn-rp.cz/homebutton.svg" />
<img onClick="$('#browser').attr('src', 'https://www.google.com/webhp?igu=1');" style="cursor:pointer;" class="right" src="http://tab.vn-rp.cz/rightbutton.svg" />
</div>
<script>
var canback = false;
function back(){
if(canback){
window.history.back();
}
}
window.onmessage = function(e){
if(e.data == "home"){
canback = false;
}
else if(e.data == "app"){
canback = true;
}
else {
alert("'" + e.data + "'");
}
};
</script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</body>
Is there some more efficient way to do it? If so, I will be so happy! Have a nice day all!
Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}
I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}
I have a web page: http://www.svaspasalon.com/construct2/index.html my issue is that when I load my style sheet the back part such as the image and the page load fine and dont have an issue however the middle element ( the black transparent background text and email reminder) always moves when I load it on different screens, e.g. my laptop and my desktop at home. how can I get the element to not move and also move the Sva Spa Salon and the element to the center of the page.
CSS:
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p ,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-
spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-
weight:normal;}li{list-style:none;}caption,th{text-
align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
html,body{
width:1080px;
height:1920px;
position: fixed;
}
body{
margin:0 auto;
padding:0;
background:#2a1a10;
font-family:"Helvetica Neue",Helvetica, Arial;
font-size: 100%;
}
/*
div#shim{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: 375px;
float: left;
position: relative;
}
*/
.fadein {
position: fixed;
max-width: 100%;
width: 100%;
min-width: 500px;
z-index:-1;
}
.fadein img {
position:fixed;
max-width: 100%;
width: 70%;
min-width: 500px;
height: 80%;
margin-top: 90px;
margin-left: 255px;
}
/*
div#content {
width: 100%;
height: 160px;
margin: 0 auto;
background: url(../images/content_bg1.png) left bottom repeat-x;
float: left;
position: relative;
top: -80px; */
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
.logo{
width: 78.125%;
/* width: 800px; */
margin: 0 auto;
}
h1{
font-size: 36px;
color: #C5953b;
margin-bottom: 19px;
letter-spacing: -2px;
font-weight: 1000;
text-shadow:-2px -2px 2px #fff, 2px 2px 2px #000;
text-transform: uppercase;
text-align: center;
}
h2{
padding: 0px 3px;
line-height: normal;
background: #fff;
font-size: 16px;
font-weight: 700;
float: left;
text-transform: uppercase;
}
h1 span{
font-weight: 500;
}
.clear{
clear: both;
}
.right_side{
width: 85%;
/* width: 940px; */
margin: 0 auto;
}
.right_content{
width: 100%;
/* width: 920px; */
background: url(../images/blackish.png) repeat;
height: 50px;
padding: 23px 0 23px 40px;
font-family:Candara;
}
.right_content h2{
margin-top: 12px;
margin-right: 60px;
}
form.email{
padding: 0;
margin: 10px 0 0 0;
width: 204px;
float: left;
}
/*.get_notified{
width: 144px;
line-height: normal;
background: url(../images/field.png) left top no-repeat;
font-family:Candara;
font-size: 11.4px;
color: #FF0000;
border: none;
padding: 7px 10px;
margin-right: 6px;
float: left;
font-weight: 200;
letter-spacing:0.4px;
}
*/
.go{
padding: 10px;
margin: 0 auto;
width: 34px;
height: 28px;
border: none;
background: url(../images/go.png) left top no-repeat;
}
.go:hover{
background: url(../images/go.png) left bottom no-repeat;
cursor: pointer;
}
html, body {
min-width: 1080px; /* width: 1080px; */
/* height: 1920px; */
/*position: fixed;*/
}