Sponsors

Highlighted

Fly... by °Phill  3 weeks 17 hours  ago

Fly... by °Phill 3 weeks 17 hours ago

^nat
This wallpaper captures the urban essence that proliferated the art of Ghost in the Shell in every incarnation of the series. Phill does an amazing job of capturing a moment of surrealism.

While there are a few, stray building angles and shadows, you find that your eye forgives the minor details and instead focuses on the overall scene that is larger than life, with lights trailing off into infinity.

ShoutBox

$motogp 36 minutes ago
LOL.hey cyb check your PM =3

~Kimmie 39 minutes ago
Fine desu ~ XD

$motogp 45 minutes ago
Hey Kimmie =3 howr u

~Kimmie 47 minutes ago
Hiya moto.

$motogp 50 minutes ago
Hey cyb

~cybil 1 hour 8 minutes ago
(o_o) emoticon

$shijirou 1 hour 24 minutes ago
Hellew~ just dropping by and giving a shout~

°Anime-Girl 1 hour 53 minutes ago
@Bantam: oh i see! it's song then! lol i thought it was you! >:D emoticon

~Kimmie 1 hour 55 minutes ago
Hiya guys ~ (n_n)/ emoticon

Bantam 1 hour 59 minutes ago

AP4 CSS Customization instructions 1.2

user avatar
*Mrchak
Community Member
Orchestra the rhytm and the drum
Topics: 25
Posts: 338
2 years 6 months ago
Ok i needed 3 hours to figure what is what so here you go the official PimpMyUserpage Style userpage tut for changing colors on your plane old boring userpage ^^

I have some spelling mistakes but you will understand it... This has been written so that every idiot (as myself) can understand :P


/*
--------------------------------------------------------------------------------
AnimePaper CSS TEMPLATE
Designed By: Aaron Tan (xenohawk)
Last Update: 11:40 PM Friday, January 27, 2006
Description: VerticalEdge [fixed] [center]
URL: http://www.animepaper.net/
--------------------------------------------------------------------------------
+++ NOTICE +++
CSS is still under development.
A simpler CSS will be up once I have finished all the small parts
in APv4.

*/

/* IMPORT CORE CSS */
/* Depreciated, using external link on main page to load the core.css
@import url(http://www.animepaper.net:8080/css/core.css); */

/*
------------------------------------------------------------------------------
=essentials
------------------------------------------------------------------------------*/

