/*
ACHTUNG!

Welcome.  This is the CSS (Cascading Style Sheet) for INTL.  It determines the
styling, coloring, size and sometimes position of the elements in INTL.  The
documentation in this CSS is not meant to teach CSS (as I'd be horrible at it anyway).
It is meant merely to act as a guideline, given some aspects of it may be confusing.
If you would like help, there are many resources, of which are included:
http://xhtml.com/en/css/reference/
http://www.w3.org/TR/CSS21/propidx.html

Feel free to edit this stylesheet.  When you edit it, it will effect the style
of the currently selected template.  If you choose to select another template at
a different time, the stylesheet you had already made for the former template
will remain, if you decide to go back to that template.  If you wish to return to
the default template at any time - in other words, to reset - just clear the
text area below, and submit.  Your current spreadsheet will return to the default.

If you have any questions, please contact me via PM (Sunny).  If you have any
suggestions for additional elements in this CSS, also contact me and I'll see
what I can do.  Either way, have fun, go nuts, I hold no blame if your
creation is utterly convoluted.
*/

/* GENERAL VALUES... these values effect everything */
/* 'body' effects the site as a whole.  In this case, the background and the font. */
body {
               background-color: #506175;
               /* background-image: url(http://uploaded.interestingnonetheless.net/Dimi/junglebg.jpg);*/
               background-image: url(http://uploaded.interestingnonetheless.net/Sunshine/junglebg222.jpg);
               font-family: verdana;
               font-size: 10pt;
              }

 td.navbar a:link, td.navbar a:visited, td.navbar a:active, 
table.footer a:link, table.footer a:visited, table.footer a:active {
               color:#85919D;
              }

table.footer  {
               color:#85919D;
               text-color:#85919D;
              }
.smlnav, .smlnav a:link, .smlnav a:visited, .smlnav a:active  {
         font-size: 7.5pt;
               line-height: 1.4em;
               color:#85919D;
               text-color:#85919D;
              }

/* These four effect the links, in their style and coloring. */
a:link,
a:visited,
a:active {
               color:#000000;
              }
a:hover {
               color:#000000;
               text-decoration:none;
              }
              
/* Nearly all the text that is bolded on the site - not all, but most - uses
   this element. You can make things somewhat interesting with this, actually.
   You can change the style to italics, you can mess up the font size, you could
   even give the bolded text a specific color.
*/
.bold {
               font-weight: bold;
              }
h1,h2 {
               margin-top: 0px;
              }

/* 'td' effects all table cells on the forum. */
td {
               border-style: none;
               border-collapse: collapse;
               padding: 2px;
              }
              
/* 'table' effects all tables on the forum. */
table {
               width: 100%;
               border-collapse: collapse;
               padding: 2px;
              }
              
/* '.indexchild' determines how much space that "Also Here" and "Subforums"
   have to their left in index.php and forum.php.
*/
.indexchild {
               margin-left: 15px;
              }
              
/* 'hr' defines the lines drawn in display.php in the posts.  It divides
   signatures from the content of the post, and also quotes.  'hr.quote'
   does the same for the quote blockquotes.
*/
hr {
               color: #506175;
               background-color: #506175;
               height: 1px;
               border: 0px;
              }
hr.quote {
               background-color: transparent;
               border-top: 1px solid #506175;
               border-bottom: 0px;
              }
              
/* 'img' effects ALL images displayed in the forum. BEWARE. */
img {
               border: none;
              }
              
              
/* LOGO & NAVBAR BULLETS */
/* 'img.logo' determines the image that is to be used for the logo.  'img.bullet'
   determines the images used for the "bullets" that are next to each link in the top navbar.
   Please keep in mind that whichever image you decide to use, you HAVE to set the height
   and width to the size of that image.  This will make sure it displays properly.  */
img.logo {
               background-image: url('/images/logos/corporate-instl-jesus.jpg');
               background-repeat: no-repeat;
	           text-decoration: none;
               height: 100px;
               width: 367px;
               top: 0;
	           left: 0;
               }
img.bullet {
               background-image: url('/images/bullet2.gif');
               background-repeat: no-repeat;
	           text-decoration: none;
               height: 8px;
               width: 8px;
               top: 0;
	           left: 0;
               }
              

/* INPUT, TEXTAREA, DROP DOWN MENUS */
/* The following elements make up this text area that you're writing
   into.  Its background, the font size, whether it has a border, and so on.  Keep
   in mind, it does not change the size of any specific text area used on the site.
   The rest change the nature of the drop down navigation box, and the input and
   select values found in the control panel.
*/
textarea, input.default {
               color: #000000;
               font-size: 10pt;
               background-color: #c6c6c6;
               border:1px solid #000000;
              }
select.default {
               color: #000000;
               font-size: 10pt;
               background-color: #c6c6c6;
              }
input.hopto {
               color: #000000;
               font-size: 8pt;
               font-family: verdana;
              }
select.hopto {
               color: #000000;
               font-size: 8pt;
               font-family: verdana;
               background-color: #c6c6c6;
              }
input.small {
               color: #000000;
               font-size: 8pt;
               font-family: verdana;
               border: 1px #000000 solid;
               background-color: #c6c6c6;
              }
textarea.reply {
               color: #000000;
               font-size: 10pt;
               background-color: #c6c6c6;
               border:1px solid #000000;
              }
textarea.sig {
               color: #000000;
               font-size: 10pt;
               background-color: #c6c6c6;
               border:1px solid #000000;
              }
form {
               margin: 0;
               padding: 0;
              }
              
              
/* HACKS AND SHORTCUTS */
/* '.fit' is a hack.  It is meant to adjust table cells so that they fit around
   an object, which is usually an image.  A lot of scripts use this.  An example
   is files.php.  The thumbnails table cell automatically adjusts to the size of
   the thumbnail because of this.
*/
.fit {
               width: 1%;
              }
              
/* '.nowrap' is another hack.  It is also used everywhere.  It makes it so that
   text in a table cell does not make a new line when it reaches the end of the cell.
*/
.nowrap {
               white-space: nowrap;
              }
              

/* COLORS */
/* These are the 9 colors used throughout this forum in varying ways.
   if you would like to see them in action, then all you need to do is visit:
   http://forums.interestingnonetheless.net/colortest.php
*/
.dark {
               background-color: #85919D;
              }
.dark2 {
               background-color: #acb6c4;
              }
.dark3 {
               background-color: #bababa;
              }
.mid {
               background-color: #c6c6c6;
              }
.mid2 {
               background-color: #c4c9cf;
              }
.mid3 {
               background-color: #cfcfcf;
              }
.light {
               background-color: #e0e0e0;
              }
.light2 {
               background-color: #d7d7d7;
              }
.light3 {
               background-color: #ececec;
              }

                      
/* FONT SIZE */
/* '.sml' exists to effect how tiny print (forum descriptions, data, usernames)
   are displayed across the forum.  Keep in mind, this is used quite frequently.
   '.med' and '.large' exist sparingly, usually used for usernames.
*/
.sml {
               font-size: 7.5pt;
               line-height: 1.4em;
              }
.med {
               font-size: 10pt;
              }
.large {
               font-size: 12pt;
              }



/* BORDER */
/* These three values effect ALL the borders found through this forum.  It is
   recommended that any change to the effect of one be applied to them all, however,
   adding the 'border-left' attribute to the '.rightborder' and 'border-right' to
   the '.leftborder' is generally discouraged.
*/
.border {
               border:1px solid #000000;
               border-collapse: collapse;
              }
.rightborder {
               border-top:1px solid #000000;
               border-right:1px solid #000000;
               border-bottom:1px solid #000000;
               border-collapse: collapse;
              }
.leftborder {
               border-top:1px solid #000000;
               border-left:1px solid #000000;
               border-bottom:1px solid #000000;
               border-collapse: collapse;
              }

                 
/* TEXT ALIGNMENT */
/* these values shape how text is displayed on the site.  Whatever is on the right
   of a table cell uses '.right' and whichever is in the center uses '.center'.
   '.valign', 'malign' and '.balign' are used rarely, in those cases where text
   needs to be displayed from the top/middle/bottom (as in how the text in
   posts are displayed in display.php).  Most text that is aligned left is
   handled by the 'body' element, although some scripts use '.left'.
*/
.right {
               text-align: right;
              }
.center {
               text-align: center;
              }
.left {
               text-align: left;
              }
.valign {
               vertical-align: top;
              }
.malign {
               vertical-align: middle;
              }
.balign {
               vertical-align: bottom;
              }

                 
/* USERGROUP STYLES */
/* This should be highly interesting to use.  This changes the usergroup colors
   as displayed on the forum.  You can mess them up as much as you like, and if you
   know the id number of the group, you can make up a style for any usergroup you like.
   (5 = Admins, 1 = Premium Members, 3 = Moderators, 82 = INTL Alumni, 68 = Reel RS Crew)
*/
.usergroup5, a.usergroup5 {
               color: #822830;
               font-weight: bold;
              }
.usergroup1, a.usergroup1 {
               color: #0000A0;
              }
.usergroup3, a.usergroup3, .usergroup193, a.usergroup193 {
               color: #2B633A;
               font-weight: bold;
              }
.usergroup82, a.usergroup82 {
               font-weight: bold;
              }
.usergroup68, a.usergroup68 {
               font-weight: bold;
              }
.usergroup194, a.usergroup194 {
               color: #330033;
               font-weight: bold;
              }


/* HEADER.PHP */
/* Both 'navbar' elements deal with the links at the very top of the forum.
   '.headerwelcome' styles the welcome messge, while '.headercp' does the same
   for the control panel links.  '.headerlogin' styles the login bar.
*/
table.navbar {
               width: auto;
               border: 0px;
              }
td.navbar {
               text-align: left;
               vertical-align: top;
               white-space: nowrap;
               font-size: 8pt;
              }
td.headerwelcome {
               text-align: left;
               white-space: nowrap;
               font-size: 8.5pt;
              }
td.headercp {
               text-align: right;
               white-space: nowrap;
               font-size: 8.5pt;
              }
td.headerlogin {
               background-color: #F1DADA;
               white-space: nowrap;
              }

                          
/* INDEX.PHP */
/* 'table.index' is used to adjust the size and margins of the index forum table.
   The rest adjust the size of each table cell column, as described in their name.
   'td.forumtitle:hover' adjusts the background color when you hover over forums.
*/
table.index {
               width: 100%;
               border-collapse: collapse;
               padding: 2px;

               margin-top: 3px;
               margin-bottom: 3px;
              }
td.forumheader {
               width: 50%;
              }
td.forumnewpost {
               width: 1%;
              }
td.forumtitle {
               width: 50%;
              }
/* td.forumtitle:hover {
              background-color: #e0e0e0;
              text-decoration: none;
              }     */
td.forumthreads {
               width: 7%;
              }
td.forumposts {
               width: 7%;
              }
td.forumlastpost {
               width: 21%;
              }
td.forummod {
               width: 15%;
              }


/* FORUM.PHP */
/* 'table.forum' is used to adjust the size and margins of the forum thread table.
   'td.thread' styles the thread table cells, 'td.threadtag' and 'td.threadbox' styles the threadtags
   that are next to each thread.  '.filtertag' gives style to the threadtags in
   the filter option at the bottom.  'td.threadtitle:hover' sets the style for
   when you hover over threads.  'table.bottomforum' gives the margins for the
   search table at the very bottom of forum.php.
*/
table.forum {
               width: 100%;
               border-collapse: collapse;
               padding: 2px;
               margin-top: 3px;
               margin-bottom: 3px;
              }
td.thread {
               white-space: nowrap;
              }
td.threadtag {
               white-space: nowrap;
               width: 1px;
               padding-right: 5px;
              }
td.threadbox{
               width: 1px;
              }
.filtertag {
               white-space: nowrap;
               padding-right:5px;
              }
/* td.threadtitle:hover {
              background-color: #c4c9cf;
              text-decoration: none;
              } */
table.bottomforum {
               margin-bottom: 3px;
              }
              
              
/* DISPLAY.PHP */
/* 'table.display' is used to adjust the table used to display the posts (and
   to seperate them from one another... each post is its own table).  'td.displayuser'
   styles the part of the post which provides the username and user data.  'td.displaypost'
   styles the actual area where the message of the post is displayed.
*/
table.display {
               margin-top: 2px;
               margin-bottom: 1px;
              }
td.displayuser {
               width: 20%;
              }
td.displaypost {
               width: 80%;
               vertical-align: top;
              }

                        
/* POST.PHP */
/* 'td.post' merely provides the size for the "Message Body:", "Signature:" table cell
   used for post.php.
*/
td.post {
               width: 25%;
               white-space: nowrap;
              }

                         
/* POLL.PHP */
/* 'td.poll' does the same thing as 'td.post' above, just for polls.  The other two
   provide the size and border limitations on each poll option title and given data.
*/
td.poll {
               width: 25%;
               white-space: nowrap;
              }
td.polloptiontitle {
               width: 25%;
               white-space: nowrap;
               border-collapse: collapse;
               border-left: 1px solid #000000;
               border-right: 1px solid #000000;
              }
td.polloption {
               width: 75%;
               white-space: nowrap;
               border-collapse: collapse;
               border-left: 1px solid #000000;
               border-right: 1px solid #000000;
               padding: 3px;
              }
              
              
/* PROFILE.PHP */
/* 'table.profile' adjusts the table used to display all profile information.
   'td.profileleft', 'td.profilemain', 'td.profileright' divide the profile into
   three distinct columns.  The final three 'div' elements define the left sidebar
   used for the profile.  'div.profile' defines each block, 'div.profileinfotitle'
   styles the title of that block, (eg. "Avatar & Title") and 'div.profileinfo' styles the data
   within that block.
*/
table.profile {
               margin-top: 4px;
               margin-left: 1px;
               margin-bottom: 3px;
               white-space: nowrap;
              }
td.profileleft {
               width: 15%;
               vertical-align: top;
              }
td.profilemain {
               width: 70%;
               vertical-align: top;
              }
td.profileright {
               width: 15%;
               vertical-align: top;
               white-space: nowrap;
              }
div.profile {
               width: 99%;
               margin-top: 3px;
               margin-bottom: 3px;
               border-collapse: collapse;
               border: 1px solid #000000;
               white-space: nowrap;
              }
div.profileinfo {
               padding: 2px;
               white-space: normal;
              }
div.profileinfotitle {
               padding: 2px;
               border-bottom: 1px solid #000000;
              }

                   
/* HEADER-CP.PHP */
/* This is rather tricky CSS, if you don't know what you're doing.  This is meant
   to handle the sidebar used for the cpanel scripts.  'td.cpsidebar' defines the table cell
   that is used to contain the information in the sidebar.  'li.itemtitle' and 'li.toptitle'
   give the menu titles for each section (eg. "Personal Profile").  'ul' sets the left margin.
   'the rest of the scripts - mostly the 'li' elements - define the line-spacing, the margins,
   padding, colors and font-styles used for the links in the menu (eg. "Manage Files").
*/
td.cpsidebar {
               width: 20%;
               vertical-align: top;
               border-collapse: collapse;
               white-space: nowrap;
              }
div.cpmenu li.itemtitle {
               display: block;
               padding: 3px;
              }
div.cpmenu li.toptitle {
               display: block;
               padding: 3px;
               margin-top: -2px;
               border-top: 1px solid #000000;
              }
div.cpmenu ul {
               text-align: left;
               list-style: none;
               margin: 0px;
               padding: 0px;
              }
div.cpmenu li {
               display: inline;
              }
div.cpmenu li.itempm {
               margin-left: 25px;
              }
div.cpmenu li.item a {
               display: block;
               margin-left: 15px;
               padding: 2px;
               width: auto;
               font-size: 8.5pt;
              }
div.cpmenu li.itempm a {
               display: block;
               margin-left: 25px;
               padding: 2px;
               width: auto;
               font-size: 8.5pt;
              }
div.cpmenu a:link, div.cpmenu a:visited, div.cpmenu a:hover {
               text-decoration: none;
              }
div.cpmenu li.item a:hover, li.itempm a:hover {
               display: block;
               background-color: #e0e0e0;
               text-decoration: none;
              }
              
/* CPANEL.PHP, PM.PHP et al */
/* These style the information which is not in the sidebar in the control panel.
   'td.cpcontent' is the table cell used for the main content, while 'td.cpright'
   is used to create that open space to the right of the control panel content.
   'td.cpbox' is an extention of the '.fit' hack used above, but only for the control panel.  '
   td.cptitle' is used for the "Subscriptions" and "PM" scripts, as a means to
   space out the thread/pm titles.
*/
td.cpcontent {
               width: 65%;
               vertical-align: top;
               border-collapse: collapse;
              }
td.cpbox {
               width: 1%;
              }
td.cptitle {
               width: 50%;
               white-space: nowrap;
              }
td.cpright {
               width: 15%;
               vertical-align: top;
               border-collapse: collapse;
               white-space: nowrap;
              }
              
              
/* SEARCH.PHP */
/* 'td. search' and 'td.pastqueries' divide search.php into two columns.  'td.search'
   styles the table cell used to hold the processes to search.  'td.pastqueries' styles
   the right sidebar, which gives your former search queries.
*/
td.search {
               width: 80%;
               vertical-align: top;
               border-collapse: collapse;
              }
td.pastqueries {
               width: 20%;
               vertical-align: top;
               white-space: nowrap;
              }

              
/* GALLERY.PHP */
/* 'td.gallery' styles each block that contains an image in the gallery.php script.
   Both 'gallerycomments' elements adjust the table that's below the image when you
   click on the image.  It's the table that contains the author's comments and details
   about the image.
*/
td.gallery {
               width: 20%;
               height: 20%;
              }
table.gallerycomments {
               width: 60%;
               margin-left: auto;
               margin-right: auto;
              }
td.gallerycomments {
               width: 50%;
              }
              
              
/* USERGROUPS.PHP */
/* 'td.usergrouptitle' is meant to deal with the style of the usergroup title and its description. */
td.usergrouptitle {
               width: 50%;
               white-space: normal;
              }

              
/* ARCADE.PHP*/
/* These five are used to shape the table cells which each decribe - the game titles,
   the game scores, the comments given, and the arcade stat's table.
*/
td.gametitle {
               width: 25%;
              }
td.gamescores {
               width: 10%;
              }
td.gamecomment {
               width: 40%;
              }
td.arcadestatside {
               width: 15%;
              }
td.arcadestat {
               width: 50%;
              }
.indarc {
               margin-left:35px;
              }


/* EXTRAS */
/* This is a unique element, which styles the redirect and error pages.  These percentages
   are used primarily to center the element.  You take the 'width' and divide it by two to get
   the 'margin-left.'  Unlike this example, if you wanted it centered, you would have taken the
   height (which would have been 40%) and divided it by two to get 'margin-top.'
*/
div.redirect {
               position:absolute;
	           top: 50%;
	           left: 50%;
               width: 80%;
	           margin-top: -20%;
	           margin-left: -40%;
               text-align: center;
               padding: 20px;
              }
/* This is to provide an image to the bullets that show up for the BBCode [*]. */
li.bullet {
               list-style-image: url('/images/bullet2.gif');
               }