body {
  text-align: center;
  background: #F2F2F2 url(/images/bg-gradient.jpg) repeat-x;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 84%;
}

#container, #main {
  width: 981px; /* #main is technically a hasLayout fix, but we may
                 * as well set all the widths in the one place.
                 */
}

#container {
  text-align: left;
  margin: 45px auto 0 auto;
  position: relative;
}


/***** HEADER *****/
#masthead {
  background: url(/images/header-bg.jpg) no-repeat;
  height: 231px;
  position: relative;
}

#masthead ul.navigation {
  position: absolute;
  list-style-type: none;
  right: 47px; top: 16px;
}
  #masthead ul.navigation li {
    display: block;
    float: left;
    width: 119px;
    padding-right: 9px;
  }
    #masthead-nav-myoath       { background: url(/images/btn-nav-myoath.gif) no-repeat; }
    #masthead-nav-taketheoath  { background: url(/images/btn-nav-taketheoath.gif) no-repeat; }
    #masthead-nav-whyswear     { background: url(/images/btn-nav-whyswear.gif) no-repeat; }
    
    #masthead ul.navigation li a {
      display: block;
      width: 119px; height: 25px;
      text-indent: -9000px;
    }

  #people-flash, #people-flash .embed-container {
    width: 496px; height: 172px;
  }
  #people-flash {
    position: absolute;
    right: 25px;
    top: 60px;
    background: url(/images/people-dummy.jpg) no-repeat;
  }


/***** MAIN CONTENT BLOCK *****/

#main-wrapper {
  width: 981px;
  background: url(/images/main-bg.png) repeat-y;
}

#main {
  position: relative;
}

#content-container {
  padding: 15px 15px 20px;
  width: 951px;
  background: url(/images/content-bg.jpg) no-repeat;
}

#content-container .jar-count {
  position: absolute;
  left: 35px; top: 15px;
  text-align: center;
  width: 121px;
}
  #content-container .jar-count .jar {
    display: block;
    margin: 0 auto;
    padding-left: 2px;
  }
  #content-container .jar-count .counter {
    display: block;
    width: 121px; height: 38px;
    line-height: 28px;
    background: url(/images/swearjar-counter-bg.gif) no-repeat;
    font-size: 120%;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }

#content-right {
  margin-left: 165px;
}

  #content-right .column-left, #content-right .column-right {
    float: left;
  }
  #content-right .column-left {
    width: 350px;
  }
  #content-right .column-right {
    width: 242px;
  }

  #content-right p.swear-declaration {
    font-style: italic;
    font-weight: bold;
    line-height: 160%;
    padding: 0 0 19px 0;
    height: 135px;
  }
  
  #content-right p.thankyou-message {
    font-weight: bold;
    line-height: 160%;
    padding: 0 20px 19px 0;
  }

  #content-right ul.button-list {
    padding-left: 0;
    list-style-type: none;
  }
    #content-right ul.button-list li {
      display: block;
    }
    #content-right ul.button-list li.first {
      padding-bottom: 8px;
    }

  #content-right h2 {
    line-height: 160%;
    font-weight: normal;
    font-style: italic;
    padding-top: 10px;
    padding-left: 10px;
  }
  #content-right p {
    line-height: 160%;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 80px;
  }
  #content-right p a {
    color: #3F838E;
    text-decoration: none;
  }
  #content-right ul {
    list-style-type: circle;
    padding-left: 55px;
    padding-bottom: 20px;
  }
  #content-right ul li {
    line-height: 160%;
    padding-right: 80px;
  }

  #video, #video-caption {
    width: 424px;
  }
  #video-caption {
    padding-right: 0;
  }
  #video {
    height: 268px;
    padding-top: 15px;
    background: url(/images/video-bg.jpg);
    text-align: center;
  }
    #video .dummy {
      margin: 0px auto;
      width: 389px; height: 249px;
      background: url(/images/video-dummy.jpg) no-repeat;
    }
      #video .embed-container {
      }
  #video-caption {
    display: block;
    font-weight: bold;
    text-align: center;
    margin: 3px 0 6px;
  }

a.button {
  display: block;
  width: 284px; height: 61px;
  text-indent: -9000px;
}
  #button-swearnow,
  #button-swearnow-top,
  #button-swearnow-bottom { background: url(/images/btn-swearnow.jpg); }
  #button-spreadtheword { background: url(/images/btn-spreadtheword.jpg); }


.clear {
  clear: both;
}

.overlay, .embedded {
  min-height: 200px;
  text-align: left;
}
.overlay {
  width: 447px;
  display: none;
  z-index: 10000;
}
.embedded {
  width: 419px;
  position: relative;
}


