/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& GWS CSS - CSS FOR SITE SKINS (CUSTOMISABLE EDITION) Version 1.0 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& INDEX &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& I - Page Body - The main part of the whole site - Site background colour - Site background image 2 - Main Menu - Border of the menu links - Outer border colour - Menu link colour - Mouse over links - Drop down links' background colour 3 - Fonts and Quotes - Fonts used as quotes - Left aligned fonts 4 - Chat Object - Chat options box - Chat open/close options box - Chat body - Chat text box 5 - Smiley Menus - Smiley window header 6 - User Activity Menus - Pop-up windows background - Pop-up window borders - Pop-up window headers - User window header - Site activity window header - Chat options window header - PM window header 7 - Video Menu - Pop-up window for videos & mp3s - Pop-up window header for videos & mp3s 8 - Page Headers and Links - Page headers - Horizontal line - Links 9 - Text Areas - Text areas 10 - Comments - Comment pop-up window - Comment pop-up window header - Comment text box 11 - Text Lists - Text list background - Text list font colour - Mouse over background 12 - Content Boxes - Lower boxes - Upper and side boxes - Top left boxes 13 - Forums (13 I think lol) - Forum tables - Forum display 14 - Search (14 I think lol) - Search Feild Css 15 - Capcha 16 - Privilages 17 - CHAPTER SEVENTEEN - LISTS AND LISTS OF LINKS 18 - Whos Online 19 - Sidebars 20 - CHAPTER 20 - Messages 21 - CHAPTER 21 - Experimental 22 - CHAPTER 22 - LOG IN - User Settings 23 - CHAPTER 23 - MP3, VIDEO, FILES 24 - CHAPTER 24 - MESSAGES - Not the chat messages the static pm messages Welcome to the site skin CSS. This version is for casual users of CSS and is customisable. If you are seeking to remove or add from the CSS you may still use this CSS and change the comments. There are a number of tips to follow when using the index. When changing the skin you should change the CSS from top to bottom. DO NOT jump ahead as you may lose track of your changes. After each change make sure you refresh your test page to see the effects of your changes. If you make changes and later on decide to change the values again you may not be able find the right values. During the changing of this skin you will encounter lines that have no comments. You may change these at your will as long as you follow the order and be aware of what you are manipulating. Also take note that not all lines are commented on and that blocks may have a number of lines that should be manipulated. You may change any line at your own discretion. CSS stands for Cascading Style Sheets. In a website there are usually at least two types of languages that are used. HTML and CSS. HTML (Hypertext Markup Language) can be seen as the building blocks of all websites. For instance, it can be used to add text, tables, links and so on. However, in order to change the appearance of such items HTML falls short. That is why CSS is used to change the appearance of sites and is also useful in carrying out the look through the whole website. CSS changes certain elements in the HTML like so: h1 {color:blue; font-size:12px;} h1 is a type of header which in the HTML is used like so:

This is a header

