/* CSS Reset (merci Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}:focus{outline:0;}body{line-height:1;color:#000;background:#FFF;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:400;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}

body {
  font-family: georgia, serif;
  font-size: 16px;
  color: #0f6e89;
  background: #68c7dd url(../images/bg.png) repeat-x top left;
  text-align: center;
}

a {
  text-decoration: none;
  color: #0f6e89;
  border-bottom: 1px solid #389cb8;
}
  a:hover {
    color: #333;
  }

p {
  line-height: 1.4em;
}

h2 {
  color: #333;
  font-size: 1.15em;
  line-height: 1.4em;
} 

strong {
	font-weight: bold;
	letter-spacing: -1px;
}

.left-align {
	text-align: left;
}

hr {
	border: 1px solid #8ed5e6;
}
#container {
  width: 20em;
  margin: 6em auto 0 auto;
}
  #header a {
    border: 0;
  }
	#header h1 {
		display: none;
	}
  
  #content {
    padding: 2em 1em;
  }
  
    /* Homepage */
		#video {
			padding: 5px;
			background: #fff;
		}
		#choices {
			margin-bottom: 30px;
		}
    #choices li a {
			font-size: 8px; color: #68c7dd;
      display: block;
      width: 160px;
      height: 60px;
      border: 0;
      margin: 0 auto;
      background: url(../images/yesno_sprite.png) no-repeat;
    }
      #choices #yes a {
        background-position: 0 0;
      }
        #choices #yes a:hover {
          background-position: 0 100%;
        }
      #choices #no a {
        background-position: 100% 0;
        margin-top: 1.5em;
      }
        #choices #no a:hover {
          background-position: 100% 100%;
        }
    
    /* Signup */
    form#signup,
    form#unsubscribe,
 		form#activate_cell,
 		form#send_secret {
      overflow: hidden;
      zoom: 1;
      margin-top: 1em;
      margin-left: 0.25em;
    }
      #signup #user_email,
 			#signup #user_cell,
      #unsubscribe #user_email_or_cell,
			#unsubscribe #unsubscribe_code,
			#activate_cell #activation_code,
			#send_secret #user_email_or_cell {
        font-family: georgia, serif;
        font-size: 14px;
        padding: 0.5em;
        background: #fff url(../images/icon-email.png) no-repeat 0.25em center;
        color: #333;
        border: 2px solid #389cb8;
        padding-left: 3em;
        float: left;
        width: 13em;
      }
 			#signup #user_cell {
				background: #fff url(../images/icon-sms.png) no-repeat 0.25em center;
			}
			#signup #user_provider {
				width: 95px;
			}
			#unsubscribe #user_email_or_cell,
			#unsubscribe #unsubscribe_code,
			#activate_cell #activation_code,
			#send_secret #user_email_or_cell {
				background-image :none;
				padding: 0.5em;
				margin-left: 2em;
				text-align: center;
			}
			
        #signup #user_email.example,
        #unsubscribe #user_email_or_cell.example,
				#unsubscribe #user_unsubscribe_code.example,
        #signup #user_cell.example,
				#send_secret #user_email_or_cell.example, {
          color: #999;
          font-style: italic;
        }
      #signup #subscribe,
      #unsubscribe #unsubscribe,
 			#activate_cell #activate,
 			#send_secret #send {
        height: 24px;
        width: 24px;
        background: url(../images/submit.png) no-repeat top left;
        border: 0;
        float: left;
        cursor: pointer;
        margin: 0.66em 0 0.66em 0.66em;
      }
      
      #signup p {
        padding: 0.5em;
        background: #8ed5e6;
        overflow: hidden;
        border-bottom: 1px solid #68c7dd;
      }
        #signup p.unselected {
          display: none;
        }
      
      #signup a.selected {
        font-weight: bold;
      }
      
    /* Confirmation success */
    
    p.success {
      font-size: 1.15em;
      margin-bottom: 1em;
      padding-left: 1.9em;
      padding-top: 0.4em;
      background: url(../images/success.png) no-repeat top left;
      text-align: left;
    }
    
    #testimonials {
      margin-top: 2em;
			font-size: 85%;
    }
    
    #testimonials li {
      background: #8ed5e6;
      padding: 1em;
      text-align: left;
      margin-top: 1em;
    }
      #testimonials li .content {
        font-style: italic;
      }
      #testimonials li .meta {
        color: #333;
        text-align: right;
        display: block;
      }

		/* Terms */
		#terms {
			text-align: left;
		}
		
		#terms li {
			font-style: italic;
      margin: 1em 0;
		  list-style-type: disc;
		  list-style-position: inside;
		  line-height: 1.4em;
		}
		
		/* Error message */
	  .message_error {
			color: red;
		}
		.message_notice {
			color: green;
		}
		.error {
			color: red;
		}
		.error h2 {
			color: red; 
			font-size: 1.2em; 
			line-height: 1.2em;
			margin-bottom: .5em;
		}
		
		/* 404 */
		#four-o-four {
		  background: url(../images/dead-tooth.png) no-repeat top left;
		  color: #333;
		}
		  #four-o-four h2 {
		    margin-bottom: 1.5em;
		  }
		/* InvalidSecretCode custom exception reroutes 404 where i want */
		#invalid-secret-code, #invalid-activation-code {
		  background: url(../images/dead-tooth.png) no-repeat top left;
		  color: #333;
		}
		  #invalid-secret-code h2, #invalid-activation-code h2 {
		    margin-bottom: 1.5em;
		  }
		
		/* Answer */
		.answer {
		  padding-left: 4em;
		  height: 3em;
		  background: no-repeat center left;
		  font-size: 1.5em;
		}
		  #answered-yes {
		    background-image: url(../images/yes-tooth.png);
		  }
		  #answered-no {
		    background-image: url(../images/no-tooth.png);
		  }
		
		
#footer {
  width: 100%;
  background: #8ed5e6;
  padding: 1.8em 0;
}
  #footer p {
    line-height: 1.8em;
  }
  #footer .content {
    margin: 0 auto;
  }
    #footer .content #copyright {
      color: #389cb8;
      font-size: 0.9em;
    }
			#footer .content #copyright a {
				color: #389cb8;
			}