/* 
RESET RELOADED via Eric Meyer
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/* Thematic CauseWorld elements */

a {
    color: #069;
}
a:hover {
    color: #059;
}
h1,
h2 {
    font-size: 1.4em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 15px;
}
em, i {
    font-style: italic;
}
b, strong {
    font-weight: bold;
}


#content ul.basic-list {
    margin-left: 20px;
    list-style: disc outside none;
    margin-bottom: 15px;
}



/* LAYOUT */

body {
    background: #d6edff url(../images/bg.gif) repeat-x 0 0; 
    color: #333;
    font-family: 'helvetica neue', helvetica, arial, 'sans-serif';
    font-size: 62.5%;
    line-height: 1.5;
}
#container  {
    background: transparent url("../images/light-rays.png") no-repeat 0px -150px;
}

#header-inner,
.top-banner-wrapper {
    position: relative;
}

#header-inner {
    width: 890px;
}

#header-inner {
    margin: 0 auto;
    padding: 0 0;
    height: 114px;
}

.logo-wrapper {
    float: left;
    position: relative;
    top: 12px;
}

.facebook-button {
    position: relative;
    margin-right: 15px;
    top: -10px;
}
.twitter-button {
    position: relative;
    margin-right: 15px;
    top: -10px;
}
#navigation {
    background: #261500 url(../images/bg-nav.png) no-repeat 0 0;
    background: #d2d2d2 url(../images/bg-nav.gif) repeat-x 0 0;
    color: #8b8b8b;
    font-size: 1.8em;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
    width: 890px;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.navigation-links {
    padding: 5px 5px;
}
.navigation-links li {
    background: url(../images/nav-sep.gif) no-repeat right center;
    float: left;
    margin-right: 5px;
}
.navigation-links li a {
    color: #8b8b8b;
    display: block;
    padding: 5px 20px 5px 19px;
    text-decoration: none;
    text-shadow: #fff 1px 1px 0;
}
#navigation .navigation-links li.on a {
    color: #4087dc;
}
.download-button {
    position: absolute;
    right: 10px;
    top: 7px;
}
.download-button a {
    background: url(../images/download-button-bg.png) no-repeat 0 0;
    color: #fff;
    display: block;
    font-size: 16px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    text-decoration: none;
    text-shadow: #38658a 0 -1px 2px;
    width: 225px;
}

.press,
.sponsors {
    float: right;
    position: relative;
}

.press {
    clear: both;
    margin-top: 15px;
}

.press-copy {
    top: 12px;
}

.sponsors-copy {
    top: 7px;
}

.press a,
.sponsors a {
    float: left;
    padding-left: 20px;
    text-align: center;
    position: relative;
}
	
.tc { top: 4px; } 
.wp { top: 0; } 
.nyc { top: 2px; } 
.abc { top: 0px; height: 32px; } 

a.press-copy,
a.sponsors-copy {
    text-align: left;
    position: relative; 
   padding-left: 0;
}

.press-logos img, 
.sponsors-logos img {
    margin-left: 5px;
}

.top-banner-wrapper {
    position: absolute;
    right: 0;
    top: 13px;
    padding-top: 6px;
    padding-bottom: 20px;
    margin: 0 auto;
}

#content {
    margin: 0 auto;
    padding: 0;
    width: 934px;
    font-size: 1.4em;
}
#content-inner {
    min-height: 600px;
    position: relative;
}
.page-wrapper {
    background: #fff;
    margin: 0 20px;
    padding: 20px 40px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.page-wrapper-landing {
    background: #fff;
    margin: 0 23px;
    padding: 20px 40px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    height: 500px;
    background-image:url(../images/bluebox.png);
    background-repeat: no-repeat;
}
.subhead {
    background: #d3d3d3 url(../images/bg-subhead.gif) repeat-x 0 0;
    color: #5f6060;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0;
    padding: 8px 10px;
    text-transform: uppercase;
    

    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.quote-wrapper {
    position: relative;
    float: right;
    width: 384px;
    margin: 38px 22px;
}

.quote {
    font-style: italic;
}

/* ie7 compat */

#steps-container {
    width: 890px;
    margin: 10px auto 10px;
    position: relative;
    clear: both;
}

#steps {
    float: left;
    color: #666;
    font-size: 23px;
    height: 138px;
    width: 100%;
    line-height: 1.4;
    margin-bottom: 10px;
}

#stepsLanding {
  color: #666;
  font-size: 23px;
  height: 269px;
  width: 700px;
  line-height: 1.4;
  margin: auto;
  position:relative;
  z-index: 20;
}
#stepsLanding li {
    float: left;
}
#steps li {
    float: left;
}