body {
background: #E3E2E0 url(http://www.animepaper.net:8080/images/verticaledge/shadowbg.gif) repeat-y top center;
font-family: Verdana, sans-serif;/*Fonts in general*/
color: #888; }/*Color of the fonts on the whole page*/

blockquote { background: #FFF; }

blockquote span.bhead {
display: block;
background: #CCCCCC;
padding: 4px 1em;
font-weight: bold;
color: #FFF; }

blockquote div {
border-left: 4px solid #CCCCCC;
border-right: 4px solid #CCCCCC;
border-bottom: 4px solid #CCCCCC;
padding: 1em; }

blockquote.spoiler span.bhead {
cursor: pointer; }

blockquote.spoiler div { display: none; }

ins { text-decoration: none; color: #B96A0E; }

pre, code { color: #6F4109; }


/* =essentials_links
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a:link,
a:visited,
a:active {
text-decoration: none;
color: #3399CC; }/*color of the links on the whole page*/

a:hover {
text-decoration: none;
color: #B32FCF; }/*color of the links while hover*/

a:hover img { border: none; }



/* =essential_misc
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Turn off active outline for browser that support (e.g. Firefox 1.5) */
* { outline: 0; }




/*
------------------------------------------------------------------------------
=typography
------------------------------------------------------------------------------*/

p, label, .normalsize { font-size: 1.1em; line-height: 1.5em; }
ul, ol, dl { font-size: 1.1em; line-height: 1.5em; }
q { font-size: 1.1em; line-height: 1.5em; }

/* Cancel off font inheritance to childrens */
ul ul, ol ol, ol ul, ul ol, dl dl, li p, p q { font-size: 1em; }

h1, .hugesize { font-size: 2.6em; }
h2, .largesize { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5, .mediumsize { font-size: 1.4em; }
h6 { font-size: 1.2em; }

h1, h2, h3 { margin: 0; }


/* =typography_custom
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

p { }

p.centered { text-align: center; }

p.nm, p.wm {
margin: 0 0 1em 0;
padding: 3px; }

p.nm {
background-color: #FEF5DA; /*if you see the quotebox "ne scan has been submitted... thats the color of the background*/
border-right: 1px solid #D0CBAF;/*border*/
border-bottom: 1px solid #D0CBAF; /*border*/
color: #605033; }/*color of the font in it*/

p.wm {
background-color: #FBD8D7;
border-right: 1px solid #DCBFB4;
border-bottom: 1px solid #DCBFB4;
color: #6A0D0B; }

p.priority {
text-align: center;
font-weight:bold; }

p.subs {
margin: 0 0 1em 0; }

h2 { }

.sections h2, .subsections h2 {
border-top: 3px solid #DDD;/*this is the border that devides the whole categories*/
margin: 25px 0 20px 0;
font-size: 1.3em;/*this is the size of the font on the title of the categories default green*/
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #8BBD17; }/*the color of the titles*/

.sections h2 span {
display: block;
margin-top: -1em;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
color: #CCC; }

h3 { }

#sidebar h3, .subsections h3, #write_form h3 {
border-top: 3px solid #DDDDDD;
margin: 25px 0 20px 0;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #B32FCF; }/*title color of the categories on the sidebar*/

.subsections h3 a { color: #B32FCF; }

.generic_box h3, .option_box h3 {
background: #EEE;/*color of some titles in the sidebar (can be seen on the home page)*/
border: 0;
margin: 0; padding: 5px;
font-size: 1.1em;
font-weight: bold;
letter-spacing: normal;
line-height: 1.2em;
color: #666; }/*font in those titles*/

#write_form h3 {
border: 0;
margin: 0 0 1em 0; padding: 5px;
border-bottom: 2px solid #DDDDDD;
color: #666; }




/*
------------------------------------------------------------------------------
=navigation
------------------------------------------------------------------------------*/

#navigation { position: absolute; width: 100%; z-index: 9999; }
#nav {
position: relative;
height: 32px;/*you can adjust the position of the border downward by entering larger number*/
margin: 0;
border-bottom: 5px solid #EEE;/*on the navigation this is the color of the lower border*/
list-style: none;
padding-top: 2px; }

#nav ul, #nav li { list-style: none; margin:0; }

#nav li.on { text-indent: -5000px; }

#nav li.on ul {
background: #CCC;/*this is the whole navigation bar color (behind everything)*/
position: absolute;
top: 2px; left: 0;
width: 100%;
height: 30px;
text-indent: 0;
margin-bottom: 2px; }

#nav li.on ul li { float: left; }

#nav li.on ul li a {
background: #CCC;/*the color of the navigation buttons*/
display: block;
height: 30px;
width: 80px;
border-right: 2px solid #FCFBF9;/*the color of the border between the buttons*/
padding-left: 4px;
font-size: 11px;
font-weight: bold;
color: white; }/*color of the fonts on the navigation bar*/

#nav li.on ul li a:hover { background: #8BBD17; }/*color of the button when hover*/

#nav li.off {
position: relative;
float: right;
top: 35px; right: 4px;
height: 20px;
margin-top: -1.5em; }

#nav li.off a {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down_light.gif) no-repeat 98% 50%;/*color of the drop down menu on the right*/
display: block;
width: 14em;
line-height: 20px;
padding-left: 4px;
margin-left: 4px;
border: 1px solid #E0E0E0; /*the border color of the drop down menu*/
border-top: 0;
font-size: 10px;
font-weight: bold;
color: #AAA; }/*color of "quick"*/

#nav li.off a:hover, #nav li.off:hover a, #nav li.sfhover a {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down.gif) no-repeat 98% 50%;/*color of the "quick menu" when hover*/
color: #666; }/*color of the font when hover*/

#nav li.off ul {
display: none;
position: absolute;
top: 20px; left: 0; }

#nav li.off:hover ul, #nav li.sfhover ul {
display: block;
z-index: 5000; }

#nav li.off:hover ul li a, #nav li.sfhover ul li a {
background: #CCC;/*color of the navigation bar when hover*/
color: #FFF; }/*font color when hover*/

#nav li.off ul li a:hover {
background: #BE4DD7; /*color of the links when hover in the quick menu*/
color: #FFF; }/*color of the font when hover in quick menu*/


/* =navigation_tab
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*well TABS you can see them in the messages*/
ul.tab_menu {
margin:0 0 1em 0; padding: 0;
border-bottom: 7px solid #EEE;/*this is the border color below the tabs*/
list-style: none; }

ul.tab_menu li {
margin: 0 0 -2px 0; padding: 0;
float: left; }

ul.tab_menu li a,
ul.tab_menu li a:visited {
background: #EEE;/*bacground color of the tabs*/
display: block;
padding: 3px 10px;
margin-left: 5px;
margin-right: 0;
font-weight: bold;
border: 1px solid #E0E0E0;/*tabs border*/
border-bottom: 0;
color: #AAA; }/*color of the font on the tabs*/

ul.tab_menu li a:hover, ul.tab_menu li.selected a,
ul.tab_menu li.selected a:visited {
color: #666; }/*visited font color on the tabs menu*/




/*
------------------------------------------------------------------------------
=list
------------------------------------------------------------------------------*/


/* =list_images
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

li.icon_new { background: transparent url(http://www.animepaper.net:8080/images/icons/note.gif) no-repeat 0 50%; }
li.icon_zoom { background: transparent url(http://www.animepaper.net:8080/images/icons/zoom_in.gif) no-repeat 0 50%; }
li.icon_down { background: transparent url(http://www.animepaper.net:8080/images/icons/arrow_down.gif) no-repeat 0 50%; }
li.icon_fav { background: transparent url(http://www.animepaper.net:8080/images/icons/heart_add.gif) no-repeat 0 50%; }
li.icon_favdel { background: transparent url(http://www.animepaper.net:8080/images/icons/heart_delete.gif) no-repeat 0 50%; }
li.icon_edit { background: transparent url(http://www.animepaper.net:8080/images/icons/pencil.gif) no-repeat 0 50%; }
li.icon_del { background: transparent url(http://www.animepaper.net:8080/images/icons/bin_closed.gif) no-repeat 0 50%; }
li.icon_stop { background: transparent url(http://www.animepaper.net:8080/images/icons/stop.gif) no-repeat 0 50%; }
li.icon_feat { background: transparent url(http://www.animepaper.net:8080/images/icons/star.gif) no-repeat 0 50%; }
li.icon_top { background: transparent url(http://www.animepaper.net:8080/images/icons/arrow_up.gif) no-repeat 0 50%; }
li.icon_add_showcase { background: transparent url(http://www.animepaper.net:8080/images/icons/image_add.gif) no-repeat 0 50%; }
li.icon_remove_showcase { background: transparent url(http://www.animepaper.net:8080/images/icons/image_delete.gif) no-repeat 0 50%; }
li.icon_most_popular { background: transparent url(http://www.animepaper.net:8080/images/icons/folder_heart.gif) no-repeat 0 50%; }
li.icon_wallpaper_timeline { background: transparent url(http://www.animepaper.net/images/icons/clock.gif) no-repeat 0 50%; }
li.icon_friend_submissions { background: transparent url(http://www.animepaper.net:8080/images/icons/folder_user.gif) no-repeat 0 50%; }
li.icon_my_scans { background: transparent url(http://www.animepaper.net:8080/images/icons/image.gif) no-repeat 0 50%; }
li.icon_my_wallpapers { background: transparent url(http://www.animepaper.net:8080/images/icons/image.gif) no-repeat 0 50%; }
li.icon_random_cat { background: transparent url(http://www.animepaper.net:8080/images/icons/photos.gif) no-repeat 0 50%; }
li.icon_random_gallery { background: transparent url(http://www.animepaper.net:8080/images/icons/images.gif) no-repeat 0 50%; }
li.icon_random_scans { background: transparent url(http://www.animepaper.net:8080/images/icons/photo.gif) no-repeat 0 50%; }
li.icon_random_wallpapers { background: transparent url(http://www.animepaper.net:8080/images/icons/photo.gif) no-repeat 0 50%; }
li.icon_friend { background: transparent url(http://www.animepaper.net:8080/images/icons/user.gif) no-repeat 0 50%; }
li.icon_stylesheet { background: transparent url(http://www.animepaper.net:8080/images/icons/layout_content.png) no-repeat 0 25%; }

/* For big icons use in the list_menu_view
dt.icon_big_wallpaper a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/wallpaper.gif) no-repeat 7px 50%; }
dt.icon_big_scan a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/wallpaper.gif) no-repeat 7px 50%; }
dt.icon_big_fav a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/favorite.gif) no-repeat 7px 50%; }
*/

dt.page_label { background: transparent url(http://www.animepaper.net:8080/images/icons/page_copy.gif) no-repeat 0 50%; }
dt.topic_started_label, dt.last_activity_label { background: transparent url(http://www.animepaper.net:8080/images/icons/time.gif) no-repeat 0 50%; }
dt.last_reply_label, dt.by_label { background: transparent url(http://www.animepaper.net:8080/images/icons/user_comment.gif) no-repeat 0 50%; }

dd.topic_content { background: transparent url(http://www.animepaper.net:8080/images/icons/resultset_next.gif) no-repeat 0 50%; }


/* =list_one
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- outer template right sidebar 'Links' list.
*/

.list_one { margin: 0; font-size: 1em; }

.list_one li {
margin: 0 5px;
list-style: none; }

.list_one li a {
display: block;
background: transparent url(http://www.animepaper.net:8080/images/verticaledge/arrow_bullet.gif) no-repeat 0 50%;
padding-left: 20px;
border-bottom: 1px solid #DDDDDD;/*border below the links on the home page*/
line-height: 2em;
height: 2em; }

.list_one li a:hover { border-bottom: 1px solid #8BBD17; }/*the same border when hover*/

/* =list_two
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- usually used on the footer of the content box (e.g. 'see more' link..)
*/

.list_two { margin: 0; font-size: 1em; }

.list_two li {
margin: 0 5px;
padding-left: 20px;
line-height: 2.5em;
list-style: none; }

.list_two li.site img {
display: block;
margin-top: 1.5em;
margin-left: auto;
margin-right: auto; }


/* =list_three
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery index page list like 'Gallery Options'
*/

.list_three { margin: 0; font-size: 1.4em; }

.list_three li {
margin: 0 10px;
list-style: none;
padding-left: 25px;
line-height: 2em;
height: 2em; }

.list_three li a {
font-weight: bold; }


/* =list_four
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- CSS style selection and creation
*/

.list_four { margin: 0; font-size: 1.4em; }

.list_four li {
margin: 0 10px 10px 0;
list-style: none;
padding-left: 25px;
height: 2.5em }

.list_four li a {
font-weight: bold; }

.list_four li p {
position: relative;
top: -1.2em;
display:block;
font-size:0.8em;
height:0.8em; }


/* =list_block
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- link us page
*/

.list_block { margin: 0; }

.list_block li {
margin: 5px 10px;
list-style: none;
padding-left: 25px; }

/* =list_img
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list with inline image (userpage sidebar lists eg. myfriends.. )
*/

.list_img { margin: 0; font-size: 1em; }

.list_img li {
position: relative;
margin: 0 5px;
padding: 0 20px 0 2px;
line-height: 2.3em;
height: 2.3em;
border-bottom: 1px solid #DDDDDD;/*border color between friends in friend list*/
list-style: none; }

.list_img li img {
position: absolute;
top: 4px; right: 2px; }

.list_img li:hover { border-bottom: 1px solid #8BBD17; }/*color of border when friend hover*/


/* =list_horizontal
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list that requires horizontal positioning
-- gallery category listing index
*/

.list_horizontal { margin: 0; font-size: 1em; }

.list_horizontal li {
display: inline;
margin: 5px;
list-style: none;
line-height: 2em;
height: 2em; }

.list_horizontal li a {
font-weight: bold; }




/* =list_stats
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list for statistical listings
-- stats pages
*/

.list_stats { margin: 0; padding: 0; }

.list_stats li {
background: #E8EEFA;
position: relative;
margin: 0 0 -0.1em 0;
padding: 1em 0 1em 10px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
list-style: none;
font-size: 1.5em; }

.list_stats li .image_div {
margin-top: 10px; }

.list_stats li span.avatar {
display: block;
margin-bottom: 5px; }

.list_stats li span.numbers,
.list_stats li span.rating {
position: absolute;
top: 15px; right: 10px;
font-weight: bold;
font-size: 25px;
color: #8BBD17; }

.list_stats li span.rating {
right: 80px;
padding-left: 15px;
font-size: 20px; }

.list_stats li span.rating span {
display: none; }
.list_stats li span.up {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_up.gif) no-repeat 0 100%;
color: green; }
.list_stats li span.down {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_down.gif) no-repeat 0 100%;
color: red; }

.list_stats li span.details {
position: relative; }



/* =list_showcase_info
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery detail page showcase information (those info you see on your left)
-- admin approve page
-- userpage details
*/

dl.showcase_info {
line-height: 2em;
margin: 1em 0;
border-top: 1px solid #DDD;
color: #BBB; }

dl.showcase_info dt {
display: block;
width: 100px;
float: left;
padding-left: 5px;
border-bottom: 1px solid #DDD; }/*color of the border age/gender...*/

dl.showcase_info dd {
border-bottom: 1px solid #DDD;/*color of the border with your info*/
font-weight: bold; }


/* =list_topic_view
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- any forum/topic view like
*/

dl.topic_view,
dl.topic_view dt,
dl.topic_view dd { margin: 0; }
dl.topic_view dt.topic_label,
dl.topic_view dt.desc_label,
dl.topic_view dt.reply_label,
dl.topic_view dt.topics_label,
dl.topic_view dt.posts_label { display: none }

dl.topic_view {
position: relative;
background-color: #FEF5DA;
padding: 10px 80px 11px 10px;
margin-top: -0.1em; /* fix for 1px rouding error problem */
border-top: 1px solid #DDD;/*border color between topics*/
border-bottom: 1px solid #DDD;/*bottom border color of the topics*/
line-height: 1.8em; }

dl.topic_index {
background-color: #E8EEFA;/*forum topic background color*/
padding-right: 155px; }

dl.sticky_topic {
background-color: #FCE3E2; }/*background color of the sticky topic*/

dl.topic_view dt {
position: relative;
float: left;
padding-right: .5em;
padding-left: 20px; }

dl.topic_view dd {
display: block; }

dl.topic_view dd.topic_content {
display: block;
padding-left: 20px;
font-size: 1.2em;
font-weight: bold; }

dl.topic_view dd.desc_content {
display: block;
padding-left: 20px;
margin-bottom: 1em;
line-height: 1.5em; }

dl.topic_view dd.reply_content, dl.topic_view dd.topics_content,
dl.topic_view dd.posts_content {
position: absolute;
top: 5px;
width: 60px;
margin: 0;
padding: 5px;
text-align: center;
font-weight: bold;
color: #8BBD17; }/*color of number of posts*/

dl.topic_view dd.topics_content { color: #698E11; }/*color of number of topics*/

dl.topic_view dd.reply_content span, dl.topic_view dd.topics_content span,
dl.topic_view dd.posts_content span { display: block; }

dl.topic_view dd.reply_content span { font-size: 1.5em; }

dl.topic_view dd.topics_content span,
dl.topic_view dd.posts_content span { font-size: 1.3em; }

dl.topic_view dd.reply_content, dl.topic_view dd.posts_content { right: 5px; line-height: 1.5em; }

dl.topic_view dd.topics_content { right: 75px; line-height: 1.5em; }


/* =list_menu_view
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- big list menu used on profile, gallery index...
*/

dl.menu_view, dl.menu_view dt,
dl.menu_view dd {
margin:0; padding: 0; }

dl.menu_view dt a {
display: block;
clear: both;
background-color: #E8EEFA;/*color of the links to your controls*/
height: 3.5em;
padding-top: .5em;
padding-left: 10px; /* Increase the value here if there is icon */
margin-top: -1px; /* fix for 1px rouding error problem for IE */
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
font-size: 1.4em;
font-weight: bold;
letter-spacing: 1px; }
html > body dl.menu_view dt a {
margin-top: 0;
/* fix for 1px rouding error problem for modern browser */
margin-bottom: -1px; }

dl.menu_view dd {
display: inline;
float: left;
position: relative;
top: -1.7em;
margin-top: -1.8em;
margin-left: 10px; } /* Increase the value here if there is icon */
html > body dl.menu_view dd {
top: -1.4em; }


/* Compact version - used in userpage */
dl.menu_view.compact dt a {
font-size: 1.3em;
height: 2.8em; }

dl.menu_view.compact dd {
margin-top: -1.8em;
top: -0.4em; }
html > body dl.menu_view.compact dd {
top: -0.3em; }





/*
------------------------------------------------------------------------------
=forms
------------------------------------------------------------------------------*/

fieldset { margin: 0; border: 0; padding: 0; }
legend { display: none; }
input, textarea { font-size: 1em; padding: 1px; }
textarea { display: block; margin: 0; padding: 2px; }

form { }

form p {
margin-left: 0;
margin-right: 0; }

form label {
display: block;
margin-top: 0;
margin-left: 0;
margin-bottom: 3px;
font-size: 1em;
font-weight: bold; }

form label em { font-weight: normal; }

form input {
backfround: #fff;/*color of the writing box on the shoutbox, searchbox...*/
display: block;
margin-top: 3px;
font-weight: normal; }

form select {
display: block;
margin-top: 3px;
line-height: 1.5em;
font-size: 1em;
font-weight: normal; }

form textarea {
margin-top: 3px;
line-height: 1.5em; }


/* =form_input
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

input.input_text, input.input_file, select, option, textarea {
font-family: Verdana, sans-serif;
color: #555; }/*color of the font when writing*/

input.input_btn_big {
margin-top: 2em;
padding: 5px 20px;
font-size: 1.2em;
font-weight: bold; }

input.input_checkbox, input.input_radiobox, .inline_input select { display: inline; }

input.input_radiobox { margin-bottom: -0.1em; }

input.input_large { font-size: 1.6em; }


/* =form_input_inline
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

p.inline_input strong,
p.inline_input label { display: inline; padding-right: 1em; }

p.inline_nospace label { padding-right: 0; }

label.inline_input { margin-bottom: 0; }

label.inline_input span { padding-right: 10px; font-weight: bold; }

label.inline_input input, p.inline_input input {
display: inline;
margin-top: 0; }

label.inline_input input { line-height: 1em; }


/* =form_input_indicator
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.indicator {
background: transparent url(http://www.animepaper.net:8080/images/indicator.gif) no-repeat top left;
display: block;
position: relative;
top: -25px; left: 5px;
height: 16px; width: 16px;
margin-bottom: -16px; }





/*
------------------------------------------------------------------------------
=layout
------------------------------------------------------------------------------*/


/* =layout_framework
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- basic foundation for the layouts, effects all layouts
*/

#stretch {
background: #FCFBF9;/*the background color of the whole page*/
margin: 0 auto;
padding: 0;
width: 960px; }

#container {
/*background: transparent url(http://www.animepaper.net:8080/images/920_grid.gif) repeat-y left top;*/
margin: 0 auto; width: 920px;
position: relative;
text-align: left; }

/* Holly hack for IE \*/
* html #stretch,
* html #container { height: 0; }
/* */

/* Helps get IE internal percentage correct */
#wrapper { width: 100%; }

#sidebar {
width: 230px;
float: right;
display: inline; }

#content {
width: 690px;
float: left;
display: inline;
text-align: left; }

#content_inner { width: 100%; }

#header_wrapper, #footer_wrapper {
margin: 0 auto;
width: 960px; }

#header, #footer {
margin: 0 auto;
width: 920px; }

#footer { padding: 5px 0; }


/* =layout_framework_columns
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- basic grid column foundation for the layouts, effects all layouts
*/

.single_col {
clear: both;
width: 680px; }

.first_col {
float: left;
width: 335px;
margin-right: 10px; }

.second_col {
float: left;
width: 335px; }

.twin_col_left {
float: left;
width: 345px; }

.twin_col_right {
float: left;
width: 335px; }


/* =layout_class
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general class used throughout multiples templates
*/

.centered { text-align: center; }
.subsections { margin-bottom: 1em; }


/* =layout_class_link_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- links button like on the forums, bbcodes...
*/

.link_box a:link,
.link_box a:visited,
.link_box a:active {
background: #EEE;/*color of some buttons like quote*/
border: 1px solid #E0E0E0;/*border of that button*/
padding: 3px 5px;
line-height: 2em;
color: #AAA; }/*color of the font*/

.link_box a:hover { color: #666; }/*color of the font when hover*/


/* =layout_class_image_div
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- thumbnail images...
*/

.image_div {
position: relative;
margin-bottom: 10px;
z-index: 500; }

.image_div img {
background: #FFF; /*bordr color around the images*/
padding: 2px;
border: 1px solid #DDDDDD; }/*border around border*/

.image_div a:hover img {
background: #DDDDDD; /*border color when hover*/
padding: 2px;
border: 1px solid #DDDDDD; }/*border of the border color when hover*/

.image_div a span {
display:block;
position: absolute;
top: 0; left:0;
width: 110px;
margin-top: 0px;
margin-left: 210px;
font-size: 10px;
text-align: left;
color:#999;/*color of the font nest to the image "by somemember"*/
cursor: pointer; }

/* Use for square thumbnails */
.image_div a span.square {
width: 230px;
margin-left: 90px; }

.image_div a span em {
display: block;
margin-bottom: 1em;
font-style: normal;
font-weight: bold; }

.image_div a span br { display: none; }

.image_div a span strong {
display: block;
margin-bottom: 2px;
line-height: 1.2em;
letter-spacing: 1px;
margin-bottom: 0.5em;
color: #3399CC; }/*color of the name of the image*/

.image_div a:hover span strong {
color: #B32FCF; }/*color of the image name when hover*/

/* when image_div require horizontal positioning */
.image_div_hor {
display: block;
width: 330px;
float: left;
height: 170px; }

html > body .image_div_hor { height: auto; min-height: 170px; }


/* =layout_class_generic_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- foundation for box-like type content like frontpage news...
*/

.generic_box ul {
margin: 0;
list-style: none;
font-size: 10px; }

.generic_box .meta_header li {
margin: 0 5px;
color: #CCC; }/*the color of the small text below the subcategory (can be seen in gallery)*/

.generic_box .body {
margin-left: 5px;
margin-right: 5px;
font-size: 1.1em;
line-height: 1.5em; }

.generic_box p {
margin-left: 0;
margin-right: 0;
font-size: 1.0em;
text-align: justify; }

.generic_box .meta_footer li {
margin: 5px; margin-bottom: 0;
text-align: left; }


/* =layout_class_post_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inherit: [ .generic_box ]
Used on:
-- posts in forums, comments...
-- userpages (about & custom) and groups (about) too
*/

.post_box {
background-color: #F4F4F4; /*color of the posts*/
border-top: 4px solid #DDD;/*border color*/
border-bottom: 4px solid #DDD;/*border color*/
margin: 4em 0;
z-index: 5000;
}

.post_box .meta_header ul { z-index: 9999; }

.post_box .meta_header ul {
position: relative;
width: 120px;
float: left;
margin: 0; padding: 5px;
border-top: 0; }

* html .post_box .meta_header ul { padding-bottom: 0; font-size: 1em;}

.post_box .meta_header li { margin: 0; padding: 0; color: #AAA; }/*color of the font for the member title below the avatar*/
.post_box .meta_header li.avatar { display: block; }
.post_box .meta_header li img { display: block; margin: 0 auto; }

.post_box .meta_header li.info {
text-align: center;
margin-bottom: 5px; }

.post_box .meta_header li.name {
position: absolute;
top: -1.03em; left: 0;
width: 400px;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
margin-left: 0;
color: #AAA; }/*color of the icon for the member status*/

.post_box .meta_header li.name a { color: #AAA; }/*color of the member name*/
.post_box .meta_header li.name a:hover { color: #BE4DD7; }/*color of the member name when hover*/

.post_box .body {
position: relative;
margin-left: 130px;
margin-right: 0;
padding: 5px; }

.post_box .body .inner { overflow: auto; } /* Fix overflowing contents */
/* Argghh.. that's it IE.. TAKE THIS, now who's your daddy? */
* html .post_box .body .inner { width: 510px; }

.meta_wrap .body { margin-left: 0; }
.meta_wrap .body .inner { overflow: visible; }
* html .meta_wrap .body .inner { width: 640px; }

.meta_wrap .meta_header ul { margin-bottom: -1em; }


.post_box .meta_footer {
clear: left;
border-bottom: 1px solid #DDD;/*color of the thin border on the botton of the post*/
margin: 10px 0 1px 0; }

.post_box .meta_footer ul {
border-top: 1px solid #DDD; /*color of the border between comment and signature*/
margin: 0; }

.post_box .meta_footer li {
margin-bottom: 1em;
font-size: 1em;
text-align: center;
color: #AAA; }/*font color of time display*/

.post_box .meta_footer .options { padding-right: 5px; }

.post_box .meta_footer .options li {
float: right;
margin: 1em 0 1em 0;
padding: 0 5px;
border-left: 1px solid #DDD;/*border color between the quote, edit etc buttons on the post*/
height: 2em; }

.post_box .meta_footer .options li.attention_box {
border: 0;
font-weight: bold; }


/* =layout_class_handle
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inherit: [ .generic_box ], [ .post_box ]
Used on:
-- collapsible box contents like the news in frontpage and options in gallery details
*/

.handle { cursor: pointer; }

.bar {
display: block;
overflow: hidden; }

/* Holly hack for IE \*/
* html .bar { height: 1%; }
/* */

/* handle styles on subsections h3 */
.subsections h3.open {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down.gif) no-repeat 99% 50%; }/*the color of the bar that when you clik on it it goes up or down. This is when it is opened*/

.subsections h3.closed {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_up.gif) no-repeat 99% 50%; }/*the same when it is closed*/

.bar_closed {
display: none;
overflow: hidden; }


/* =layout_class_header_info_and_pager
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- pages that uses headers and paging information
*/

.header_info, .pager {
margin: 10px 0;
padding: 5px 15px;
border-top: 1px solid #DDD; /*color of the upper border for scrolling the posts*/
border-bottom: 1px solid #DDD;/*color of the lower border*/
color: #CCC; }

.header_info p, .header_info form p, .pager p {
margin: 0; padding: 2px 0;
font-size: 1.3em;
font-weight: bold; }

.header_info p.light, .pager p.light {
font-weight: normal; }

.header_info .hleft {
float: left;
text-align: left; }

.header_info .hright {
float: right;
text-align: right; }

.pager p { text-align: right; }


/* =layout_general
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general layout style used throughout the entire template
*/


#header_wrapper, #footer_wrapper {
background: #FCFBF9; }

#header {
background: transparent url(http://www.animepaper.net:8080/images/verticaledge/ap_header.gif) no-repeat left bottom;/*this is the header of the userpage*/
height: 45px;/*height of the header image*/
border-bottom: 5px solid #EEE; }/*color of the border beloq the image*/

#header h1, #header h2 { display: none; }


#process_status {
position: fixed;
top: 0; left: 0;
text-align: center;
z-index: 99999; }
* html #process_status {
position: absolute; }

#process_status span {
background: #E60000;
padding: 5px 10px;
margin: 0;
font-size: 12px;
line-height: 20px;
color: white; }


#user_status {
background: #EEE;/*background color of the menu username/messages/paper*/
position: absolute;
top: -50px; right: 0;
display: block;
text-align: right;
font-size: 11px;
letter-spacing: 1px;
border: 1px solid #E0E0E0;/*border of the menu*/
padding: 5px; }

#user_status div { display: inline; }


#breadcrumb {
padding-top: 70px;
height: 20px; }

#breadcrumb p {
margin: 0; padding: 0;
font-size: 12px;
font-weight: bold;
line-height: 20px; }


#page_status {
margin-top: 1em;
text-align: center; }

#page_status span {
padding: 3px 10px;
margin: 0;
font-weight: bold;
color: #000; }

#page_status.normal span { background: #FAD163; }
#page_status.warning span { background: #FF8574; }


#content, #sidebar { margin-top: 0px; }


#sidebar { }

#sidebar img {
display: block;
margin: 0 auto;
text-align: center; }

#sidebar #shoutbox-div img,
#sidebar .list_img img { display: inline; }


#footer {
text-align: center;
border-top: 5px solid #EEE; }/*border color of the footer*/

#footer p {
margin: 0;
font-size: 10px;
color: #CCC; }/*font color in the footer*/


#write_form form {
background: #F4F4F4;/*bacground color of the writing form*/
border: 1px solid #DDD;/*border of that*/
padding: 5px; }

#write_form form .form_info {
background: #EEE;/*background color of the warning on the form*/
margin: 0 0 1em 0; padding: 5px;
border: 1px solid #DDD; }/*border of that*/

#write_form form .warning {
background: #FEC7C7;
margin: 0 0 1em 0; padding: 5px;
border: 1px solid #FF0000;
color: #FF0000; }

#write_form form #form_tool {
border: 1px solid #DDD;/*border color of the text options*/
padding: 4px;
}

#write_form form #bbcode_tool,
#write_form form #text_tool {
margin: 0;
padding: 0;
float: left; }

#write_form form #bbcode_tool li,
#write_form form #text_tool li {
position: relative;
float: left;
margin: 0 5px 0 0;
padding: 0;
list-style: none; }

#write_form form #text_tool ul {
display: none;
background: white;/*background color of the drop down menu*/
position: absolute;
top: 1em; left: -4px;
border: 1px solid #DDD; /*border of the border of the drop down menu*/
border-top: 3px solid #DDD;/*top border color*/
padding: 0; }
#write_form form #text_tool li:hover ul,
#write_form form #text_tool li.sfhover ul {
display: block; }
#write_form form #text_tool ul li {
margin: 0;
padding: 2px;
clear: left; }
#write_form form #text_tool ul li a {
display: block;
width: 100px;
margin: 0; padding: 4px;
background: none;
border: none; }
#write_form form #text_tool ul li a:hover {
background: #DDD; }/*color of the button on the drop down menu when hover*/

#write_form form #text_tool ul li.hugesize a,
#write_form form #text_tool ul li.largesize a,
#write_form form #text_tool ul li.mediumsize a {
line-height: 1em; }
#write_form form #text_tool ul li#text_color-red a {
color: red; }
#write_form form #text_tool ul li#text_color-green a {
color: green; }
#write_form form #text_tool ul li#text_color-blue a {
color: blue; }

/* Fix IE extra label padding to the right */
#write_form form label {
margin-left: 0;
margin-right: 0; }

#write_form form textarea {
width: 660px;
background-color: #;}/*background color of the writing form*/


#autocomplete_choices {
position:absolute;
top: -999; left: -999;
width:0px;
background-color: white;
border-top:1px solid #999;
border-bottom:1px solid #999;
margin:0px;
padding:0px;
z-index: 9999; }

#autocomplete_choices ul {
margin:0;
margin-top:0;
padding:0;
list-style-type: none; }

#autocomplete_choices li {
margin:0;
margin-bottom:0;
border-left:1px solid #999;
border-right:1px solid #999;
padding:2px 2px;
cursor:move;
font-size: 12px;
color: #555; }

#autocomplete_choices li.selected { background-color: #E0EACE; }


/* =layout_general_sidebar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general sidebar layout style used throughout the entire template
*/

#highlights { }

#highlights .highlights-meta {
background: #EEE;/*the color of the little boz below the highlighted wallpaper*/
margin-bottom: 0;
font-size: 10px;
font-weight: bold;
line-height: 2em;
text-align: center;
color: #666; }/*color of the font*/

#highlights .highlights-chooseby {
margin-top: 2px;
text-align: center;
font-size: 10px;
color: #CCC; }/*font color of the "Chosen by" text*/

#highlights .highlights-body {
overflow: hidden;
text-align: justify; }

#highlights .highlights-body img {
display: inline;
background: none;
border: 0; }

#highlights .link_box { font-size: 10px; text-align: center; }


#shoutbox-div { }

#shoutbox-div dl { font-size: 1.0em; }

#shoutbox-div dt {
padding-bottom: 2px;
margin-bottom: 2px;
border-bottom: 1px solid #DDDDDD; }/*color of the line that devided the posts in the shoutbox*/

#shoutbox-div dt:hover { border-bottom: 1px solid #8BBD17; }/*same line when hovered*/

#shoutbox-div dd {
margin: 0 5px;
margin-bottom: 1em; }

#shoutbox-div dd img {
display: inline;
background: none;
border: 0; }

#shoutbox-div ul {
margin: 0;
font-size: 10px;
list-style: none;
text-align: center; }

#shoutbox-div li {
display: inline;
margin: 0; }

