/***********************************
 * html components                 *
 ***********************************/
 
  body { 
  	background : rgb(200, 25, 200);
  	width: 900px;
  }
  
  
  a:link {
  	color: white; 
  	text-decoration: none; 
  	font-weight: bold;
  }
  
  a:visited {
  	color: white; 
  	text-decoration: none; 
  	border: 0;
  }
  
  a:hover {
  	text-decoration: underline;
  } 

/************************************
 * unique components                *
 ************************************/
   
  #StyleSwitch {
  	position: absolute;
  	left: 720px;
  	top: 1px;
  	z-index: 1;
  	font-size: xx-small;
  	font-family: courier;
  	font-weight: lighter;
  }
   
  #StyleSwitchText {
  	display: inline;
  }
   
  #PageBorder {
  	background: rgb(255, 50, 255);
  	background-position: 10% 5px;
  	padding: 10px;
  	margin: 10px auto 0 auto;
  	border: 4px solid rgb(150, 0, 150);
  	width: 880px;
	min-height: 530px;
  	position: relative;
  }
  
  #PageBorder:before {
  	display: block;
  	padding: 0;
  	margin-top: -23px;
  	margin-left: 20px;
  	margin-bottom: -30px;
  	border: none;
  	content: url(./../images/title.gif);
  }
  
  #Comic {
  	width: 552px;
  	top: 50px;
    	left: 150px;
    	margin-bottom: 10px;
    	position: relative;
  }
    
  #ComicPoster, #ComicDate {
	display: none;
  	visibility: hidden;
  }
    
  #ComicImage {
  	border: rgb(150, 0, 150) 3px solid;
  	width: 552px;
  	padding: 0;
  }
  
  #ComicTitle {
  	color: white;
    	font-weight: bolder;
    	background: rgb(150, 0, 150);
    	border: 0;    
  	padding: 3px;
  	padding-left: 10px;
  	width: 545px;
  }
  
  #Ad {
  	position: absolute;
  	top: 35px;
  	right: 30px;
  }
  
  #NavButtons {
  	margin: 0 auto;
  	padding: 0;
  }
  
  #FirstComic, #LatestComic, #NextComic, #PrevComic, #Archive, #Forum, #NoPrevComic, #NoNextComic {
  	float: left;
  	position: absolute;
    	color: white;
    	font-weight: bolder;
    	background: rgb(150, 0, 150);
    	border: 0;  
  	left: 20px;
  	top: 35px;
  	width: 100px;
  	padding-left: 5px;
  	padding-right: 5px;
    	text-align: center;
    	margin: 0 auto;
  }
  
  #PrevComic, #NoPrevComic {
  	top: 35px;
  }
  
  #NextComic, #NoNextComic {
  	top: 60px;
  }
  
  #FirstComic {
  	top: 85px;
  }
  
  #LatestComic {
  	top: 110px;
  }
  
  #Archive {
  	top: 135px;
  }
  
  #Forum {
  	top: 160px;
  }
    
  #NoNextComic, #NoPrevComic {
  	color: rgb(175, 175, 175);
  }
  
  #RantBorder {
    	position: relative;
    	margin-top: 50px;
  }
  
  div.Rant {
  	margin-bottom: 10px;
  }
  
  div.RantPoster, div.RantTitle {
  	display: inline;
  	margin-bottom: 0;
  }
  
  div.RantTitle:after {
  	content: ": ";
  }
  
  div.RantPost, div.RantTitle, div.RantPoster {
  	color: white;
  	padding: 2px;
  	background: rgb(190, 25, 190);
  }
  
  div.RantPoster {
  	font-size: x-small;
  }
  
  div.RantPoster:before {
  	content: " by ";
  }
  
  div.RantPost {
    	padding: 3px;
  	border: 3px solid rgb(190, 25, 190);
  }
  
  #Verification {
  	clear: both;
  	margin: 0 auto;
  	color: white;
  	font-size: x-small;
  	font-weight: bolder;
  	text-align: center;
  }
  
  #Verification p {
  	text-align: center;
  	padding: 0 15px 0 0;  
  	display: inline;
  }
  
  #Footer {
  	clear: both;
  	margin: 25px 0 0 0;
  	color: white;
  	font-size: xx-small;
  	text-align: center;
  }
  
  #Footer p {
  	display: block;
  	margin: 0 0 0 0;
  	padding: 0 0 0 0;
  }
  
 /***********************************
  * comic components                *
  ***********************************/
  
  div.ComicBorder {
  	margin: 0 0;
  	padding: 0 0;
  	background: black;
  }
  
  div.ComicPanel {
  	display: inline;
  	margin: 1px 1px 0 0;
  }
  
 /***********************************
  * archive components              *
  ***********************************/
  
  #ArchiveDisplay {
    	margin: 40px auto;
    	margin-bottom: 10px;
    	position: relative;
    	width: 100%;
  }
  
  #ArchiveYear {
  	margin: 0 auto;
  }
  
  div.Year, div.CurrentYear {
  	float: left;
  	font-weight: bolder;
	border: 1px solid black;  	
	padding: 0 2px 0 2px;
	margin: 0 2px 0 2px;
	width: 40px;
	text-align: center;
	background-color: rgb(150, 0, 150);
  }
  
  div.CurrentYear {
  	background-color: rgb(255, 120, 255);
  }
    
  #ArchiveMonths {
  	margin: 0 auto;
  	position: relative;
  	clear: both;
  }
  
  div.Month {
  	height: 155px;
  	width: 170px;
  	float: left;
  	margin: 5px 5px;
  }
  
  div.MonthName {
  	text-align: center;
  	color: white;
  	font-weight: bolder; 
  	clear: both;
  }
  
  div.MonthNumber {
  	display: none;
  	visibility: hidden;
  }
  
  div.DayPadding {
  	float: left;
  	text-align: center;
  	width: 20px;
  	height: 20px;
  	margin: 2px; 
  }
  
  div.DayComic, div.Day {
  	float: left;
  	text-align: center;
  	width: 20px;
  	height: 20px;
  	margin: 1px;
  	border: 1px solid black;
  	background-color: rgb(220, 50, 220);
  }
    
  div.DayComic {
  	background-color: rgb(255, 100, 255);
  }