* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width:100%; height:100%; }
body { font-family:Helvetica, Arial, sans-serif; width:100%; height:100%; font-size:70%; }


a {
    color:#000;
    background:#FFF !important;	
    display:block;
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;    
    text-decoration:none;    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    border: 1px solid black;
}

h1 {
    color:#000;
    position:absolute;
    font-weight: bolder;
    background-color: #fff;
}

h2 {
    background:#fff38c;
    background-image: linear-gradient(bottom, rgb(196,139,96) 0%, rgb(255,244,140) 95%);
    background-image: -o-linear-gradient(bottom, rgb(196,139,96) 0%, rgb(255,244,140) 95%);
    background-image: -moz-linear-gradient(bottom, rgb(196,139,96) 0%, rgb(255,244,140) 95%);
    background-image: -webkit-linear-gradient(bottom, rgb(196,139,96) 0%, rgb(255,244,140) 95%);
    background-image: -ms-linear-gradient(bottom, rgb(196,139,96) 0%, rgb(255,244,140) 95%);
    background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(196,139,96)),
		color-stop(0.95, rgb(255,244,140))
    );
    color:#000;
    width:100%;
    font-style: italic;
    position:absolute;
    font-weight:normal;
    /*
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -ms-border-bottom-left-radius:5px;
    -o-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -ms-border-bottom-right-radius:5px;
    -o-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    */
}

h3 { position: absolute; }

