/* Global CSS -- all pages need this */

body {
  background-color: #000000;
  background-position: center top;
  font-family: "Arial", "Verdana", "Helvetica", sans-serif;
  font-size: 90%;
  font-size: 12px;
}

a:link { color:#000000; text-decoration: none; font-weight: bold; }
a:visited { color: #000000; text-decoration: none; font-weight: bold; }
a:hover { color: #ff0000; text-decoration: none; font-weight: bold; }
a:active { color: #000000; text-decoration: none; font-weight: bold; }


/* Wrapper CSS -- keeps everything in line */

#rantwrapper {
  width: 100%;
  margin: 0;
  background: transparent; 
}

#rantallwrap {
  width: 960px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff none repeat scroll 0 0;
}


/* Page Header CSS -- controls the header wrapper and image */

#ranthwrap {
  width: 960px;
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #000000;
}

#rantheader {
  position:relative;
  width: 950px;
  height: auto;
  padding: 5px;
  padding-top: 10px;
  background-color: #000000;
  color: #ffffff;
}

.ranthead {
  background-color: #000000;
  background-image:url('../logo-head.gif');
  background-repeat: no-repeat;
  background-position: 0px -10px;
}

/* Page Title CSS -- controls the main page title */

.ranttitle {
  margin-left: 90px;
  color: #ffffff;
  font-family: "Arial Black";
  font-size: 45px;
  line-height: 30px;
  font-variant: small-caps;
}

.ranttitlesolo {
  margin-left: 90px;
  color: #ffffff;
  font-family: "Arial Black";
  font-size: 75px;
  line-height: 60px;
  font-variant: small-caps;
}

.rantred {
  color: #ff0000;
}

.rantsubtitle {
  margin-left: 135px;
  color: #ffffff;
  font-family: "Arial Black";
  font-size: 20px;
  letter-spacing: 1px;
}


/* Page Title CSS -- controls the project page titles */

.projecttitle {
  margin-left: 90px;
  color: #ffffff;
  font-family: "Arial Black";
  font-size: 75px;
  line-height:55px;
  font-variant: small-caps;
}


/* Menu Bar CSS -- controls the middle menu bar (NOT the rantmediabar) */

#rantmenu {
  position:relative;
  width: 960px;
  height: auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000;
  color: #ffffff;
}

.rantsubmenu {
  width: 960px;
  padding: 0;
  border: 1px solid #000000;
  border-bottom: 0;
  background: #ffffff;
  color: #000000;
  text-align:center;
}


/* News Header CSS -- controls the news image and text; video box */

#rantnews {
  position:relative;
  width: 960px;
  height: auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000;
  color: #ffffff;
}


/* Newsblock CSS -- controls the news image and text */

.rantbignews {
  width: 960px;
  height: 135px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
}

.rantnewsimage {
  float: left;
  width: 480px;
  height: 135px;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.rantnewstext {
  float: left;
  width: 215px;
  height: 135px;
  padding-left: 10px;
  padding-right: 15px;
  border: 0;
  color: #000000;
  text-align: justify;
}


/* Video Box CSS -- controls the video box in the newsblock */

.rantvideobox {
  float: right;
  width: 240px;
  height: 135px;
  border: 0;
  color: #000000;
}


/* Content CSS -- controls the content wrapper of ALL pages */

#rantmainwrap {
  position: relative;
  width: 960px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
}


/* Column CSS -- controls the main columns (project and news) */

.rantcolumn {
   position: relative;
   float: left;
   width: 240px;
   right: 0px;
   background-color: #ffffff;
}

.columnheader {
   width: 230px;
   height: auto;
   padding: 0;
   margin: 5px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   border: 1px solid #000000;
   border-top: 3px double #ffffff;
   border-bottom: 3px double #ffffff;
   font-family: "Arial";
   color: #ffffff;
   font-weight: bold;
   text-transform: uppercase;
}

.projectcolumn {
   width: 230px;
   height: auto;
   padding: 0px;
   background: #ffffff;
   text-align: center;
}


/* Project Box CSS -- controls the project boxes within columns */

