body { padding: 0px; margin: 0px; }


/*
*{
	-webkit-animation: PUMP-ANIMATION2 1s infinite ;
}
*/

body {
	background: #C93E00 url('../../images/background.jpg');
	font-family: Arial, Helvetica, sans-serif;
}

p {
	line-height: 22px;
}

h1 {
	color: #cc4200;
	border-bottom: 2px solid #cc4200;
	font-size: 20px;
	padding: 5px 5px 5px 0px;
	text-transform: uppercase;
}

h2 {
	color: #636363;
	font-size: 12px;
	margin-top: -5px;
}

.content {
	background: #FFFFFF;
	box-shadow: 0px 0px 8px #000000;
	width: 918px;
	height: auto;
	min-height: 1400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}

.footer {
	color: #878787;
	float: left;
	width: 900px;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	margin-top: 20px;
}

.left-content {
	background: #FFFFFF;
	width: 600px;
	float: left;
	margin-top: 3px;
	margin-left: 5px;
	margin-right: 5px;
}

.right-content {
	background: #FFFFFF;
	width: 302px;
	float: left;
	margin-top: 3px;
}

.left-box {
	padding: 10px;
}

.right-box {
	padding: 10px;
}

.right-content ol{
	color: red;
	font-size: 12px;
}

.right-content li {
	border-bottom: 1px solid #e8e8e8;
	margin-top: 10px;
	padding-bottom: 10px;
	margin-left: -25px;
	padding: 8px;
	-webkit-transition: all 0.1s;
}

.right-content li:hover {
	color: #FFFFFF;
	background: red;
	margin-left: -20px;
	font-weight: bold;
}

.shout {
	background: #7D7D7D;
	border-radius: 3px;
	border: 1px solid #7D7D7D;
	color: #FFFFFF;
	padding: 10px;
	font-weight: bold;
	font-size: 14px;
}

.shout-poster {
	background:url('../../images/arrow.jpg') no-repeat right top;
	color: #7D7D7D;
	font-size: 12px;
	font-weight: 100;
	height:20px;
	margin-bottom:2px;
	margin-right: 10px;
	padding-top: 10px;
	text-align: right;
	padding-right: 28px;
}

.shout:hover {
	background: #FFFFFF;
	border: 1px solid #7D7D7D;
	color: #000000;
}

.navigation {
	background: #000000 url('../../images/navbar.jpg');
	height: 76px;
	width: 100%;
}

.buttons {
	background: url('../../images/buttons.jpg') bottom no-repeat;
	width: 752px;
	height: 76px;
	margin-left: auto;
	margin-right: auto;
}

.navbutton {
	height: 50px;
	float: left;
	margin-top: 30px;
}

.navbutton a:link {
	display: block;
	width: 100%;
	height: 100%
}

.header {
	background: url('../../images/avatars.png') bottom no-repeat;
	height: 235px;
	width: 918px;
	margin-left: auto;
	margin-right: auto;
}

.logo {
	background: url('../../images/logo.png');
	position: absolute;
	width: 459px;
	height: 278px;
	left: 50%;
    margin-left: -229px;
    
    -webkit-animation: PUMP-ANIMATION2 0.3s infinite ;
    -moz-animation: PUMP-ANIMATION2 0.3s infinite ;
}

.motto {
	position: absolute;
	background: #FFFFFF;
	box-shadow: 1px 1px 8px #000000;
	color: #000000;
	font-size: 20px;
	font-weight: bold;
	padding: 5px;
	top: 70px;
	left: 50%;
	margin-left: 120px;
	
	-moz-transform: rotate(-20deg);
	-webkit-animation: PUMP-ANIMATION 0.3s infinite ;
	
	-moz-animation: PUMP-ANIMATION 0.3s infinite ;
}


.motto2 {
	position: absolute;
	background: #FFFFFF;
	box-shadow: 1px 1px 8px #000000;
	color: #000000;
	font-size: 12px;
	font-weight: bold;
	padding: 5px;
	top: 80px;
	left: 50%;
	margin-left: -310px;
	
	-moz-transform: rotate(20deg);
	-webkit-animation: PUMP-ANIMATION3 0.3s infinite ;

	-moz-animation: PUMP-ANIMATION3 0.3s infinite ;
}

.blackpeas {
	position: absolute;
	background: url('../../images/blackeyedpeas.png');
	width: 394px;
	height: 380px;
	bottom:0px;
	
	-webkit-transition: all 0.2s ease-in;
	-webkit-animation: PEA-ANIMATION 1s infinite ;
	
	-moz-transition: all 0.2s ease-in;
	-moz-animation: PEA-ANIMATION 1s infinite ;
}

