/*Used for all landscape view CSS */

body[class="landscape"]
{
    font-family: Arial, Verdana, Sans-Serif;
    background-color: #34B5D5;
    width: device-width;
    height: device-height;
    font-size: 12pt;
    /* Turn off font resizing */
	-webkit-text-size-adjust: none;  
    
}
body[class="landscape"] #container
{
    position: absolute;
    height: 416px;
    width: 320px;
}
body[class="landscape"] #calculator
{
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	
}
body[class="landscape"] #cHeader
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 480px;
	background-image: url(http://www.goodmortgage.com/images/iPhone/background.png);
    background-repeat: repeat-x;	
}
body[class="landscape"] #cHeader img
{
	height: 50px;
	width: 276px;
	padding: 5px;
}
body[class="landscape"] .header
{
    position: absolute;
    left: 5px;
    font-size: 12pt;
    font-weight: bold;
	padding-top: 8px;
	height: 25px;
	width: 170px;
	text-align: right;
	vertical-align: bottom;
}
body[class="landscape"] .field
{
    left: 185px;
    font-size: 14pt;
	line-height: 20px;
    text-align: left;
  	height: 25px;
    width: 115px;
    vertical-align: middle;
}

body[class="landscape"] .data
{
	width: 100px;
    font-size: 12pt;
	
}
body[class="landscape"] .dataselect
{
	width: 100px;
	margin-top: 5px;
    font-size: 12pt;
}
body[class="landscape"] .term
{
    position: absolute;
    top: 65px;
}
body[class="landscape"] .rate
{
    position: absolute;
    top: 105px;
}
body[class="landscape"] .amount
{
    position: absolute;
    top: 145px;
}
body[class="landscape"] .payment
{
    position: absolute;
    top: 220px;
}
body[class="landscape"] #compute
{
    position: absolute;
    left: 85px;
    top: 180px;
    width: 150px;
}
body[class="landscape"] #computebutton
{
	font-size: 14pt;
	width: 150px;
}
body[class="landscape"] #bottomtoolbar
{
    position: absolute;
    top: 60px;
	left: 400px;
    height: 208px;
    width: 80px;
    background-image: url(http://www.goodmortgage.com/images/iPhone/background2.png);
    background-repeat: repeat-y;
    
}
body[class="landscape"] .button
{
    display: block;
	position: absolute;
	height: 46px;
	width: 70px;
	background-image: url(http://www.goodmortgage.com/images/iPhone/button_icons.png);
	
	margin-right: 5px;
	
	margin-left: 5px;
}
body[class="landscape"] .first
{
    top: 3px;
}
body[class="landscape"] .second
{
    top: 52px;
}
body[class="landscape"] .third
{
    top: 101px;
}
body[class="landscape"] .fourth
{
    top: 150px;
}
body[class="landscape"] #home
{
	background-position: left 0px;
}
body[class="landscape"] #home:hover
{
	background-position: right 0px;
}
body[class="landscape"] #call
{
	background-position: left -47px;
}
body[class="landscape"] #call:hover
{
	background-position: right -47px;
}
body[class="landscape"] #contact
{
	background-position: left -94px;
}
body[class="landscape"] #contact:hover
{
	background-position: right -94px;
}
body[class="landscape"] #rates
{
    top: 150px;
	background-position: left -141px;
}
body[class="landscape"] #rates:hover
{
	background-position: right -141px;
}
body[class="landscape"] #payment
{
    top: 199px;
	background-position: left -141px;
}
body[class="landscape"] #payment:hover
{
	background-position: right -141px;
}

/*Used for all portrait view CSS */

body[class="portrait"]
{
    font-family: Arial, Verdana, Sans-Serif;
    background-color: #34B5D5;
    width: device-width;
    height: device-height;
    font-size: 12pt;
    /* Turn off font resizing */
	-webkit-text-size-adjust: none;  
    
}
body[class="portrait"] #container
{
    position: absolute;
	top: 56px;
    /*height: 417px;*/
    width: 305px;
}
/*body[class="portrait"] #container    /*Payment Calculator
{
    position: absolute;
    height: 416px;
    width: 320px;
}*/
body[class="portrait"] #calculator
{
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	
}
body[class="portrait"] #cHeader
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 54px;
	width: 320px;
	background-image: url(http://www.goodmortgage.com/images/iPhone/background.png);
    background-repeat: repeat-x;	
}
body[class="portrait"] #cHeader img
{
	height: 44px;
	width: 243px;
	padding: 5px;
}
/*body[class="portrait"] #cHeader div
{
    position: absolute;
    padding: 5px;
    width: 44px;
    height: 44px;
    left: 271px;
    background-image: url(http://www.sadermine.com/dropdown.png);
}*/
body[class="portrait"] .header
{
    position: absolute;
    left: 5px;
    font-size: 12pt;
    font-weight: bold;
	padding-top: 8px;
	height: 25px;
	width: 170px;
	text-align: right;
	vertical-align: bottom;
}
body[class="portrait"] .field
{
    left: 185px;
    font-size: 14pt;
	line-height: 20px;
    text-align: left;
  	height: 25px;
    width: 115px;
    vertical-align: middle;
}
body[class="portrait"] .data
{
	width: 110px;
    font-size: 12pt;
	
}
body[class="portrait"] .dataselect
{
	font-size: 12pt;
	margin-top: 5px;
    width: 110px;
}
body[class="portrait"] .term
{
    position: absolute;
    top: 65px;
}
body[class="portrait"] .rate
{
    position: absolute;
    top: 105px;
}
body[class="portrait"] .amount
{
    position: absolute;
    top: 145px;
}
body[class="portrait"] .payment
{
    position: absolute;
    top: 220px;
}
body[class="portrait"] #compute
{
    position: absolute;
    left: 85px;
    top: 180px;
    width: 150px;
}
body[class="portrait"] #computebutton
{
	font-size: 14pt;
	width: 150px;
}
body[class="portrait"] #bottomtoolbar
{
    position: absolute;
    top: 363px;
	left: 0px;
    height: 54px;
    width: 320px;
    background-image: url(http://www.goodmortgage.com/images/iPhone/background.png);
    background-repeat: repeat-x;
    
}
body[class="portrait"] .button
{
    display: block;
	position: absolute;
	height: 46px;
	width: 70px;
	background-image: url(http://www.goodmortgage.com/images/iPhone/button_icons.png);
	
	margin-top: 5px;
	
	margin-bottom: 5px;
}
body[class="portrait"] .first
{
    left: 8px;
}
body[class="portrait"] .second
{
    left: 86px;
}
body[class="portrait"] .third
{
    left: 164px;
}
body[class="portrait"] .fourth
{
    left: 242px;
}
body[class="portrait"] #home
{
    /*left: 8px;*/
	background-position: left 0px;
}
body[class="portrait"] #home:hover
{
	background-position: right 0px;
}
body[class="portrait"] #call
{
	/*left: 86px;*/
	background-position: left -47px;
}
body[class="portrait"] #call:hover
{
	background-position: right -47px;
}
body[class="portrait"] #contact
{
    /*left: 164px;*/
	background-position: left -94px;
}
body[class="portrait"] #contact:hover
{
	background-position: right -94px;
}
body[class="portrait"] #rates
{
    /*left: 242px;*/
	background-position: left -141px;
}
body[class="portrait"] #rates:hover
{
	background-position: right -141px;
}
body[class="portrait"] #payment
{
    /*left: 242px;*/
	background-position: left -188px;
}
body[class="portrait"] #payment:hover
{
	background-position: right -188px;
}