#shoutbox-div form { text-align: center; }
#shoutbox-div input { display: inline; }


#myinfo { }

#myinfo .waller_rating , #myinfo .waller_rank, #myinfo .r_info {
background: #F4F4F4;/*color of the rating box*/
margin: 2px 0;
border: 1px solid #DDDDDD;/*color of the border*/
color: #888; }/*font color*/

#myinfo .waller_rating {
text-align: center;
font-size: 2.5em;
letter-spacing: 2px; }

#myinfo .waller_rank {
text-align: right;
font-size: 1.6em; }

#myinfo .waller_rank p {
margin: 2px 4px;
font-weight: bold; }

#myinfo .waller_rank p.rank {
float: left; }

#myinfo .waller_rank p.r_up, #myinfo .waller_rank p.r_dw {
float: right;
padding-left: 15px; }

#myinfo .waller_rank p.r_up {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_up.gif) no-repeat 0 60%;
color: green; }/*color of the arrow on the status bar when rising*/

#myinfo .waller_rank p.r_dw {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_down.gif) no-repeat 0 60%;
color: red; }/*color of the arrow when ranking down*/

#myinfo .waller_rank p.r_up span, #myinfo .waller_rank p.r_dw span {
display: none; }

#myinfo .r_info {
padding: 4px;
letter-spacing: 1px;
text-align: right; }