.projectboxheader {
   width: 230px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.projectbox {
   width: 230px;
   height: auto;
   min-height: 180px;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}


/* News Box CSS -- controls the news box (adjustable height project box) */

.newsbox {
   width: 230px;
   height: auto;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}


/* Image Box CSS -- controls the image content in project and news boxes */

.imagebox {
   width: 230px;
   height: 125px;
   margin-top: 1px;
   background-color: #ffffff;
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
}

img.imagebox {
   width: 230px;
   height: 125px;
   border: 0;
   border-top: #ffffff;
}

a.imagebox:link { border: 0; }
a.imagebox:visited { border: 0; }
a.imagebox:hover { border: 0; }
a.imagebox:active { border: 0; }


/* Text Box CSS -- controls the text content in project boxes */

.textbox {
   width: 220px;
   height: auto;
   min-height: 45px;
   margin: 5px;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}


/* Text Box CSS -- controls the text content in news boxes */

.newstext {
   width: 220px;
   height: auto;
   min-height: 45px;
   margin: 5px;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}


/* Content CSS -- controls the content of project pages */

.projectspace {
   padding: 0;
   padding-top: 2px;
   margin: 0;
   margin-top: -2px;
   background-color: #ffffff;
   font-size: 3px;
}

.rantcontent {
   position: relative;
   float: left;
   width: 715px;
   padding-top: 5px;
   margin-top: -2px;
   margin-left: 5px;
   right: 0px;
   background-color: #ffffff;
   border-top: 1px solid #000000;
}

.contentheader {
   width: 713px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0;
   background-color: #000000;
   background-image: url('images/bg1.png');
   border: 1px solid #ffffff;
   border-top: 3px double #ffffff;
   border-bottom: 3px double #ffffff;
   color: #ffffff;
   font-family: "Arial";
   font-weight: bold;
   text-transform: uppercase;
}

.maincontent {
   width: 713px;
   height: auto;
   padding: 0px;
   background: #ffffff;
   text-align: center;
}


/* Content Box CSS -- controls the content boxes on project pages */

.contentboxheader {
   width: 710px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.contentbox {
   float: left;
   width: 710px;
   height: auto;
   min-height: 25px;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}

.contenttext {
   width: 700px;
   height: auto;
   margin: 5px;
   margin-top: -5px;
   margin-bottom: -5px;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}

img.caps {
   border: 1px solid #000000;
}

a.cont:link { color: #000000; text-decoration: none; font-weight: normal; }
a.cont:visited { color: #000000; text-decoration: none; font-weight: normal; }
a.cont:hover { color: #ff0000; text-decoration: none; font-weight: bold; }
a.cont:active { color: #000000; text-decoration: none; font-weight: normal; }


/* Wide Content Box CSS -- controls the wide content boxes on graphics pages */

.wcontentboxheader {
   width: 945px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.wcontentbox {
   float: left;
   width: 945px;
   height: auto;
   min-height: 125px;
   margin-left: 7px;
   margin-right: 7px;
   margin-bottom: 5px;
   background: #ffffff;
}

.wcontenttext {
   width: 935px;
   height: auto;
   margin: 5px;
   margin-top: -5px;
   margin-bottom: -5px;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}


/* Gallery Box CSS -- controls the gallery boxes on project pages */

.gallerybox {
   width: 710px;
   height: auto;
   min-height: 75px;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}

.wgallerybox {
   width: 945px;
   height: auto;
   min-height: 75px;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}


/* Store Gallery CSS -- controls the store galleries on item pages */

.storegallery1 {
   float: left;
   width: 460px;
   height: auto;
   min-height: 310px;
   margin: 3px;
   margin-right: 2px;
   background: #ffffff;
   border: 0;
}

.storegallery2 {
   float: right;
   width: 470px;
   height: auto;
   min-height: 310px;
   margin: 3px;
   margin-left: 3px;
   background: #ffffff;
   border: 0;
}


/* Store Content CSS -- controls the store content */

.storecontent {
   position: relative;
   float: left;
   width: 808px;
   padding-top: 5px;
   margin-top: -2px;
   left: 1px;
   background-color: #ffffff;
   border-top: 1px solid #000000;
}

.storemain {
   width: 800px;
   height: auto;
   padding: 0px;
   background: #ffffff;
   text-align: center;
}

.storecontentheader {
   width: 797px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.storecontentbox {
   width: 797px;
   height: auto;
   min-height: 100px;
   margin-bottom: 5px;
   background: #ffffff;
   border: 1px solid black;
}

.storecontenttext {
   width: 787px;
   height: auto;
   margin: 5px;
   margin-top: -5px;
   margin-bottom: -5px;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}


/* Store Category Boxes CSS -- controls the store category boxes */

.storecategory {
   position: relative;
   float: left;
   width: 950px;
   padding: 0;
   margin-top: -2px;
   margin-left: 5px;
   margin-bottom: 20px;
   right: 0;
   background-color: #ffffff;
   border: 1px solid #000000;
}

.storecategoryheader {
   width: 950px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.storetext {
   width: 948px;
   height: auto;
   padding: 0;
}


/* Store Box CSS -- controls the item boxes on store pages */

.storeboxheader {
   width: 150px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.storebox {
   width: 150px;
   height: auto;
   float: left;
   min-height: 25px;
   margin: 3px;
   background: #ffffff;
   border: 1px solid black;
}

.itembox {
   width: 150px;
   height: 100px;
   margin-top: 1px;
   padding-top: 1px;
   padding-bottom: 1px;
   background-color: #ffffff;
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
}

img.itembox {
   width: 150px;
   height: 100px;
   border: 0;
   border-top: #ffffff;
}

a.itembox:link { border: 0; }
a.itembox:visited { border: 0; }
a.itembox:hover { border: 0; }
a.itembox:active { border: 0; }

.descbox {
   width: 140px;
   height: auto;
   min-height: 45px;
   margin: 5px;
   color: #000000;
   font-family: "Arial";
   text-align: center;
}


/* Cart Column CSS -- controls the cart area */

.storespace {
   padding: 0;
   padding-top: 2px;
   margin: 0;
   margin-top: -3px;
   background-color: #ffffff;
   font-size: 3px;
}

.rantstorecart {
   position: relative;
   float: left;
   width: 150px;
   right: 2px;
   background-color: #ffffff;
}

.storecartcolumn {
   width: 145px;
   height: auto;
   padding: 0px;
   background: #ffffff;
   text-align: center;
}


/* Cart Box CSS -- controls the cart box on store pages */

.cartboxheader {
   width: 145px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.cartbox {
   width: 145px;
   height: 100px;
   margin-top: 1px;
   background-color: #ffffff;
   border: 1px solid #000000;
}

.carttext {
   width: 135px;
   height: auto;
   min-height: 25px;
   margin: 5px;
   margin-top: 15px;
   color: #000000;
   font-family: "Arial";
   text-align: center;
}


/* Community CSS -- controls the Community page */

.commcategory {
   position: relative;
   float: left;
   width: 950px;
   padding: 0;
   margin-top: 7px;
   margin-left: 5px;
   margin-bottom: 10px;
   right: 0;
   background-color: #ffffff;
   border: 1px solid #000000;
   text-align: justify;
}

.commtext {
   width: 938px;
   height: auto;
   margin: -5px;
   margin-left: 7px;
   margin-right: 7px;
}


/* Ranter Gallery CSS -- controls the Listener Galleries */

.commgalcategory {
   position: relative;
   float: left;
   width: 950px;
   padding: 0;
   margin-top: 7px;
   margin-left: 5px;
   margin-bottom: 10px;
   right: 0;
   background-color: #ffffff;
   border: 1px solid #000000;
   text-align: center;
}


.rantergallery {
   width: 948px;
   height: auto;
   margin: 7px auto;
}

.rantergallery img {
   margin-right: 1px;
   border: 1px solid #000000;
}


/* Staff Boxes CSS -- controls the staff boxes */

.staffcategory {
   position: relative;
   float: left;
   width: 950px;
   padding: 0;
   margin-top: -2px;
   margin-left: 5px;
   margin-bottom: 10px;
   right: 0;
   background-color: #ffffff;
   border: 1px solid #000000;
   text-align: left;
}

.staffcategoryheader {
   width: 950px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.stafftext {
   width: 935px;
   height: auto;
   padding: 5px;
   padding-right: 10px;
   text-align: justify;
}

.stafftext img {
   margin: 15px 30px 20px 15px;
   border: 1px solid #000000;
}

.stafftext h1 {
   font-size: 17px;
   font-weight: bold;
   line-height: 8px;
   margin-top: 30px;
}

.stafftext h2 {
   color: #ff0000;
   font-size: 14px;
   font-weight: normal;
}

.stafftext p {
   margin: 25px 25px auto;
}

.stafftext p:first-letter {
   float: left;
   padding-right: 1px;
   font-size: 40px;
   font-weight: bold;
}

.trans {
   color: transparent;
}


/* Episodes CSS -- controls the episode pages */

.episodeboxtext {
   width: 700px;
   height: auto;
   margin: 0;
   color: #000000;
   font-family: "Arial";
   text-align: justify;
}

.episodewrap {
   float: left;
   width: 710px;
   margin: 0;
   margin-top: 3px;
}

.episodeshape {
   float: left;
   padding: 3px 5px;
   width: 695px;
   margin-bottom: 3px;
}

.episodecap {
   float: left;
   width: 320px;
   height: 240px;
   margin: 3px;
}

.episodedesc {
   float: right;
   width: 355px;
   height: auto;
   min-height: 240px;
   padding: 0 3px 0 4px;
}

.epfloatleft {
	float: left;
	width: 325px;
	margin: auto 10px;
	text-align: left;
}

.epfloatright {
	float: right;
	width: 325px;
	margin: auto 10px;
	text-align: left;
}


/* Chat CSS -- controls the chat page */

.chattext {
   float: left;
   width: 935px;
   height: auto;
   padding: 7px;
   padding-bottom: 9px;
   text-align: justify;
}

.chattext h1 {
   font-size: 17px;
   font-weight: bold;
   line-height: 8px;
}

.textsplitleft {
	float: left;
	width: 440px;
}

.textsplitright {
	float: right;
	width: 440px;
}

.stafftitle {
  font-size: 14px;
  font-weight: bold;
}

/* Chat Box CSS -- controls the chat box page -- BETA */

.chatboxheader {
   width: 458px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.webchatbox {
   width: 458px;
   height: auto;
   float: left;
   min-height: 25px;
   margin: 3px;
   background: #ffffff;
   border: 1px solid black;
}

.swchatbox {
   width: 458px;
   height: auto;
   float: right;
   min-height: 25px;
   margin: 3px;
   background: #ffffff;
   border: 1px solid black;
}

.chatinfo {
   width: 448px;
   height: auto;
   min-height: 45px;
   margin: 5px;
   color: #000000;
   text-align: justify;
}

.chatguideheader {
   width: 927px;
   height: auto;
   padding: 3px 0 3px 0;
   margin: 0px;
   background-color: #000000;
   background-image: url('images/bg1.png');
   color: #ffffff;
   font-family: "Arial";
   text-align: center;
   font-weight: bold;
   text-transform: uppercase;
}

.chatguide {
   width: 927px;
   height: auto;
   float: left;
   min-height: 10px;
   margin: 3px;
   background: #ffffff;
   border: 1px solid black;
}

.chatguidetext {
   width: 917px;
   height: auto;
   padding: 0 10px;
   text-align: justify;
}


/* Footer CSS -- controls the page footer */

#rantfooter {
   position: relative;
   float: inherit;
   width: 960px;
   margin-left: auto;
   margin-right: auto;
   background-color: #000000;
   border: 1px solid #000000;
   border-top: 0;
   border-bottom: 0;
   color: #ffffff;
   text-align: center;
   font-variant: small-caps;
}

a.footer:link { color:#ffffff; font-family: Arial; text-decoration: none; font-weight: bold; }
a.footer:visited { color:#ffffff; font-family: Arial; text-decoration: none; font-weight: bold; }
a.footer:hover { color:#ff0000; font-family: Arial; text-decoration: none; font-weight: bold; }
a.footer:active { color:#ffffff; font-family: Arial; text-decoration: none; font-weight: bold; }