img { position:absolute; -webkit-box-shadow:0 0 4px 4px #000000; -moz-box-shadow:0 0 4px 4px #000000; -ms-box-shadow:0 0 4px 4px #000000; -o-box-shadow:0 0 4px 4px #000000; box-shadow:0 0 4px 4px #000000; }



/* half banner,button2,full banner */
@media only screen and (height:60px) {
  h1 { width:100%; height:40px; line-height:16px; top:1px; left:0; font-size:12px; text-align:center; }
  h1 span { display:block; }
  h2 { display:block; height:20px; line-height:20px; padding:0 4%; left:0; bottom:0; text-align:center; font-size:12px; }
  div { font-size:10px; }
  h3,img { display:none; }
  .transparent { display: none; }
 .quantity { display: none; }
}

@media only screen and (height:60px) and (width: 120px) {
  h1 { line-height:11px !important; }
  h2 span { font-size: 9px; }
  #buttonTwo { display: block !important; }
}

@media only screen and (height:60px) and (width: 234px) {
  h1 { line-height:16px; }
  #halfBanner { display: block !important; }
}

/* button 2 */
@media only screen and (height:60px) and (width:120px) {
 div { font-size:9px; }
}

/* full banner */
@media only screen and (height:60px) and (width:468px) {
 h1 { width:92%; left:1%; text-align:left; font-size:12px; height:40px; line-height:14px; top:1px; }
 h1 span { display:inline; }		
 h2 { left:0; font-size: 12px; text-align:left; height:22px; padding-left: 1%; }
 h3 { display:  block; top: 40px; right: 100px; font-size: 12px; }
 h3 span { color: #fff !important; }
 div { font-size:12px; }
 .showNewLine { display: block; }
 .dealTitle { display: inline; }
 .merchantName { display: none;}
 img { display:block; width:auto; right:1%; height: 50px; top: 5px; position: absolute; }
 .transparent { display: none; }
 .quantity { display: none; }
 .dealTitle { display: inline !important; font-size: 8px !important; }
 .merchantName { display: none !important; }
 .quantitySmall { display: inline !important; padding-left: 10px; }
 #fullBanner { display: block !important; }
}

/* vertical banner */
@media only screen and (height:600px) and (width:160px) {
 h1 { width:92%; left:1%; text-align:center; font-size:36px; top:110px; }
 h1 span { display:inline; }		
 h2 { left:0; top:570px; font-size: 13px; text-align:left; height:22px; padding-left: 1%; }
 h3 { display:  none !important; }
 div { font-size:12px; }
 .showNewLine { display: block; } 
 .merchantName { display: inline; font-size: 17px;}
 img { display:block; width:auto; left:4px; height: 89px; top: 10px; }
 .transparent { display: none; }
 .quantity { display: none; } 
 .merchantName { display: inline !important; } 
 #verticalBanner { display: block !important; }
 .publisherLogo { display: inline !important; position: relative; top: 360px;}
 .viewButton { display: inline !important;
width: 100px;
height: 40px;
position: relative;
top: 500px;
left: 2px;
font-size: 25px;
color: 
white; }
}

/* button 1 */
@media only screen and (height:150px) and (width: 180px) {
 h1 { width:100%; top:2px; height:50px; line-height:10px; left:0; font-size:12px; text-align:center; }
 h1 span { display:block; }
 div {font-size: 9px;}
 h2 { display:block; left:0; bottom:20px; height:20px; line-height:20px; text-align:center; font-size:14px; }
 img { position: relative; height: 60px; top: 40px; left: 35px; }
 h2 span { display:inline;}
 h3 { top: 130px; right: 5px; }
 .transparent { display: none; }
 .quantity { display: none; } 
 #buttonOne { display: block !important; }
}

/* letter board */
@media only screen and (height:90px) and (width:728px) {
 h1 { font-size:18px; width:80%; line-height:30px; }
 h1 span { display:inline; position: relative; left: 5px; }
 h2 { height:30px; line-height:30px; top:60px; }	
 h2 span { display:inline; left: 1px; position: relative; } 
 div { font-size: 16px;}
 img { left: 589px; position: relative; height: 80px; top: 5px; display:block; width:auto; }
 h3 { top: 65px; right: 150px; }
 h3 span { color: #fff !important; font-size: 16px;}
 .transparent { display: none; }
 .quantity { display: none; }
 .quantityBig { display: inline !important; color: white; padding-left: 10px; }
 .dealTitle { display: inline !important; font-size: 12px !important; }
 .merchantName2 { display: inline !important; }
 .merchantName { display: none !important; }
 #letterBoard { display: block !important; }
}


/* square popup */
@media only screen and (height:250px) and (width:250px) {
 h1 { height:110px; line-height:20px; font-size:26px; text-align:center; width:100%; top:10px; left:0; }
 h1 span { display:block; }
 h2 { top: 80px; height: 25px; line-height: 25px; font-size: 1.4em; text-align: center; }
 h2 span { display:inline; }
 h3 { top: 230px; float: right; position: relative; padding-right: 5px;}
 div { font-size: 16px; }	
 img { height: 110px; top: 115px; width: auto; right: 30px; z-index: 200; bottom:0; }
 .transparent { background-color: black; position: absolute;left: 30px; top: 205px; opacity: .5; z-index: 200; height: 20px;width: 76%; }
 .quantity { position: absolute; left: 40px; top:210px; z-index: 200;color: white;font-size: 12px; }
 #squarePopup { display: block !important; }
}

/* medium rectangle */
@media only screen and (height:250px) and (width:300px) {
 h1 { height:110px; line-height:20px; font-size:28px; text-align:center; width:100%; top:10px; left:0; }
 h1 span { display:block; }
 h2 { top: 80px; height: 25px; line-height: 25px; font-size: 1.4em; text-align: center; }
 h2 span { display:inline; }
 h3 { float: right; top: 230px; position: relative; padding-right: 5px; top: 230px; }
 div { font-size: 20px; }	
 img { height: 110px !important; top: 115px !important; width: auto !important; right: 55px !important; z-index: 200; bottom:0; }
 .transparent { background-color: black; position: absolute;left: 57px; top: 205px; opacity: .5; z-index: 200; height: 20px;width: 63%; }
 .quantity { position: absolute; left: 65px; top:210px; z-index: 200;color: white;font-size: 12px; }
 #mediumRect { display: block !important; }
}