#myinfo .r_info strong {
float: left;
text-align: left; }



/* =layout_mode_regular
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- used on page that's on regular mode (most of the page)
*/

body.regular #content,
body.regular #sidebar { margin-top: 0px; }


/* =layout_mode_regular_gallery_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery display showcase page
*/

#gallery_showcase { margin-bottom: 0; }

#gallery_showcase .first_col { width: 450px; }

#gallery_showcase .first_col .image_div {
margin: 0 auto;
text-align: center; }

#gallery_showcase .first_col h3 {
margin: 15px 0 -0.2em 0;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
color: #AAA; }/*in the gallery this is the title color of the image (can be seen when clicking on a image*/

#gallery_showcase .first_col dl.showcase_info {
margin-top: 0;
margin-bottom: 4em;
border-top: 4px solid #DDD; }/*the border below the title*/

#gallery_showcase .first_col .post_box { margin-bottom: 0; }

#gallery_showcase .second_col { width: 220px; }

#gallery_showcase .second_col .image_div a span {
width: 100px;
margin-left: 110px; }

#gallery_showcase .second_col .generic_box p { text-align: left; }
#gallery_showcase .second_col .generic_box .body { margin-top: 1em; }
#gallery_showcase .second_col .option_box .body { margin-top: 0; }