#causes {
    position: relative;
    top: 10px;
    margin-left: 22px;
    width: 484px;
}

#causes-wrapper {
    background: #fff;
    height: 100px;
    margin: 0 0;
    padding: 15px 1px 16px;
    position: relative;
    overflow: hidden;
    width: 482px;
    
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#causes-list {
    width: 9999px;
    position: absolute;
    left: 0;
    
}
#causes-list li {
    float: left;
    height: 100px;
    text-align: center;
    width: 241px;
}

#causes-list li img {
    width: 180px;
}

#causes-list li img.short {
    padding-top: 13px;
    padding-bottom: 12px;
}

#causes-list li img.narrow {
    width: 100px;
}

#screens {
    position: absolute;
    right: 0px;
    z-index: 5;
}


.download-it-now {
    background: #d2d2d2 url(../images/bg-download.png) repeat-x 0 0;
    font-size: 13px;
    font-weight: bold;
    left: 526px;
    padding: 10px;
    margin-top: 42px;
    position: absolute;
    text-align: center;
    width: 200px;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.download-it-now-landing {
    background: #d2d2d2 url(../images/bg-download.png) repeat-x 0 0;
    font-size: 13px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    width: 200px;
    position: absolute;
    top: 395px;
    left: 596px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index:0;
}
.download-it-now-inner {
    padding-right: 65px;
}
.download-it-now h4 {
     color: #0e7d01;
     margin-bottom: 8px;
}
.download-it-now p {
    margin-bottom: 10px;
}
.download-button-wrapper {
    
}

.newsletter-wrapper {
    background: url("../images/bg-download.png") repeat-x scroll 0 0 #D2D2D2;
    position: absolute;
    margin-top: 212px;
    left: 526px;
    font-size: 13px;
    font-weight: bold;
    width: 200px;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
}

.newsletter-inner {
    padding-right: 65px;
}

.newsletter-inner img {
    margin-top: 6px;
    width: 44px;
}

.newsletter-frame {
    background-color: #ccc;
    position: absolute;
    z-index: 10002;
    width: 350px;
    height: 188px;
    top: 32px;
    left: 32px;
    display: block;
}

#newsletter-overlay {
    background: url("../images/newsletter-overlay.png") repeat-x scroll 0 0 transparent;
    width: 414px;
    height: 252px;
    top: 32px;
    left: 32px;
}

.newsletter-wrapper h4 {
    color: #0e7d01;
    margin-bottom: 0;
}

.newsletter-wrapper a {
    cursor: pointer;
}

.friend-wrapper {
    background: #d2d2d2 url(../images/bg-download.png) repeat-x 0 0;
    font-size: 13px;
    font-weight: bold;
    left: 526px;
    padding: 10px;
    margin-top: 302px;
    position: absolute;
    text-align: center;
    width: 200px;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.friend-inner {
    padding-right: 65px;
}
.friend-wrapper h4 {
     color: #0e7d01;
     margin-bottom: 8px;
}
.friend-wrapper p {
    margin-bottom: 0;
}
.friend-button-wrapper {
    
}

.friend-button-wrapper a,
.friend-button-wrapper img {
    width: 48px;
    height: 48px;
}		       

.friend-button-wrapper a {
    display: inline-block;
}

.friend-button-wrapper img {
    clear: both;
}


#activity-wrapper {
    height: 428px;
    width: 484px;
    clear: both;
    margin-left: 22px;
    position: relative;
}

#activity-feed {
    overflow: auto;
    height: 394px;
    position: relative;
}

.activity-bg {
    background: #fff;
    height: 394px;
    left: 0;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: -1;
    
    filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	-webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#activity {
    padding-top: 5px;
}
#activity li {
    background: url(../images/bg-activity.gif) no-repeat 0 0;
    font-size: 13px;
    height: 52px;
    line-height: 1.3;
    margin: 0 12px 6px;
    padding: 10px 70px 10px 10px;
    position: relative;
}
#activity li .avatar {
    float: left;
    height: 50px;
    margin-right: 10px;
    width: 50px;
}
#activity li .avatar img {
    height: 50px;
    width: 50px;
}
#activity li .username {
    font-size: 16px;
    margin-bottom: 2px;
    padding-top: 4px;
}
#activity li .timestamp {
    color: #999;
    font-size: 12px;
    display: none;
}
#activity li .icon {
    position: absolute;
    right: 10px;
    text-align: center;
    top: 16px;
    width: 52px;
}

.screenshot-wrapper {
    margin-bottom: 15px;
    clear: both;
    padding: 0 162px;
}
.screenshot-wrapper img {
    margin: 0 20px 15px 0;
    float: left;
    padding: 5px;
    background: #fff;
    border: 1px solid #ccc;
}

