/*================================================================
LAYOUT stylesheet for the website.

Define layout and backgrounds for:
  - Body
  - Wrapper
  - Header
  - Sidebar
  - Content
  - Footer
  ( Navigation is defined in nav.css )
  
  ***  NO TYPOGRAPHY STYLES HERE PLEASE  ***
  
================================================================*/


/* BODY 
----------------------------------------------------------------*/
body 
{
    background: #ededed;   
}


/* WRAPPER
----------------------------------------------------------------*/
#wrapper 
{
    background: #ffffff;
    width: 750px;
    margin: 10px auto 0 auto;
    clear: both;
    border-left: solid 1px #ababab;
    border-right: solid 1px #ababab;
    overflow: hidden;
}

/* HEADER
----------------------------------------------------------------*/

#logo
{
    float: left;
    background: url(assets/logo.jpg) no-repeat;
    width: 200px;
    height: 150px;
    border-top: solid 1px #ababab;
    border-bottom: solid 1px #ababab;
    margin: 0 0 0 0;
}

#banner
{
    float: left;
    height: 150px;
    width: 550px;
    background: url(assets/banner.jpg) no-repeat;
    border-top: solid 1px #ababab;
    border-bottom: solid 1px #ababab;
    margin: 0 0 0 0;
}

#navbar
{
    float: left;
    margin: 110px 0 0 100px;
}


/* SIDEBAR
----------------------------------------------------------------*/
#sidebar 
{
    width: 140px;
    float: left;
    margin: 10px 0 0 30px;
    padding: 0 0 0 0;
}

#title
{
    margin: 0 0 10px 0;
    width: 130px;
    height: 30px; 
}

#contactaddress
{
    border-bottom: dotted 1px #ababab;
    background: #dddddd;
}

#sidecontent
{
    margin: 10px 10px 0 10px;
}

/* CONTENT
----------------------------------------------------------------*/
#content 
{
    width: 480px;
    margin: 10px 20px 30px 30px;
    padding: 0 10px 10px 30px;
    text-align: left;
    float: right;

}

.subcontent
{
    margin: 0 0 10px 0;
}

.contentdivider
{
    border-bottom: solid 1px #ababab;
    margin: 0 0 10px 0;
}

#websitepackages
{
    width: 441px;
    margin: 20px 0 20px 0;
    padding: 20px 0 20px 20px;
    background: #dddddd;
}

.packagebox
{
    width: 125px;
    float: left;
    margin: 0 20px 0 0;
    height: 125px;
    background: #ffffff;
}

.packagebox a
{
    float: right;
    padding: 0 5px 0 0;
}

.boxleft
{
    border: solid 1px #3f3793;
}

.boxmiddle 
{
    border: solid 1px #479337;
}

.boxright
{
    border: solid 1px #bb3333;
}

#packagecolleft
{
    width: 220px;
    float: left;
    margin: 0 10px 0 0; 
    padding: 0 0 0 10px;   
}


#packagecolleftfooter 
{

}

#packagecolright
{
    width: 230px;
    padding: 0 0 0 10px; 
    background: #dddddd;
}

#packagecolrightfooter
{
    padding: 10px 0 0 0;
}


/* FOOTER
----------------------------------------------------------------*/
#footer 
{
    background: #ababab;
    height: 20px;
    width: 750px;
    float: left;
}