/* For the sake of IE.. */
* html #gallery_showcase .first_col .post_box .body .inner { width: auto; }


/* =layout_mode_regular_gallery_statistic
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery index page
*/

#ap_gallery_catstats_panels .second_col .generic_box .body { margin-top: 1em; }


/* =layout_mode_regular_gallery_category
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery category page
*/

#ap_gallery_cats #indexes {
text-align: center;
margin-bottom: 2em;
font-size: 1.4em; }

#ap_gallery_cats .subsections p {
font-size: 1.2em; }


/* =layout_mode_regular_notification_frame
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- notification page
*/

#notification_frame {}

#notification_frame #quick_search {
margin-bottom: 0; }

#notification_frame table {
width: 100%;
border-collapse: collapse; }

#notification_frame table tr {
width: 100%; }

#notification_frame table tr.normal {
background: #E8EEFA;/*in your inbox this is the mail link background*/
font-size: 1.1em; }

#notification_frame table tr.unread {
background: transparent; }

#notification_frame table tr.unread a {
font-weight: bold;
color: #555; }

#notification_frame table tr.message {
background: #E4F8E7;
font-size: 1.1em; }

#notification_frame table tr.selected {
background: #FEF5DA;
font-size: 1.1em; }

#notification_frame table tr.normal:hover,
#notification_frame table tr.selected:hover {
background: #FEF5DA; }/*color of the message links when hover*/