.screenshot-nav {
    padding-left: 126px;
    margin: 0 61px 25px 61px;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.screenshot-nav li {
    float: left;
    margin: 10px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ccc;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    
    
}

.screenshot-nav li a {
    filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	
	display: block;
}

.screenshot-nav li a:hover,
.screenshot-nav li.active a {
    filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}


.screenshot-nav li img {
    display: block;
}

/* contact us page */

.contact-us-wrapper {
    float: right;
    font-size: 1.4em;
}
.contact-us-wrapper a:link,
.contact-us-wrapper a:visited {
    color: #888;
    text-decoration: none;
}
.contact-us-wrapper a:hover,
.contact-us-wrapper a:active {
    color: #059;
    text-decoration: underline;
}

.press-source {
    font-weight: bold;
}

/* causes page */

.cause-img-list-alt {
    margin-left: 22px;
}
.cause-img-list-alt li {
    float: left;
    height: 360px;
    margin-bottom: 25px;
    margin-right: 13px;
    width: 288px;
    position: relative;
}
.cause-img-list-alt li .cause-header {
    color: #127ec8;
    font-size: 15px;
    font-weight: bold;
    height: 65px;
    line-height: 1.3;
    padding: 20px 24px 0 24px;
    position: relative;
    text-transform: uppercase;
    z-index: 10;
}
.cause-img-list-alt li .cause-header h3 {
    margin: 0;
    padding-right: 65px;
}
.cause-img-list-alt li .cause-header h2 {
    text-transform: none;
}
.cause-img-list-alt li .cause-icon {
    position: absolute;
    right: -8px;
    top: -15px;
    z-index: 20;
}
.cause-img-list-alt li h2 {
    color: #5f6060;
    font-size: 13px;
    margin-bottom: 20px;
}
.cause-img-list-alt li p {
    margin-bottom: 0;
    padding-top: 8px;
    font-size: 12px;
}
.cause-img-list-alt li .points {
    font-size: 15px;
    font-weight: bold;
    
}
.cause-copy {
    height: 100px;
}
.cause-button {
    margin: 0;
    padding: 0;
}
.cause-button a {
    background: #127ec8 url(../images/bg-causebutton.gif) repeat-x 0 0;
    border: 1px solid #1b72b0;
    color: #fff;
    display: block;
    font-weight: bold;
    margin: 0 15px;
    padding: 2px 0;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.cause-button.long a {
    margin: 0 10px;
}
.cause-bg {
    position: absolute;
    width: 288px;
    height: 360px;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 2;
    
    filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.cause-img-list-alt .cause-content {
    padding: 0 24px 10px;
    position: relative;
    z-index: 10;
}


.cause-img-list {
    margin: 0 70px;
}
.cause-img-list li {
    float: left;
    margin: 10px;
    background: url(../images/cause_container_green.png) no-repeat 0 0;
}
.cause-img-list li a {
    display: block;
    background-position: 50% 22px;
    background-repeat: no-repeat;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: -2;
    line-height: 1.2;
    width: 84px;
    padding: 6px 4px 0;
    position: relative;
    height: 98px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.cause-img-list li.cause-li-book a { background-image: url(../images/icons/cause_icon_book.png); }
.cause-img-list li.cause-li-chimp a { background-image: url(../images/icons/cause_icon_chimp.png); }
.cause-img-list li.cause-li-dog a { background-image: url(../images/icons/cause_icon_dog.png); }
.cause-img-list li.cause-li-meal a { background-image: url(../images/icons/cause_icon_meal.png); }
.cause-img-list li.cause-li-ribbon a { background-image: url(../images/icons/cause_icon_ribbon.png); }
.cause-img-list li.cause-li-teddy a { background-image: url(../images/icons/cause_icon_teddy.png); }
.cause-img-list li.cause-li-tree a { background-image: url(../images/icons/cause_icon_tree.png); }
.cause-img-list li.cause-li-school a { background-image: url(../images/icons/cause_icon_school.png); }
.cause-img-list li.cause-li-water a { background-image: url(../images/icons/cause_icon_water.png); }

.cause-img-list li a span.points {
    position: absolute;
    bottom: 5px;
    text-transform: lowercase;
    font-size: 11px;
    width: 70px;
    text-align: center;
    left: 11px;
    color: #fff;
}



.cause-info {
    position: relative;
    font-family: "helvetica neue", helvetica, arial, "sans-serif";
}

#modal-inner {
    
    position: relative;
    
}
#modal-inner .cause-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 302px;
    height: 326px;
    background: #fff;
    margin: 68px 9px 0 9px;
    z-index: 10;

    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    
    filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
    
}
.close-modal {
    background: #fff url(../images/icon_close.png) no-repeat 4px 5px;
    border: 1px solid #aaa;
    padding: 2px 4px 2px 16px;
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}



#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 200px;
    
    -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
}
#modal {
    display: none;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 500px;
}
#modal-inner {
    background: #fff url(../images/cause-bg-test.png) no-repeat 0 0;
    width: 320px;
    height: 480px;
    margin: 0 auto;
    border: 2px solid #fff;
}


