/* 
Author: 	    Kalyan Chatterjee
Version: 	    1.0
Description:	First version of CSS for kalsden.com. Better late than never.
Editor:         Komodo Edit for Mac and PC
Date Created: 	June 24, 2010
*/	

/************************* Generic Selectors **************************/
* {
    margin: 0;
    padding: 0;
}

/******************************** Tags ********************************/

a {
    font-weight: normal;
    text-decoration: none;
}
/* link states start here */
a:link {
    color: #0099CC;
    /*color: #008B00;*/
}

a:visited {
    color: #0099CC;    
}

a:hover {
    color: #B87333;
}

a:active {
    color: #DF4F1F;
}
/* link states end here */

body {
    height: 100%;
    /* These fonts are used on Apple's website. Apple folks, if you see a problem  with that let me know. */
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    background-color: #77896C;
    /* line-height is the separation between two lines of text */
    line-height: 200%;
    /* The following line is required for IE 6 */
    text-align: center;  
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1 {
    font-size: x-large;
    font-weight: normal;
    color: #6F6F6F;
}

h2 {
    font-size: medium;
    font-weight: normal;
    color: #6F6F6F;
}

td {
    vertical-align: top;
    padding-left: 15px;
}

/************************ Contextual Selectors ************************/
/* All divs should be under pageContainer */
#pageContainer {
    margin: 0 auto;
    width: 900px;
    text-align: left;
    position: relative;
    height: auto;
    text-align: left;
}

#headerContainer {
    position: relative;
    background-image: url("black-gradient.jpg");
    background-repeat: repeat-x;
    background-color: #000000;
    color: #FFFFFF;    
    height: 60px;
    width: inherit;
    text-align: left;
}

#headerWebsiteNameContainer {
    position: relative;
    float: left;
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 15px;
    text-align: left;
}

/* Color of h1 text in headerCompanyNameContainer is white, bigger font size too */
#headerWebsiteNameContainer h1 {
    color: #FFFFFF;
    font-size: x-large;
}

/* Notice that the bottom of this has to be aligned with div headerWebsiteNameContainer */
#headerLinksContainer {
    position: relative;
    float: right;
    padding-top: 25px;
    padding-bottom: 5px;
    padding-right: 15px;
    text-align: left;
}

#headerLinksContainer a {
    font-weight: normal;
    text-decoration: none;
}

/* link states inside div headerLinksContainer start here */
#headerLinksContainer a:link {
    color: #FFFFFF;
}

#headerLinksContainer a:visited {
    color: #FFFFFF;    
}

#headerLinksContainer a:hover {
    color: #FFFFFF;
}

#headerLinksContainer a:active {
    color: #FFFFFF;
}
/* link states inside div headerLinksContainer end here */

#bodyContainer {
    position: relative;
    margin-top: 5px;
    padding: 15px;
    width: 870px;
    height: 700px;
    background-color: #F0F0F0;
    font-size: 12px;
    text-align: left;
}

#bodyContainerStretchable {
    position: relative;
    margin-top: 5px;
    padding: 15px;
    width: 870px;
    height: auto;
    background-color: #F0F0F0;
    font-size: 12px;
    text-align: left;
}

#footerContainer {
    position: relative;
    margin-top: 5px;
    padding-top: 5px;
    background-image: url("black-gradient.jpg");
    background-repeat: repeat-x;
    background-color: #344152;
    color: #A1A1A1;
    font-size: 11px;
    height: 55px;
    width: inherit;
    text-align: left;
}

/***** Classes ******/
.FancyButton
{
    height: auto;;
    background-color: #000000;
    padding-left: 5px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
}