#notification_frame table tr.normal a,
#notification_frame table tr.selected a {
display: block;
color: #888; }/*font color of the messages*/

#notification_frame table tr td {
padding: 5px;
border-top: 1px solid #DDD; }/*border between messages*/

#notification_frame thead tr td {
padding: 0;
border-top: 0; }

#notification_frame tfoot tr td {
padding: 0;
border-top: 0; }

#notification_frame table tr td.n_checkbox {
text-align: center;
width: 2%; }

#notification_frame table tr td.n_sender {
width: 15%; }

#notification_frame table tr td.n_status {
text-indent: -5000px;
width: 6%;
color: #888; }
html > body #notification_frame table tr td.n_status {
width: 2%; }
#notification_frame table tr.read td.n_status {
background: #E8EEFA url(http://www.animepaper.net:8080/images/icons/email_open.gif) no-repeat 50% 50%; }
#notification_frame table tr.unread td.n_status {
background: transparent url(http://www.animepaper.net:8080/images/icons/email.gif) no-repeat 50% 50%; }

#notification_frame table tr td.n_title {
width: 61%; }
html > body #notification_frame table tr td.n_title {
width: 65%; }

#notification_frame table tr td.n_time {
width: 16%; }

#notification_frame table tr td.n_msg {
width: 100%;
color: #888; }

