/*
GameTropica Stylesheet
Debugging for Div locations */

body {
background-color: #f7f2e6; 
background-image: url("basic_grphx/big_container_bg.png");
background-repeat: repeat-x;

margin: 0px; /* so the background will spread to the edge of the browser window. */
}

img {
border: 0px;
}



/* GENERIC Text Formatting
===================================================*/
div.cat_big_container h1 {
margin: 25px 15px 3px 15px;
}

div.cat_big_container h2 {
line-height: normal;

margin: 20px 15px 3px 15px;
}

div.cat_big_container h3 {
color: #6c6853;
font-weight: normal;
line-height: normal;

margin: 0px 15px 5px 15px;
}

div.cat_big_container p {
margin: 3px 15px 15px 15px;
}

div.cat_n_title h1, div.cat_w_title h1 {
color: #1c80a1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/* Note - The title looks best in ALL Caps */
font-weight: bold;

line-height: normal;
margin: 0px;
padding: 7px 0px 0px 32px;
}
/* For these Fonts, it just deals with their colours, size and boldness.
For margins, line-heights and spacings, check with the individual header classes
*/
h1 {
color: #229ec7;
font-weight: bold;;
font-size: 14px;
}

h2, h3 {
font-size:11px;
font-weight: bold;
margin: 0px;
}




/* CONTAINERS FOR WHOLE PAGE
These encaspsulate the header and body of the entire page.
===================================================*/
div.big_container {
min-width: 876px;

}

div.container {
width: 876px;

margin: auto;
}


/* HEADER
Header is the top banner for the tropica logo.
Header-buttons are contained within this header.
===================================================*/
div.header {
background-image: url("basic_grphx/header_bg.png");

position: relative; /* relative is needed for the absolute divs within. */
height: 230px;
}

div.header-buttons {

position: absolute;
top: 131px;
left: 535px;
}

div.header-buttons img {
float: left; /* So the buttons line up next to each other; no space in between the anchored images. */
}


/* CONTENT
Content is the container for all the body content.

1. MenuBar [MenuB] is the "Sign In, Register, Search, Privacy Policy"
2. HomeBox Big Container [HomB] is the HomePage Box featuring the GT Intro Blurb
-- HomB Text Blurb, "Full of Vitamin C", Float Left.
-- HomB Text Description, Description of what we're about. Float Right.
-- HomB Icon Container, For the 4 icon sections. Clears Both.
-- HomB Icon, An icon section with picture and description

3. Category Big Container
is needed to give a definite height for its contents,
without complicating use of Float for later elements.
It holds the following:

-- Category Narrow Container and
-- Category Right Container hold the respective categories.
-- These two are floated so they can appear side-by-side.

-- Category Container Close
-- is the footer with clear: both; so it gives the closure height
-- for the Content Container.

-- -- Categories Narrow [CatN] is the sidebar-style category box.
-- -- Categories Wide [CatW] is the content/article box.
-- -- Cateogires Narrow/Wide Titles too.
===================================================*/
div.content {
color: #3e3400;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;

border: 0px white dotted;
}

div.content a:link, div.content a:visited, div.content a:active {
color: #f66800;
text-decoration: none;
}

div.content a:hover {
color: #fd004d;
text-decoration: none;
}


div.menub {
color: #229ec7;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

padding: 5px 25px;
}

div.menub a:link, div.menub a:visited, div.menub a:active {
}

div.menub a:hover {
}



/* CONTENT: HOMEBOX
===================================================*/
div.homb_big_container {
background-image: url("basic_grphx/homb_big_container_bg.png");
background-repeat: no-repeat;
background-position: 0px 146px;

position:relative;
height: 340px;
width: 816px;

margin: 25px auto; /* space above and below, plus the auto for central */
border: 0px orange solid;
}

div.homb_text_blurb {
float: left;

padding: 15px 0px 0px 0px; /* so the image is padded down a little */
border: 0px orange solid;
}

div.homb_text_description {
float: right;
width: 520px;

border: 0px orange solid;
}

div.homb_icon_container {
position:absolute;
top: 93px;
left: 4px;

/*width: 808px; /* centralised within with some allowance*/
clear: both; /* clears the blurb and description above*/
}

div.homb_icon {
text-align: center;

width: 178px; /* There are 4 within the blue box. 202 - 12 -12 paddings.*/
float: left; /* so they all line up next to each other. */

padding: 0px 12px;
}

div.homb_icon img {
padding: 0px;
}


/* CONTENT: CATEGORY
===================================================*/
div.cat_big_container {
padding: 20px;
}

div.cat_n_container {

width: 262px;
float: left;
}

div.cat_w_container {

width: 554px;
float: right;
}

div.cat_n_title {
background-image: url("basic_grphx/cat_n_title.png");

width: 262px;
height: 27px;

margin: 0px 0px 3px 0px 
}

div.cat_w_title {
background-image: url("basic_grphx/cat_w_title.png");

width: 554px;
height: 27px;

margin: 0px 0px 3px 0px
}

div.cat_n {
background-color: #f7f7f2;

width: 258px; /* 262 - 2 - 2 border */

border: 2px #f2c92a solid;
margin: 0px 0px 40px 0px
}


div.cat_w {
background-color: #f7f7f2;

width: 550px; /* 554 - 2 - 2 border */

border: 2px #f2c92a solid;
margin: 0px 0px 40px 0px
}

div.cat_container_close {
background-color: transparent;

clear: both;
}


/* CONTENT: CATEGORY Text Formatting
===================================================*/
div.cat_big_container h1 {
margin: 25px 15px 3px 15px;
}

div.cat_big_container h2 {
line-height: normal;

margin: 20px 15px 3px 15px;
}

div.cat_big_container h3 {
color: #6c6853;
font-weight: normal;
line-height: normal;

margin: 0px 15px 5px 15px;
}

div.cat_big_container p {
margin: 3px 15px 15px 15px;
}

div.cat_n_title h1, div.cat_w_title h1 {
color: #1c80a1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/* Note - The title looks best in ALL Caps */
font-weight: bold;

line-height: normal;
margin: 0px;
padding: 7px 0px 0px 32px;
}