body {margin: 0; padding: 0; width: 100%; height: 100%; background: black;}
#wrapper {position: relative; background: white;}
h1 {margin: 0; padding: 22px 0 0 25px;} /*25px on left and 22px from top of page*/
#applinks img {padding: 30px 9px 34px 25px;} /*25px on left and 34px between, 30px above and 34px below*/
#lowerhalf {background: black; width: 100%;}
#lowerhalf iframe {padding: 26px 0 0 20px;} /*20px on left, 26px above*/
#lowerhalf img {padding: 42px 20px 42px 25px;} /*25px on left and 45px between, 42px above and below*/
iframe {width: 560px; height: 315px;}
@media only screen and (max-width: 600px) {
	h1 img {width: 280px;}
	#lowerhalf img {padding: 10px 0 10px 20px;}
	iframe {padding-left: 10px; width: 280px;}
}
@media only screen and (max-width: 715px) { /*when the 3 applinks no longer fit, only allow 1 across*/
	#applinks {max-width: 300px;}
	#applinks img {padding: 10px 0 10px 20px;}
}


/*For the JCarousel*/
.jcarousel-wrapper {margin:0; position: relative;}
.jcarousel {position: relative; overflow: hidden;}
.jcarousel {width: 100%;}
#phones .jcarousel {height: 364px;}
#phoneoverlay {position:absolute; width: 100%; height: 364px; background-image:url(/images/pewdiebot-site/pewdiebot_com_shade.png); background-repeat: repeat-x; background-position: bottom left; z-index: 200;}
.jcarousel ul {width: 20000em; position: relative; list-style: none; margin: 0; padding: 0;}
.jcarousel li {float: left; margin: 0 -5px 0 15px; padding:0;} /*10px to left edge of page 15px between them*/
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {position: absolute; top:-100px; z-index: 500;} /*I used the same images from tyyyp which are much taller*/
.jcarousel-control-prev {left: 5px;}
.jcarousel-control-next {right: 5px;}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {display: block;}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {display: none;}