#notification_frame table tr td.n_msg a {
display: inline; }

#notification_frame table tr td.n_msg span {
display: block;
color: #999; }

#notification_frame #notification_message {
padding: 1em 10px;
font-size: 1.1em;
line-height: 1.5em; }


/* =layout_mode_regular_userpage
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- userpage
*/

#ap_user_view #showcase { margin-bottom: 0; }

#ap_user_view #showcase .image_div {
margin: 0 auto;
text-align: center; }

#ap_user_view #showcase h3 {
margin: 15px 0 -0.2em 0;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
color: #AAA; }

#ap_user_view #showcase dl.showcase_info {
margin-top: 0;
margin-bottom: 4em;
border-top: 4px solid #DDD; }/*color of the border below the avatar box*/

#ap_user_view #showcase .post_box {
margin-bottom: 2em; }

#ap_user_view #showcase_header .post_box .body p {
margin-top: 0;
margin-bottom: 0px;
font-size: 1.2em; }

#ap_user_view #showcase_header .post_box .body p.name {
margin-bottom: 5px;
font-weight: bold;
font-size: 1.6em; }


#ap_user_view #comments { padding-top: 2em; }


/* =layout_mode_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- page that's on showcase mode (gallery, main page)
*/

body.showcase #content,
body.showcase #sidebar { margin-top: 530px; }
body.showcase .image_div { margin-left: 5px; }