The CSS changes the colour of all such types of headers as blue in normal instances. It also makes the font size 12 pixels big. - h1 is the selector or the HTML element you are changing - Everything in the brackets {} are used to change it - color:blue; is a declaration, in this case makes it blue - "color" is known as a property and "blue" as a value - the ; shows that a declaration has ended This block of CSS is written in this CSS like so: h1 { color:blue; font-size:12px; } This makes finding the values easier. For more information and if you are stuck see the bottom of this page for the FAQ (Frequently asked questions) and more information. To learn more about CSS and HTML visit w3schools.com for the free tutorials. */ /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ blogs section @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER ONE - PAGE BODY &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 */ /*Page Body @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ html { } object { border: 0px; overflow-x: hidden; } iframe { overflow-y: hidden; overflow-x: hidden; border:none; } /* body background and default coloringy of geo world pages */ body { overflow-x: hidden; height:100%; color: #FFFFFF; margin: 0px; padding: 0px; font-size: 11px; font-family:verdana; background-image:url(/styles/Psychedelic.jpg); } /* not sure what this does or where it is used lol */ form.plain_form {overflow: auto; } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ align all tables to the left */ table{ text-align:left; margin-left: auto; margin-right: auto; width: 95%; } /* for banners for images width is relevent to screen size height is size of image */ img.BANNER_IMG{ width:90%; height:250px; border:0px; display: block; margin-left:auto; margin-right:auto; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER TWO - MAIN MENU &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 */ /* //IMPORTANT NOTE:THIS IS THE MAIN MENU THAT HOVERS TOP CENTRE OF THE PAGE. */ div.nav_menu_pos_fixed { font-size: 10px; background:#000000; color:#FFFFFF; position:fixed; top:0px; left:2%; width:96%; border:1px solid #999; z-index:100; } table.nav_menu_table { width:100%; } td.colomn_header{ text-align:center; width:150px; } a.nav_menu{ color:#ffffff; text-decoration:none; } a:hover.nav_menu{ color:#0000FF; background:#C0D9D9; } td.nav_menu{ background:#666666; } table.nav_menu { font-size:100%; position:absolute; visibility:hidden; background:#544E4F; padding:1px; width:180px; } .smalltext{ font-size:80%; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER THREE - FONTS AND QUOTES &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 */ /* Quote Text */ .quotes{ font-size:120%; color:#66CC66; } /* Quote Text left alligned for a span or div */ .quotes_left_alligned{ text-align:left; font-size:120%; color:#66CC66; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER FOUR - CHAT OBJECT &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ CHAT ICONS DELETE AND CHAT QUOTE ICONS */ img.chat_quote{ width:20px; height:20px; border:0px; } img.chat_delete{ width:10px; height:10px; border:0px; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ACTIVITY FEED ICON BAR, in site activity and activity feeds the div that surounds the icons keep the border width to one or 0 px's or chat sizing will mess up */ div.activity_feed_icons{ height:25px; background-color:#000000; border-top: 1px solid #808080; border-bottom: 1px solid #808080; } href.CHAT_POST_HREF{position:absolute;width:15px;height:15px;top:5px;right:5px;} img.CHAT_POST_IMG{position:absolute;width:15px;height:15px;border:0px;top:5px;right:5px;} /*CHAT OBJECT @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ span.chat_options { background-color:#000000; border: 3px solid #FFB200; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; position:absolute; bottom:25px; left:25px; } span.CONNECTION_quick_icon { background-color:#000000; border: 3px solid #FFB200; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; position:absolute; bottom:25px; right:60px; } img.ICONS{ background-image:none; width: 25px; height: 25px; border-style:none; } img.ICONS_LARGE{ background-image:none; width: 50px; height: 50px; border-style:none; } img.CHAT_BANNER{ border: 2px solid #808080; width:80%; height:80px; display: block; margin-left:auto; margin-right:auto; } img.CHAT_AVATAR{ border:0px; width: 35px; height: 35px; } img.CHAT_AVATAR:hover { background-color:#000000; border:0px; width: 100px; height: 100px; } span.chat_quick_icon { background-color:#000000; border: 3px solid #FFB200; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; position:absolute; bottom:25px; right:25px; } /* chat body you could use a image here to add a background to the chat room */ body.chat_body{ background-color:#000000; overflow: hidden; background-image:none; } /* the text box where you enter you chat text */ textarea.CHAT_SUBMIT_TEXT_AREA { visibility:hidden; border: 2px solid #808080; color: #FFFFFF; background-color: #000000; width: 95%; height: 50px; overflow: auto; } /* this is the scrooling div you see inside the chat the height of this is adjusted in java script */ div.FULL_CHAT_DIV_scrolling { text-align:left; height:200px; width: 100%; overflow-x: hidden; overflow-y: scroll; } /* some chats don't us the CHAT_SUBMIT_TEXT_AREA ie output only users can't input so we can get some extra space so the div can be a little larger */ div.NO_COMMENT_CHAT_DIV_scrolling { text-align:left; height:200px; width: 100%; overflow-x: hidden; overflow-y: scroll; } div.CHAT_EVEN{ border-top: 1px solid #808080; } div.CHAT_ODD{ border-top: 1px solid #808080; } div.chat_options_scrolling { width: 98%; height: 90%; text-align: center; overflow-y: scroll; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER FIVE - SMILEY MENUS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 */ /*SMILIE MENU @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* the pop up window that the smilies are contained in */ /* the scrooling div the rows of smiles are placed in */ div.smillie_scrolling { width: 98%; height: 83%; text-align: center; overflow-y: scroll; } /* the smilies in the smilie window */ img.SMILIE_WINDOW{ background-image:none; width: 40px; height: 40px; border-style:none; } img.SMILIES{ background-image:none; width: 50px; height: 50px; border-style:none; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER SIX - MENUS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 */ /* Pop-up windows background - Includes the smiley window. This is now implemented as a class all the menus use the same selector class MENU DEFAULT IS THE OUT SIDE OF THE window _handle the part you drag */ div.MENU_DEFAULT{ text-align: center; color:#FFFFFF; visibility:hidden; position:fixed; border:2px solid #808080; background-color:black; background-image:none; top:100px; } /* this is the drag and drop area of the window */ div.MENU_DEFAULT_HANDLE { text-align: center; border-bottom: 1px inset #808080; background-color:black; height:15px; cursor:hand; cursor:pointer; } div:hover.MENU_DEFAULT_HANDLE { border-bottom: 1px outset #808080; } /* text caption at the top centre of a menu */ span.MENU_CAPTION_TEXT{font-size: 14px; cursor:hand; cursor:pointer; } /* this span holds the content inside your menus */ span.MENU_CONTENT_AREA{ position:absolute; left:0px; width: 100%; } /* the menu button links full screen close resize */ img.MENU_FIRST_ICON_IMG{width:15px;height:15px;border:0px;cursor:hand;cursor:pointer;} img.MENU_SECOND_ICON_IMG{width:15px;height:15px;border:0px;cursor:hand;cursor:pointer;} img.MENU_RESIZE_ICON{position:absolute;width:15px;height:15px;border:0px;bottom:0px;right:0px;cursor:hand;cursor:pointer;} div.MENU_FIRST_ICON_DIV{position:absolute;border:0px;top:0px;right:0px;} /* for when you wanna embed a another window in a menu used by site activity, user activity, messages */ object.window_framed { width:100%; height:100%; border:none; } iframe.window_framed { width:100%; height:100%; border:none; } /*MESSAGE MENU @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER SEVEN - VIDEO MENU &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 */ /* Pop-up window for videos & mp3s - Pop up player for videos, mp3's pdf's etc. in the chat and site comments and messages. */ /*VIDEO MENU @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* pop up player to play videos, mp3's pdf's ext in the chat and in site comments and messages */ /* videos are embedded to 100 percent size and embeded in this span w so this span is the size of the video */ div.VIDEO_EMBED_SPAN{ border:2px solid #808080; margin-left:2%; margin-right:2%; width:96%; height:88%; z-index:-1; } /* x button href */ href.MENU_HIDE_HREF{ position:absolute; width:20px; height:20px; right:5px; top:5px; } /* x button img */ img.MENU_HIDE_IMG{ position:absolute; right:5px; top:5px; width:20px; height:20px; border:0px; } /* this is the next video previous video first video last video fullscreen options for the pop up video player */ href.MENU_NEXT_HREF{ position:absolute; width: 20px; height: 20px; right:35px; top:5px; } img.MENU_NEXT_IMG{ position:absolute; right:35px; top:5px; width:20px; height:20px; border:0px; } href.MENU_PREV_HREF{ position:absolute; width: 20px; height: 20px; right:65px; top:5px; } img.MENU_PREV_IMG{ position:absolute; right:65px; top:5px; width:20px; height:20px; border:0px; } href.MENU_FIRST_HREF{ position:absolute; width: 20px; height: 20px; right:95px; top:5px; } img.MENU_FIRST_IMG{ position:absolute; right:95px; top:5px; width:20px; height:20px; border:0px; } href.MENU_LAST_HREF{ position:absolute; width: 20px; height: 20px; right:125px; top:5px; } img.MENU_LAST_IMG{ position:absolute; right:125px; top:5px; width:20px; height:20px; border:0px; } href.MENU_FULLSCREEN_HREF{ position:absolute; width:20px; height:20px; right:155px; top:5px; } img.MENU_FULLSCREEN_IMG{ position:absolute; right:155px; top:5px; width:20px; height:20px; border:0px; } /* x button href */ href.VIDEO_WINDOW_ICON_HREF{ width: 20px; height: 20px; border:none; } /* x button img */ img.VIDEO_WINDOW_ICON{ width:20px; height:20px; border:none; } /* x button img */ div.VIDEO_OPTIONS_SCROLL_BAR{ height:95%; overflow-x: hidden; width: 98%; text-align: center; overflow-y: scroll; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER EIGHT - PAGE HEADERS AND LINKS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 */ /*PAGE HEADERS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //okay didn't use these to much they should be used more and used as proper headings like you said maybe should add some for code sections, quote section, xtr large ext ext @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ h1.normal {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h2.normal {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h3.normal {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h4.normal {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h5.normal {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h1.default_box {border: 1px solid #808080; color: #FFFFFF; width:90%; text-align: center; margin-left: auto; margin-right: auto; } h2.default_box {border: 1px solid #808080; color: #FFFFFF; width:90%; text-align: center; margin-left: auto; margin-right: auto; } h3.default_box {border: 1px solid #808080; color: #FFFFFF; width:90%; text-align: center; margin-left: auto; margin-right: auto; } h4.default_box {border: 1px solid #808080; color: #FFFFFF; width:90%; text-align: center; margin-left: auto; margin-right: auto; } h5.default_box {border: 1px solid #808080; color: #FFFFFF; width:90%; text-align: center; margin-left: auto; margin-right: auto; } h1 {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h2 {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h3 {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h4 {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} h5 {margin-left:auto; margin-right:auto; color: #FFFFFF; width: 90%;} /* center a header */ h1.centered { text-align: center; color: #FFFFFF; margin-left:auto; margin-right:auto; } h2.centered { text-align: center; color: #FFFFFF; margin-left:auto; margin-right:auto; } h3.centered { text-align: center; color: #FFFFFF; margin-left:auto; margin-right:auto; } h4.centered { text-align: center; color: #FFFFFF; margin-left:auto; margin-right:auto; } h5.centered { text-align: center; color: #FFFFFF; margin-left:auto; margin-right:auto; } hr{border: 2px outset #808080; color: #808080; } /*HYPERLINKS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ a.white_href { text-decoration: none; color: #FF00FF; word-wrap: break-word; } a.plain_href { text-decoration:none; color: #FF00FF; word-wrap: break-word; } a { text-decoration: none; color: #FF00FF; word-wrap: break-word } a.white_href:hover, a.plain_href:hover{ font-size:100%; border: 0px solid #808080; background-color: #369; color: #fff; } /* use this when you wan't to use a anchor as a submit button */ a.submit_post{ width: 120px; background-color: #5F9EA0; border: 4px outset #808080; color: #FFFFFF; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER NINE - TEXT AREAS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 */ /*TEXT AREAS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* Text areas - Text boxes for different pages where users enter information. */ textarea.default_output { border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 90%; height: 100px; overflow: auto; } /* //USER NAME WHEN YOU LOG IN */ textarea.small { border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 90%; height: 50px; overflow: auto; } /* //POSTING AREA FOR FORUMS BLOGS DISCUSSIONS */ textarea.user_page_submit_box { border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 90%; height: 300px; overflow: auto; } /* //POSTING TITLE AREA FOR FORUMS BLOGS DISCUSSIONS */ textarea.user_page_title { border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 90%; height: 50px; overflow: auto; } /* where anon types his user name after solving the capcha */ textarea.anon_log { border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 140px; height: 20px; overflow: auto; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER TEN - COMMENTS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 */ /*COMMENTS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* The scrolling div comments are placed in */ div.comment_scrolling { text-align: center; color:#000000; width: 98%; background-color:#625D5D; overflow-y: scroll; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* The comment posting area */ textarea.post_comment { border: 5px solid #808080; color: #808080; background-color:#000000; width: 90%; height: 55%; overflow: auto; } /* comment posting div */ div.post_options { background-color:#000000; color: #808080; width:90%; border: 2px solid #808080; } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ posting section for comments and blog posts @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* //code element for writing code blocks in posts! */ code{ font-size:120%; font-style:oblique; color: #33CC66; } /* //for the table itself */ table.post_table { padding:10px; width:100%; height:10%; } /* //header of the comment area */ td.post_header { color: #FFFFFF; background-color:#4A4344; height: 5px; } /* //footer of the comment area //the footer is currently only used for the admins but may eventually be used to hold forum signature */ td.post_footer { color: #FFFFFF; background-color:#4A4344; height: 5px; } td.post_left_info_area { color: #FFFFFF; background-color:#595454; width: 20%; } /* //this one inherets the background and text color of the black_grey_div_left_alligned //posts need their own custom div for the posting area */ td.post_right_info_area { width: 80%; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER ELEVEN - TEXT LISTS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 */ /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //change the color when you mouse over href used in the menus like on the site map menu @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ ul { list-style: none; padding:0px; margin:0px; position:relative; text-align: center; } a.menu { text-decoration: none; display: block; background: #000000; color: #FF00FF; padding:0.24em 1em; margin:0px; position:relative; text-align: center; word-wrap: break-word; } a.menu:hover{background: #646464;} /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER TWELVE - CONTENT BOXES &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 */ /*SOME CUSTOM DIVS ROUNDED AND SCROLLING @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ basically standard content dividers here split pages into section light grey rounded and dark #808080 rounded are used heavilly in code so beware if you change this @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* this is a rounded divider if the rounding is not supported in css by the brower it appears as a box //light grey rounded means its a lighter shade dark a darker shade no actually color is implied */ div.light_grey_rounded { padding:4px; text-align:center; margin-left: auto; margin-right: auto; width: 95%; background-color:#4B4B4B; border:2px outset #808080; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; overflow-x: auto; } div.dark_grey_rounded { padding:4px; background-color:#000000; text-align:center; margin-left: auto; margin-right: auto; width: 95%; border:2px outset #808080; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; overflow-x: auto; } /* left alligned chat div #000000 background */ div.black_grey_rounded_left_alligned { padding:4px; text-align:left; margin-left: auto; margin-right: auto; background:#000000; color:#FFFFFF; width: 95%; border:2px outset #808080; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; overflow-x: auto; } /* Same idea as above but with a y axis scrool bar */ div.scrolling { width: 95%; height: 150px; background-color:#000000; margin-left: auto; margin-right: auto; text-align: center; overflow-y: scroll; } /* Same idea as above but with a y axis scrool bar */ div.scrolling_left { width: 95%; height: 150px; background-color:#000000; margin-left: auto; margin-right: auto; text-align: left; overflow-y: scroll; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER THIRTEEN - FORUMS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 */ /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ blogs section @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ img.FORUM_CATEGORY_IMAGE{ border:0; width:55px; height:55px; } img.FORUM_MAIN_IMAGE{ border:0; width:55px; height:55px; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ thread_starter_table this is the table at the top of the thread starter page */ table.thread_starter_table{ width:100%; border:1px solid #666666; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //Field for titles in posts */ input.title { border: 1px solid #808080; color: #FFFFFF; background-color: black; width:90%; height: 25px; overflow: auto; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER FOURTEEN - SEARCH &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SEARCH BOX */ /* //search field where text for searches go */ input.search_field { border: 3px solid #808080; color: #FFFFFF; background-color: #000000; width: 200px; height: 25px; overflow: auto; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* //search options categories and user lists */ select.search_advanced { border: 3px solid #808080; color: #FFFFFF; background-color: #000000; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* //search input box */ input.submit { width: 120px; background-color: #5F9EA0; border: 4px outset #808080; color: #FFFFFF; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ end of search @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER FIFETEEN - CAPCHA &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ CAPCHA SECTION */ /* div box to center the captch the same with as the racapcha box */ div.capcha_div{ margin-left:auto; margin-right:auto; border:none; width:320px; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ div for adds */ div.ADVERTISING{ margin-left:auto; margin-right:auto; width:500px; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END CAPCHA SECTION */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER SIXTEEN - PRIVALAGESA &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SELECT YOUR PRIVALAGE LEVELT */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SELECT YOUR PRIVALAGE LEVEL */ select.PRIVALAGE_LEVEL { border: 3px solid #808080; color: #FFFFFF; background-color: black; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ END OF PRIVALAGE LEVELS */ /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER SEVENTEEN - LISTS AND LISTS OF LINKS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ NAV MENU TO LIST INFORMATION AND LINKS */ div.navcontainer { white-space: normal; width:80%; margin-left:auto; margin-right:auto; } ol.navlist{ margin-left:10px; padding-left:10px; list-style-type:decimal; } a.navcontainer{ display: block; padding:2px; width:95%; margin-left:auto; margin-right:auto; text-align:left; background-color:#122222; border-bottom:1px inset #111111; } a.navcontainer:link, a.navcontainer:visited { color: #EEE; text-decoration: none; } a.navcontainer:hover { background-color: #369; color: #fff; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 18 - WHO's ONLINE &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ TABLE THAT LIST THE USERS ONLINE */ table.USER_LIST{ border-spacing:10px; border: 0px; text-align:left; width:95%; margin-left:auto; margin-right:auto; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 19 - Sidebars &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 */ div.div_menu_scrolling_dark { width: 95%; height: 300px; text-align: center; overflow-y: scroll; } div.dark_side_bar_right{ border:0px; position:absolute; right:0px; color: #FFFFFF; width: 29%; margin-right:5px; } div.dark_side_bar_left{ position:absolute; left:0px; color: #FFFFFF; width: 70%; } /* //side bars */ div.dark_grey_rounded_right_side_bar{ background-color:#000000; text-align:center; width: 98%; border:2px outset #808080; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 20 - Messages &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 */ /*MESSAGE MENU @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* The phone icon section! */ div.MESSAGE_INCOMING_MENU{ z-index:100; text-align:left; color:#191919; visibility:hidden; position:absolute; width:180px; height:180px; font-size: 12px; font-family:Tahoma; position:fixed; border: 1px solid #FFB200; background-color:#000000; background-image:none; top:100px; overflow-x: hidden; overflow-y: auto; } #MESSAGE_INCOMING_MENU_handle{ width: 100%; height: 20px; background-color: #A9A9A9; cursor:default; } img.MESSAGE_INCOMING_MENU_IMG{ margin-left:15%; margin-right:15%; width:70%; height:70px; border:0px; } span.incoming_message_window_span{ text-align:left; color:#FFFFFF; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 21 - Experimental &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 */ /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //this is for my ajax user options pop up menu this stinks for now but its a good idea you get add it from the log in infomation neet to make it movable but it is ajax and has the potential to give a easy way to navigate the site we may stick your option menu that your working on here eventually NEED TO DO SOME WORK ON THIS @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* //the menu options pop up window */ div.menu_div_dark{ visibility:hidden; color: #FFFFFF; border: 2px solid #808080; position:absolute; top:20px; left:5px; width: 450px; height: 550px; background-color: #000000; } /* //the video pop up window could use the chat one for this avoid duplicate code */ div.video_div_dark{ visibility:hidden; color: #FFFFFF; border: 2px solid #808080; position:absolute; top: 20px; left: 450px; width: 700px; height: 550px; background-color: #000000; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 22 - LOG IN - User Settings &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 */ /* //USER NAME WHEN YOU LOG IN */ input.log_in_user_name { border: 1px solid #808080; color: #FFFFFF; background-color: black; width: 300px; height: 25px; overflow: auto; } /* //USER SETTINGS Field for uploading mps's, avatars, ie files in general */ textarea.file_field { border: 1px solid #808080; color: #FFFFFF; background-color: black; width: 300px; height: 25px; overflow: auto; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& CHAPTER 23 - MP3, VIDEO, FILES &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 */ /* HIDDEN FIELD */ textarea.TOPIC_HIDDEN{ width:0px; height:0px; visibility:hidden; } input.TOPIC_HIDDEN{ width:0px; height:0px; visibility:hidden; } /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ TOPIC NAME */ input.TOPIC_NAME { font-size: 14px; font-family:verdana; border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 95%; } textarea.TOPIC_NAME { font-size: 14px; font-family:verdana; border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 95%; height: 15px; } textarea.TOPIC_DESCRIPTION{ font-size: 14x; font-family:verdana; border: 1px solid #808080; color: #FFFFFF; background-color:#000000; width: 95%; height: 100px; } /* box to select a file for file uploads note styling is highly limited for theses box the botton can't be styled and cross browser support sucks but still might as well at least change the color but be aware you may be stuck with the default in certain browsers */ input.FILE_UPLOAD_BOX { font-size: 14px; font-family:verdana; background-color: #000000; border: 1px outset #808080; color: #FFFFFF; } /* //insert content in chat box */ textarea.insert_content_in_chat { font-size: 14px; font-family:verdana; border: 3px solid #808080; color: #FFFFFF; background-color: #000000; width: 80%; height: 40px; overflow: auto; -moz-border-radius:8px; -webkit-border-radius:8px; -opera-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; } /* CHAPTER 24 - MESSAGES - Not the chat messages the static pm messages &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */ /* 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 24 */ /* //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ DELETE MESSAGE ICON this is a image just rendered in a input box */ input.delete_message{ width:30px; height:30px; border:30px; } /* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& FAQ - FREQUENTLY ASKED QUESTIONS &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */