@import url('masthead.css');
@import url('footer.css');
@import url('user_panel.css');
@import url('nav.css');
@import url('headings.css');
@import url('fonts.css');

/* Basic elements */
html {
  background: url("http://images.shaunthesheep.com/hsh-takeover/paper-repeat.jpg") repeat scroll transparent;
}

/* before xmas: url("http://images.shaunthesheep.com/2010/background-wall.jpg") background-position: center 84px; */

body {
	padding-top: 76px;
	min-height: 455px;
	font: 12px/1.5 futuramano, 'comic sans ms', chalkboard, verdana, arial, geneva, helvetica, sans-serif;
	color: #293249;
  background: url("http://images.shaunthesheep.com/hsh-takeover/sky-repeat.jpg") repeat-x scroll center 0 transparent;
}

p{
	margin: 10px 0;
}

a{
	text-decoration: none;
	color: #630e0e;
	overflow: hidden;
}

a:hover{
	color: #000;
}

strong{
	font-weight: bold;
}

em{
	font-style: italic;
}

/* Layout */

.hsh2logo {
  position: absolute;
  z-index: 1;
  top: -75px;
  left: 282px;
}

.hsh2-sm-promo {
  margin: 30px 30px 0 0;
  display: block;
  float: right;
}

#container-wrapper {
    width: 100%;
    height: 100%;
    background: url("http://images.shaunthesheep.com/hsh-takeover/road-repeat.png") center 337px repeat-x;
}

#container-wrapper-inner {
    width: 100%;
    height: 100%;
    background: url("http://images.shaunthesheep.com/hsh-takeover/characters.png") no-repeat scroll center 193px transparent;
}
.christmas #container-wrapper-inner { background-image: url("http://images.shaunthesheep.com/2010/background-wall-top-christmas.png"); }

#container{
	position: relative;
	z-index: 1003;
	margin: auto;
	width: 900px;
	min-height: 363px;
    background: url(http://images.shaunthesheep.com/2010/background-top-plank.png) top left no-repeat;
}

	#page-content{
		position: relative;
        background: url("http://images.shaunthesheep.com/2010/background-repeating-plank.png") repeat-y scroll 0 -481px transparent;
	}
	
		#page-content .inner{
			position: relative;
			padding: 30px 30px 50px 30px;
			width: 866px;
			/*  background: url(http://images.shaunthesheep.com/2010/content-inner.jpg) 18px 0 repeat-y;  */
		}
	
		#left-col{
			width: 546px;
			float: left;
		}
		
		#right-col {
            float: left;
            margin-left: 20px;
            width: 242px;
        }
			
			/* Global snippets */
			.featured{
				width: 546px;
				background: url(http://images.shaunthesheep.com/2010/main_modules/watch-bg.png) bottom no-repeat;
			}
			
				.featured .item{
					margin-left: -10px;
					width: 546px;
					height: 376px;
					background: url(http://images.shaunthesheep.com/2010/featured-bg.png);
				}
				
					.featured .item img{
						margin: 32px 16px 16px 16px;
					}
				
				.featured .details{
					padding: 0 150px 30px 35px;
				}

					.featured .details p {
    color: #FFFFFF;
    font-size: 14px;
    margin-top: 3px;
}
					
						.featured .details a.cta{
							bottom: 3px;
							right: -30px;
						}
			
			.kicker{
				margin: 0;
				padding: 20px 80px 10px 80px;
				text-align: center;
				font: 16px/1.2 Umbrage;
				font-weight: bold;
				text-transform: uppercase;
			}
			
			.cta{
				position: absolute;
				z-index: 1004;
				display: block;
				width: 170px;
				height: 66px;
				text-indent: -9000px;
			}

			/* Content Modules */
			.module{
				position: relative;
			}
			
			#left-col .module{
				width: 500px;
				margin: 40px 20px;
			}
			
			#right-col .module{
				margin: 50px 0;
			}
			
			/* Right hand modules */
			.discuss{
				height: 157px;
				background: url(http://images.shaunthesheep.com/2010/side_modules/discuss-bg.png);
			}
			
				.discuss p.kicker{
					padding: 40px 120px 20px 25px !important;
					text-align: left;
					font-size: 14px;
					background-position: 120px 5px;
					background-repeat: no-repeat;
				}
				
					.discuss p.kicker a{
						color: #293249;
					}
					
						.discuss p.kicker a strong{
							color: #630e0e;
						}
                        
.side-links {
    background: url('http://images.shaunthesheep.com/2010/side-links.png') no-repeat;
    width: 47px;
    height: 115px;
    position: absolute;
    right: -17px;
    bottom: -35px;
    z-index: 1000;
}

.link-sds {
    display: block;
    height: 32px;
    width: 47px;
}
.link-timmy {
    display: block;
    height: 35px;
    width: 47px;
}
.link-wag {
    display: block;
    height: 35px;
    width: 47px;
}

.nails {
    background: url("http://images.shaunthesheep.com/2010/nails.png") no-repeat scroll 0 0 transparent;
    bottom: -8px;
    height: 77px;
    position: absolute;
    right: 35px;
    width: 16px;
    z-index: 1000;
}
			
/* Forms */
.basic-error{
	margin: 40px;
	padding: 20px;
	border: 10px solid #300;
	background: #FFF;
}

button{
	padding: 0;
	border: 0;
	cursor: pointer;
	background: transparent;
}

#masthead input{
	height: 16px;
	padding: 2px;
	width: 100px;
	border: 0;
	font: 10px/1.5 "comic sans ms", chalkboard, verdana, arial, geneva, helvetica, sans-serif;
	background: #000 url(http://images.shaunthesheep.com/2010/textbox-base.jpg) bottom left repeat-x;
	color: #96847f;
}