.trampoline {
	position: absolute;
	background: url('../../images/trampoline.png') no-repeat bottom;
	width: 500px;
	height: 400px;
	bottom:-290px;
	left: -50px;
	z-index: -50;
}

#home {
	width: 170px;
}

#stuff {
	width: 170px;
}

#swag {
	width: 110px;
}

#shoutbox {
	width: 180px;
}

#about {
	width: 112px;
}

/*ANIMATIONS WEBKIT*/

@-webkit-keyframes PEA-ANIMATION {
	0%   { -webkit-transform: translate(0px, 60px) rotate(0deg); }
	50% { -webkit-transform: translate(0px, 100px) rotate(0deg); }
	100%   { -webkit-transform: translate(0px, 60px) rotate(0deg); }
}

@-webkit-keyframes PUMP-ANIMATION {
	0%   { -webkit-transform: scale(1) rotate(-20deg); }
	20% { -webkit-transform: scale(1.1) rotate(-20deg); }
	100%   { -webkit-transform: scale(1) rotate(-20deg); }
}

@-webkit-keyframes PUMP-ANIMATION2 {
	0%   { -webkit-transform: scale(1); }
	20% { -webkit-transform: scale(1.01); }
	100%   { -webkit-transform: scale(1); }
}

@-webkit-keyframes PUMP-ANIMATION3 {
	0%   { -webkit-transform: scale(1) rotate(10deg); }
	20% { -webkit-transform: scale(1.1) rotate(10deg); }
	100%   { -webkit-transform: scale(1) rotate(10deg); }
}

/*ANIMATIONS MOZ*/
@-moz-keyframes PEA-ANIMATION {
	0%   { -moz-transform: translate(0px, 60px) rotate(0deg); }
	50% { -moz-transform: translate(0px, 100px) rotate(0deg); }
	100%   { -moz-transform: translate(0px, 60px) rotate(0deg); }
}

@-moz-keyframes PUMP-ANIMATION {
	0%   { -moz-transform: scale(1) rotate(-20deg); }
	20% { -moz-transform: scale(1.1) rotate(-20deg); }
	100%   { -moz-transform: scale(1) rotate(-20deg); }
}

@-moz-keyframes PUMP-ANIMATION2 {
	0%   { -moz-transform: scale(1); }
	20% { -moz-transform: scale(1.01); }
	100%   { -moz-transform: scale(1); }
}

@-moz-keyframes PUMP-ANIMATION3 {
	0%   { -moz-transform: scale(1) rotate(10deg); }
	20% { -moz-transform: scale(1.1) rotate(10deg); }
	100%   { -moz-transform: scale(1) rotate(10deg); }
}

.bebo-share {
	border-radius: 3px;
	border: 3px solid #e73827;
	box-shadow: 0px 1px 0px #FFFFFF inset;
	color: #FFFFFF;
	text-shadow: 0px 1px #000000;
	padding: 12px 10px 10px 50px;
	
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	
	-webkit-transition: all 0.2s ease-in;
	
	background: #f16f5c; /* Old browsers */
background: -moz-linear-gradient(top,  #f16f5c 0%, #f85032 51%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f16f5c), color-stop(51%,#f85032), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)) ; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f16f5c 0%,#f85032 51%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f16f5c 0%,#f85032 51%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f16f5c 0%,#f85032 51%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(top,  #f16f5c 0%,#f85032 51%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16f5c', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */

}

.bebo-logo {
	position: absolute;
	background: url('../../images/bebologo.png');
	width: 35px;
	height: 35px;
	margin-left: -45px;
	margin-top: -7px;
}

.bebo-share a:link, .bebo-share a:visited {
	color: #FFFFFF;
	display: block;
	text-decoration: none;
}

.bebo-share:hover {
	box-shadow: 0px 1px 0px #FFFFFF inset, 0px 0px 8px #000000;
	-webkit-transform: scale(1.08);

background: #f7a89b; /* Old browsers */
background: -moz-linear-gradient(top,  #f7a89b 0%, #fb9481 51%, #fa7b6a 51%, #f68172 71%, #f0857c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7a89b), color-stop(51%,#fb9481), color-stop(51%,#fa7b6a), color-stop(71%,#f68172), color-stop(100%,#f0857c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f7a89b 0%,#fb9481 51%,#fa7b6a 51%,#f68172 71%,#f0857c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f7a89b 0%,#fb9481 51%,#fa7b6a 51%,#f68172 71%,#f0857c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f7a89b 0%,#fb9481 51%,#fa7b6a 51%,#f68172 71%,#f0857c 100%); /* IE10+ */
background: linear-gradient(top,  #f7a89b 0%,#fb9481 51%,#fa7b6a 51%,#f68172 71%,#f0857c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a89b', endColorstr='#f0857c',GradientType=0 ); /* IE6-9 */

}