.overlay .panel {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: url(/images/overlay-bg.jpg) repeat-x;
  padding: 21px 22px;
}
.embedded .panel {
  background: url(/images/embedded-bg.jpg) no-repeat;
  padding: 21px 22px;
  width: 370px;
}   

  #embedded-take-the-oath { height: 574px; }
  #embedded-take-the-oath .panel { height: 574px; }
  #overlay-take-the-oath { height: 645px; }
  #overlay-take-the-oath .panel { height: 603px; }
  
  #panel-take-the-oath h2 {
    width: 151px; height: 19px;
    text-indent: -9000px;
    z-index: 10001;
    background: url(/images/heading-taketheoath.gif) no-repeat;
  }
  
  #overlay-take-the-oath .panel h2 {
    padding-bottom: 25px;
  }
  #embedded-take-the-oath .panel h2 {
    padding-bottom: 0px;
      }
      
      #panel-take-the-oath div.form {
        position: relative;
        padding: 0 6px;
      }
      #embedded-take-the-oath div.form input.button {
      	padding-top: 5px;
      }
      #overlay-take-the-oath div.form input.button {
      	padding-top: 25px;
      }
      #panel-take-the-oath div.form input.button {
        float: right;
      }
      
      #panel-take-the-oath .privacy-notice {
        position: absolute;
        font-size: 75%;
        color: #006666;
        clear: both;
      }
      #embedded-take-the-oath .privacy-notice {
      	width: 180px;
      	left: 18px; bottom: 10px;
      }
      #overlay-take-the-oath .privacy-notice {
        left: 29px; bottom: 15px;
      }
         #panel-take-the-oath .privacy-notice a {
         	color: #006666;
         	text-decoration: underline;
         }
      
      
      div.text-field, div.dropdown-field {
      	clear: both;
      	padding: 7px 0;
      }
      	div.text-field label, div.dropdown-field label {
      		display: block; float: left;
      		width: 102px;
      		font-weight: bold;
      		font-size: 90%;
      		line-height: 170%; vertical-align: middle;
      	}
      	div.text-field input, div.dropdown-field select {
      		display: block; float: left;
      		width: 121px;
      		border: #e7e7e7 1px solid;
      		padding: 3px 5px;
      		font-size: 90%;
      	}
      	div.text-field input.text-email {
      		width: 233px;
      	}
      	div.radio-field, div.check-field {
      	  clear: both;
      	  padding: 7px 0 10px;
        }
          div.radio-field input {
            margin-right: 0;
          }
          div.radio-field label {
            padding-right: 5px;
          }
          div.check-field input, div.check-field label {
          	float: left; 
          }
          div.check-field input {
            width: 20px;
            text-align: left;          
          }
          div.check-field label {
          	width: 310px;
          	padding-left: 5px;
          }
        
        #captchaOuter {
          clear: both;
          padding-top: 5px;
        }
          #etapCaptchaImage {
          	width: 200px;
          	float: left;
          }
          	#etapCaptchaImage a {
          	  display: block;
          	  padding-top: 8px;
          	  text-decoration: none;
          	  color: #006666;
          	}
          #etapCaptchaInstructions {
            float: left;
            width: 170px;
            padding-left: 10px;
            line-height: 145%;
          }
          #etapCaptchaChallenge {
            display: none;
          }
          #etapCaptchaInput {
          	margin-top: 9px;
          }
          #etapCaptchaInput input {
            width: 130px;
            border: #e7e7e7 1px solid;
            font-size: 90%;
            padding: 3px 5px;
          }
          
       .embedded #etapCaptchaInstructions {
         width: 130px;
         padding-left: 10px;
         line-height: 120%;
         background: none;
       }
          
     
      .panel .required-notice {
      	display: block; clear: both;
      	color: #006666;
      	padding: 5px 0 0 110px;
      	font-size: 80%;
      }
      
      #content-right .embedded .panel .required-notice {
      	padding: 3px 0 0 105px;
      }
      

      #overlay-spread-the-word, #overlay-spread-the-word .panel {
        height: 645px;
      }

    /** Spread the Word **/
    #embedded-spread-the-word,
    #embedded-spread-the-word .panel { height: 574px; }
    #overlay-spread-the-word,
    #overlay-spread-the-word .panel { width: 370px; height: 545px; }
        
    #panel-spread-the-word h2 {
      float: left;
      display: block;
      width: 290px;
      margin-left: 10px;
      margin-top: 2px;
      line-height: 100%;
      padding: 0;
      text-indent: -9000px;
    }
    #panel-spread-the-word h2 a {
      line-height: 100%;
      text-indent: -9000px;
    }
    
    #panel-spread-the-word a.icon, #panel-spread-the-word span.icon {
      display: block;
      float: left;
      width: 43px; height: 43px;
      text-indent: -9000px;
      z-index: 10001;
    }
    	#panel-spread-the-word .facebook a.icon {
    		background: url(/images/btn-share-facebook.jpg) no-repeat;
    	}
    	#panel-spread-the-word .twitter a.icon {
    		background: url(/images/btn-share-twitter.jpg) no-repeat;
    	}
    	#panel-spread-the-word .email span.icon {
    		background: url(/images/btn-share-email.jpg) no-repeat;
    	}
    		
    	#panel-spread-the-word .facebook h2 {
    		width: 273px; height: 13px;
    		background: url(/images/heading-share-facebook.jpg) no-repeat;
    	}
    	#panel-spread-the-word .twitter h2 {
    		width: 240px; height: 12px;
    		background: url(/images/heading-share-twitter.jpg) no-repeat;
    	}
    	#panel-spread-the-word .email h2 {
    		width: 239px; height: 12px;
    		background: url(/images/heading-share-email.jpg) no-repeat;
    	}
    
    #panel-spread-the-word .section {
    	padding-left: 0px;
    	padding-bottom: 20px;
    	width: 366px;
    	clear: both;
    	position: relative;
    }
    	#panel-spread-the-word .facebook { height: 90px; }
    	#panel-spread-the-word .twitter { height: 50px; }
    	
    	#panel-spread-the-word .twitter,
    	#panel-spread-the-word .email {
    	    padding-top: 20px;
    		border-top: 1px solid #ccc;
    	}
    	#panel-spread-the-word .facebook,
    	#panel-spread-the-word .twitter {
    		padding-bottom: 20px;
    	}
    
    	#panel-spread-the-word .facebook .preview {
    		display: block; position: absolute;
    		left: 53px; top: 25px;
    	}
    	
    	#panel-spread-the-word .email .description {
    		clear: both;
    		padding-top: 0px;
    		padding-left: 2px;
			padding-right: 9px;
    		font-size: 80%;
    		font-weight: bold;
    		color: #006666;
    		text-align: justify;
    	}
    	
    	#overlay-spread-the-word .email ul li,
    	#overlay-spread-the-word .email .description {
    		font-size: 90%;
    		line-height: 150%;
    		padding-bottom: 25px;
    	}
    	
    	#panel-spread-the-word .email ul {
    		padding: 0px 0 0 2px; margin: 0;
    		list-style-type: none;
  
    	}
    	#panel-spread-the-word .email ul li {
    		font-size: 80%;
    		font-weight: bold;
			color: #006666;
    		padding: 5px 0 0 0; margin: 0;
    		clear: both;
    		display: block;
    	}
    	
    	#panel-spread-the-word .email ul li label {
    		float: left;
    		display: block;
    		width: 100px;
    	}
    	#panel-spread-the-word .email ul li input {
    		float: left;
    		display: block;
    		width: 250px;
    	}
    	 
    	#panel-spread-the-word .email input.submit {
    		float: right;
    		padding-top: 25px;
    		padding-right: 7px;
    	}

    

    /** Gallery **/
    #content div.content-full {
      margin: 0 25px;
      position: relative;
    }
    ul.gallery {}
      ul.gallery li {
        display: block;
        float: left;
        width: 256px;
        height: 170px;
        padding-right: 30px;
        padding-left: 10px;
        margin: 22px 0;
      }
      ul.gallery li.double {
        width: 512px;
      }
      ul.gallery li .caption {
        display: block;
        line-height: 110%;
        font-weight: bold;
        padding-bottom: 10px;
      }

    .gallery-pagination {
      position: absolute;
      display: block;
      left: 0; bottom: 0;
      width: 100%;
      text-align: center;
      font-weight: bold;
    }
    	.gallery-pagination a {
    		color: #000;
    		text-decoration: none;
    	}
    	.gallery-pagination span.current-page {
    		text-decoration: underline;
    	}


    /***** FOOTER *****/
    #footer-bg {
      background: url(/images/footer-bg.png) no-repeat;
      height: 134px;
      position: relative;
      clear: both;
    }

    #footer {
      position: absolute;
      left: 0; bottom: 0;
      width: 981px; height: 134px;
    }

    #footer .social {
      position: absolute;
      left: 62px; bottom: 23px;
    }
      #footer .social ul {
        list-style-type: none;
      }
      #footer .social ul li {
        float: left;
      }
        #icon-facebook, #icon-twitter {
          display: block;
          width: 47px; height: 47px;
          text-decoration: none;
          text-indent: -9000px;
        }
        #icon-facebook { background: url(/images/btn-facebook.gif) no-repeat scroll center top; }
        #icon-facebook:hover { background: url(/images/btn-facebook.gif) no-repeat scroll center bottom; }
        #icon-twitter { background: url(/images/btn-twitter.gif) no-repeat scroll center top; }
        #icon-twitter:hover { background: url(/images/btn-twitter.gif) no-repeat scroll center bottom; }
        
    #footer .band {
      display: block;
      position: absolute;
      left: 118px; bottom: 48px;
      color: #fff;
      font-style: italic;
      font-size: 120%;
      height: 45px; line-height: 45px;
      vertical-align: middle;
      width: 750px;
      text-align: center;
    }
      #footer .band a:link, #footer .band a:visited { color: #fff; }
      #footer .band a:hover, #footer .band a:active { color: #02A4BF; }

    #footer ul.navigation {
      position: absolute;
      left: 194px; bottom: 12px;
      list-style-type: none;
    }
      #footer ul.navigation li {
        float: left;
        height: 33px; line-height: 33px;
        vertical-align: middle;
        padding-right: 40px;
        font-size: 70%;
      } 
        #footer ul.navigation li a {
          color: #000;
          text-decoration: none;
        }
        #footer ul.navigation li a:hover {
          text-decoration: underline;
        }
      #footer ul.navigation li.deepend {
        padding-left: 100px;
      }
  

    #footer .ribbon {
      display: block;
      position: absolute;
      right: 45px; bottom: -40px;
    }