/* =layout_mode_showcase_main_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- Pages with those huge image showcase
*/

#main_showcase {
position: absolute;
top: 100px; left: 50%; margin-left: -440px;
display: block;
height: 500px;
width: 860px;
padding: 20px 0 0 20px;
z-index: 1; }

#main_showcase .image_div {
float: left;
margin: 0;
height: auto;
min-height: 0; }

#main_showcase .image_div span {
display: block;
position: relative;
width: 576px;
font-size: 1.7em;
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #DDDDDD; }

#main_showcase .intro_div { margin-left: 590px; }

#main_showcase .intro_div h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 13px; }

#main_showcase .intro_div p {
margin-left: 0;
margin-right: 0;
font-size: 11px;
text-align: justify; }

#main_showcase .tiny_showcase {
display: block;
position: absolute;
top: 0; left:0;
z-index: 9000; }

#main_showcase .tiny_showcase .image_div {
float: none;
display: block;
margin: 0; margin-bottom: 5px; }



/* =layout_mode_download
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- download page duh..
*/

body.download { background-image: none; }

body.download #stretch {
margin: 0;
padding: 0;
width: 100%; }

body.download #container {
background-image: none;
margin: 0; width: 100%; }

body.download #content, body.download #sidebar {
margin: 0;
padding: 0; }

body.download .single-col { width: auto; }





/*
------------------------------------------------------------------------------
=extra
------------------------------------------------------------------------------*/

#serverstats {
background: #EEE;
position: absolute;
top: 30px;
left: 15%;
width: 70%;
margin: 5px 0;
padding: 5px;
color: #AAA;
border:3px solid #BBB;
z-index:12000;
display:none;
}



So there you have it i hope it helps

@Xenohawk: Now you dont have to hurry with the simple one ^^

EDIT: 10th Feb 2006
New code with the Xeno's CSS corrections. Now you can use bigger images without complications in the code coz of our awesome developers ^^

NOW THE FULL STYLE CUSTOMIZATION INSTRUCTIONS!

This post has been filtered for improved legibility #197274 Quote Report Edited by *Mrchak 2 years 6 months ago

user avatar
θsunsean
Retired Staff Member
Server Ninja
Topics: 8
Posts: 106
2 years 6 months ago
Thanks for the post. I'm sure that will help a lot of people get started.

user avatar
θxenohawk
Retired Staff Member
AP Stylist
Topics: 38
Posts: 231
2 years 6 months ago
Thanks Mrchak, this will be really helpful for a lot of people and for me XD.

EDIT: Nice work on the background for the group to the one that did it :)

#197515 Quote Report Edited by θxenohawk 2 years 6 months ago

user avatar
~akito85
Member
bishounen...
Topics: 11
Posts: 108
2 years 6 months ago
Yup thanks for sharing ^__^

user avatar
~yume-chan
Member
The Paper
Topics: 6
Posts: 50
2 years 6 months ago
Thank you so much! ^_^

user avatar
*Mrchak
Community Member
Orchestra the rhytm and the drum
Topics: 25
Posts: 338
2 years 6 months ago
OK i have changed the title of this thread to version 1.1 since there have been some changes for the code and i think i added instructions for the whole style but i am not sure @_@