/* Clearing floats */
.cleared:after, #page-content .inner:after, #characters:after, #all-games:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.cleared, #page-content .inner, #all-games{
	_height: 1%;
	display: inline-block;
}

/*  site wide error messages  */
.global-error {
	color:#8C1E23;
}


/* christmas */

.snow {
    position: absolute;
    z-index: 2000;
    overflow: hidden;
    background: url('http://images.shaunthesheep.com/2010/top-snow.png') no-repeat;
    display: none;
}

.christmas .snow { display: block; }

.flake-1 { 
    width: 37px;
    height: 53px;
    top: -32px;
    left: -2px;
    background-position: 0 0;    
}

.flake-2 {
    width: 192px;
    height: 23px;
    top: -33px;
    left: 33px;
    background-position: -37px 0;   
}

.flake-3 {
    width: 443px;
    height: 53px;
    top: -34px;
    left:  224px;
    background-position: -228px 0;   
}

.flake-4 {
    width: 234px;
    height: 32px;
    right: 0;
    top: -34px;
    background-position: -671px 0;   
}

.container-404 {
    width: 749px;
    height: 260px;
    background: url('http://images.shaunthesheep.com/404-bg.png') no-repeat;
    margin: 20px 0 0 23px;
    position: relative;    
}

.container-404 p {
    font-family: Umbrage,Arial,serif;
    font-size: 22px;
    padding: 77px 46px 0 223px;
}

.container-404 a {
    bottom: 22px;
    display: block;
    height: 56px;
    position: absolute;
    right: 32px;
    text-indent: -9999px;
    width: 179px;
    z-index: 10;  
}

/* birthday */

.birthday {
    position: absolute;
    z-index: 100;
    background: url('http://images.shaunthesheep.com/birthday-sprite.png') no-repeat;
}

.balloon-string{ background-position: 0 0; width: 43px; height: 81px; top: 145px; left: 546px; }
 
.banner{ background-position: 0 -91px; width: 323px; height: 88px; top: 2px; left: 480px; } 

.sticker-balloon-pink{ background-position: 0 -189px; width: 69px; height: 85px; top: 48px; left: 560px; } 
.profile-buddies-list .sticker-balloon-pink { bottom: 34px; right: -75px; left: auto; top: auto; }

.sticker-balloon-red{ background-position: 0 -284px; width: 64px; height: 78px; top: 14px; left: 346px; z-index: 101; }
.red-gifts { top: 553px; right: 20px; left: auto; } 

.sticker-balloon-yellow{ background-position: 0 -372px; width: 67px; height: 87px; top: 65px; left: 512px; }
.profile-buddies-list .sticker-balloon-yellow { bottom: 67px; left: -38px; top: auto; }
 
.sticker-cake{ background-position: 0 -469px; width: 91px; height: 91px; top: -42px; left: 352px; } 

.sticker-present{ background-position: 0 -570px; width: 92px; height: 92px; top: -43px; left: 91px; }
 
.sticker-shaun{ background-position: 0 -672px; width: 130px; height: 327px; top: -160px; left: 465px; } 

.sticker-timmy{ background-position: 0 -1009px; width: 91px; height: 101px; top: 33px; left: 56px; } 

.streamer-blue-horz{ background-position: 0 -1120px; width: 110px; height: 48px; top: -18px; left: 127px; } 

.streamer-blue-vert{ background-position: 0 -1178px; width: 48px; height: 110px; top: 17px; right: -14px; left: auto; } 

.streamer-green-1{ background-position: 0 -1298px; width: 72px; height: 191px; top: 18px; left: -37px; } 

.streamer-green{ background-position: 0 -1499px; width: 72px; height: 191px; top: 66px; left: 10px; } 

.streamer-pink-1{ background-position: 0 -1700px; width: 74px; height: 362px; top: 35px; left: 820px; } 

.streamer-pink-yellow{ background-position: -333px 0; width: 95px; height: 288px; top: 34px; left: -46px; } 

.streamer-pink{ background-position: -333px -298px; width: 76px; height: 361px; top: 35px; left: -28px; } 

.streamer-purple{ background-position: -333px -669px; width: 94px; height: 58px; top: 9px; left: 194px; } 

.streamer-yellow{ background-position: -333px -737px; width: 145px; height: 42px; top: 10px; left: 281px; } 

.birthday-hat {
    position: absolute;
    z-index: 1000;
    top: -36px;
    left: -81px;
}