#footer {
    font-size: 1.3em;
    margin: 0 auto;
    padding: 25px 0;
    width: 890px;
}
#footer a {
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}
.footer-links {
    text-align: center;
}
.footer-links li {
    display: inline;
    margin: 0 10px;
}


/* UTILITIES */

.pkg:after,
.navigation-links:after,
#content-inner:after,
#activity li:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}
.pkg,
.navigation-links,
#content-inner,
#activity li { display: inline-block; }
/* no ie mac \*/
* html .pkg,
* html .navigation-links,
* html #content-inner,
* html #activity li { height: 1%; }
.pkg,
.navigation-links,
#content-inner,
#activity li { display: block; }

/* fb Landing */
.giftContent {
  font-family:inherit;
  text-align: center;
}
.giftContent_header {
  font-size:26px;
  font-weight:bold;
  color: white;
}
.giftContent_headerDescription {
  font-size:14px;
  margin: 0 auto;
  width:70%;
  padding-bottom:20px;
  padding-top:10px;
  font-weight: bold;
}
.instructions {
  text-align: center;
  margin-right:58px;
  float: right;
}
.giftRecieve_images {
  vertical-align: middle;
}

.giftRecieve {
  font-weight:bold;
  font-size:16px;
  padding-bottom:15px;
}
.giftExpiration {
  padding-bottom:10px;
  font-size:11px;
  margin-left: 65px;
  float:left;
}

/* News box styles */

#newsbox {
	height: 209px;
	width: 340px;
	display: inline-block;
	overflow: hidden;
	position: relative;
	float: left;
}

#newsbox img {
	position: relative;
	top: 0;
	left: 0;
	display: none;
}

#newsbox img.active {
	display: block;
	border-color: #f66 !important;
}

#newsbox .title,
#newsbox .thumbnails {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 41px;
	display: block;
}

#newsbox .title {
	display:none; 
}

#newsbox .thumbnails {
	display: none;
	z-index: 10001;
}

#newsbox .background {
	width: 100%;
	height: 100%;
	filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	position: absolute;
}

#newsbox .thumbnails .background {
	background-color: #000;
}

#newsbox .title .background {
	background-color: #fff;
        filter:alpha(opacity=75);
		-moz-opacity: 0.75;
		-khtml-opacity: 0.75;
		opacity: 0.75;
	z-index: 10000;
}

#newsbox .tn-container {
	float: right;	
}

#newsbox img.thumb {
	width: 28px;
	height: 21px;
	border: 2px solid #fff;
	position: relative;
	top: 8px;
	display: inline-block;
	float: left;
	margin-right: 8px;
}

#newsbox img.thumb:hover {
	border-color: #86d4fd;
}

#newsbox #cause-name,
#newsbox #cause-title {
	position: absolute;
	left: 8px;
	z-index: 10000;
}

#newsbox #cause-title {
	font-size: 17px;
	top: 1px;
	color: #127EC8;
}

#newsbox #cause-name {
	font-size: 12px;
	top: 21px;
	color: #5F6060;
}

#newsbox img {
	cursor: pointer;
}
 
/* overlay size and background image */ 
div.overlay { 
    /* fullscreen dimensions */
    width:656px; 
    height:526px; 
    background-image:url(http://static.flowplayer.org/img/overlay/petrol.png); 
    display:none; 
    padding: 0 !important; 
    z-index: 10001;
} 
 
/* close button for overlay */ 
div.close { 
    background:url(http://static.flowplayer.org/img/overlay/close.png) no-repeat; 
    position:absolute; 
    top:2px; 
    right:5px; 
    width:35px; 
    height:35px; 
    cursor:pointer; 
} 

.player {
    display: none;
}

/* absolute positioning of the player */ 
.player embed,
.player object {
    position:absolute; 
    z-index:10002; 
    width:596px; 
    height:466px; 
}

/* Promotions - contains newsbox and promo box */

#promo-container {
    width: 890px;
    margin: 0 auto;
}

#newsbox, #promo {
    margin-bottom: 10px;
}

#promo {
    float: right;
    width: 540px;
    margin-left: 10px;
    height: 209px;
    background-image: url("../images/promo-karmas-5.png");
}