/********************************************************************
 FORGE CSS File
 Design: Ryan Clark & Andy Rossi
 HTML/CSS: Ben Callahan
--------------------------------------------------------------------
 CHANGE LOG:
   BDC:  06-18-10          File Creation
   BDC:  06-25-10          Absolute positioning
                           Javascript
                           iPhone and iPad fixes

********************************************************************/


/********************************************************************
 Import reset.css  */

@import url("reset.css");

/********************************************************************/


* {
	margin: 0;
	padding: 0;
}

body {
	font: normal 62.5% 'Arial Rounded', 'Helvetica', sans-serif;
     background: url(../i/bg-shirt.jpg) 3% 12% repeat;      /* !!! these %'s must be same as #ipad-pocket !!! */
}

#wrapper {
	width: 100%;
     height: 768px; 
	margin: 0 auto;
     position: relative;
     overflow: hidden;
}


     #logo {
          position: absolute;
          left: 3%;
          top: -5px;
          cursor: pointer;
     }

     .registered {
          position: absolute;
          visibility: hidden;
     }
     
     #page-1 .registered {
          visibility: visible;
     }

     h2 {
          color: #00746b;
          font-size: 2em;
          font-weight: normal;
          line-height: 2em;
     }
     
     p {
          line-height: 1.5em;
     }

     #fun-ideas {
          display: block;
          margin: 50px 0 0 15px;
          width: 250px;
          height: 30px;
          overflow: hidden;
          text-indent: -500px;
          background: url(../i/funideas.png) bottom left no-repeat;
     }
     
     #fun-ideas:hover {
          background: url(../i/funideas.png) top left no-repeat;
     }
     
     #tweet-it {
          display: block;
          position: absolute;
          right: 15px;
          bottom: 10px;
          color: #000;
          margin-top: 50px;
          text-decoration: none;
          text-transform: uppercase;
     }
     
     #tweet-it:hover {
          color: #fff;
     }

     
/********************************************************************
 Home page
********************************************************************/

     #ipad-pocket {                                         /* !!! these %'s must be same as body !!! */
          left: 0;
          margin-left: 3%;
          top: 12%;
     }
     
     #home-title {
          right: 0;
          margin-right: 3%;
          top: 8%;
          padding-right: 7px;
/*           width: 47%; */
/*           min-width: 500px; */
     }
     
          h1 span {
               color: #fff;
               background-color: #000;
               font-size: 4.5em;
               font-weight: normal;
               line-height: 1.2em;
               margin: 1% 0;
               padding: 0 10px;
               opacity: .75;
          }

     #home-copy {
          right: 0;
          margin-right: 3%;
          top: 25%;
          width: 47%;
          width: 500px;
          font-size: 1.5em;
     }
     
     #size-regular {
          right: 0%;
          margin-right: 41%;
          top: 58%;
     }
     
     #size-large {
          right: 0%;
          margin-right: 24%;
          top: 58%;
     }

     body #page-1 #others-said {
          right: 0%;
          top: 65%;
          cursor: pointer;
          visibility: hidden;
     }

     
/********************************************************************
 Page 2
********************************************************************/
     #page-2-title {
          top: 18%;
          left: 0;
          margin-left: 3%;
     }

     #quote-1 {
/*           top: 40%; */
          bottom: 170px;
          left: 0;
          margin-left: 8%;
     }
     
     #more-quotes {
          top: 65%;
          right: 0%;
          cursor: pointer;
     }
     
     #dude {
/*           top: 30%; */
          bottom: 100px;
          left: 0;
          margin-left: 44%;
     }
     
     #likeit {
          top: 5%;
          right: 0;
          margin-right: 5%;
     }
     


#pocket {
     width: 100%;
     height: 100px;
     position: absolute;
     bottom: 0px;
     left: 0;
     background: url(../i/bg-pocket.jpg) 50% top repeat-x;
}





/********************************************************************
 Page 3
********************************************************************/
     #page-3-title {
          top: 18%;
          left: 0;
          margin-left: 3%;
     }

     #suzy {
/*           top: 20%; */
          bottom: 80px;
          right: 0;
          margin-right: 27%;
     }
     
     #quote-2 {
/*           top: 35%; */
          bottom: 170px;
          left: 0;
          margin-left: 10%;
     }

     #cornmeal {
          top: 5%;
          right: 0;
          margin-right: 5%;
     }
     
     #outofhere {
          top: 65%;
          right: 0%;
          cursor: pointer;
     }