/*----------------------------------------------------------
The base color for this template is #000000. If you'd like
to use a different color start by replacing all instances of
#000000 with your new color.
----------------------------------------------------------*/


body
{
    background-color: #000000;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #ffffff;
}

img
{
    border: 0px;
}

a
{
    /* Applies to all  links */
    text-decoration: none;
    color: inherit;
}

a:link 
{
    text-decoration: none;
    color: inherit;
}

a:visited
{
    text-decoration: none;
    color: inherit;
}

a:hover
{
    text-decoration: none;
    color: inherit;
}


#topMenu
{
    float: left;
    height: 47px;
    background-image: url('/Content/Images/TopMenuBack.png');
    background-repeat: repeat-x;
    width: 641px;
}

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

#topMenu li
{
    float: left;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 1.8em;
    padding-left: 30px;
    padding-top: 12px;
    color: #fd9c09;
    cursor: pointer;
    text-shadow: 0.1em 0.1em 0.2em black;
}

#topMenu li:hover
{
    color: #FFFFFF;
}

#topMenu li.current
{
    color: #FFFFFF;
}


#sidebar
{
    position: absolute;
    top: 0px;
    left: 97px;
    width: 237px;
    height: 500px; /*background-color: green;*/
}

#sidebar #sidebarTitle
{
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 1.8em;
    color: #ffffff;
    position: absolute;
    top: 160px;
}

#sidebar #sidebarText
{
    text-align: justify;
    line-height: 1.8em;
    position: absolute;
    top: 190px;
}
#sidebar p
{
    margin-bottom: 3em;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}


#header
{
    width: auto;
    margin-top: 40px;
    height: 47px; /*background-color: blue;*/
}


#header img
{
    float: left;
}
#header div
{
    float: left;
}


#canvas
{
    position: relative;
    margin-top: 52px;
    width: auto;
    height: 1000px; /*background-color: gray;*/
}

#main
{
    position: absolute;
    top: 0px;
    left: 351px;
    width: 649px; /*background-color: teal;*/
}

#projects
{
    height: 500px;
}


.projectText
{
    position: absolute;
    left: 0px;
    top: 187px;
}

.projectText img
{
    position: absolute;
    top: 0;
    left: 0; /*float:left;*/
}

.projectText span
{
    float: left;
}

.projectTextBar
{
    width: 279px;
    height: 47px;
    background-image: url('/Content/Images/TopMenuBack.png');
    background-repeat: repeat-x;
    color: #ffffff;
}


.projectTextBarTopLeft
{
    position: absolute;
    left: 6px;
    top: 6px;
}

.projectTextBarTopRight
{
    position: absolute;
    right: 6px;
    top: 6px;
}

.projectTextBarBottomLeft
{
    position: absolute;
    left: 6px;
    bottom: 6px;
}

.projectTextBarBottomRight
{
    position: absolute;
    right: 6px;
    bottom: 6px;
}


.projectBox
{
    float: left;
    height: 260px;
    position: relative;
    width: 296px;
}

.projectBox img
{
    position: absolute;
    left: 0px;
    top: 0px;
}

.noFloat
{
    float: none;
}


#quoteContainer
{
    position: relative;
    height: 160px;
    width: 576px;
}

.quote
{
    float: left;
    margin-top: 12px;
}

.quoteText
{
    width: 482px;
    padding-left: 48px;
    padding-top: 18px;
    color: #fd9c09;
    font-size: x-large;
}

.quoteSource
{
    color: #3E3D3B;
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: smaller;
}

.quotePerson
{
    font-size: small;
}

#contactForm
{
    position: relative;
    margin-top: 10px;
}

#contactForm img
{
    float: left;
}

#contactForm span
{
    float: left;
}


.contactFormHeader
{
    width: 555px;
    height: 35px;
    background-image: url('/Content/Images/TopMenuBack.png');
    background-repeat: repeat-x;
    color: #ffffff;
    font-size: large;
    padding: 12px 0 0 12px;
}


/* the three following are different for IE*/


.contactFormFields
{
    width: 575px;
    height: 250px;
    background-color: #6b665a;
    color: #fd9c09;
    font-size: large;
}

.contactFormFields input
{
    margin: 0 0 0 24px;
    width: 350px;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 0.9em;
    color: #000000;
    border-color: #6b665a;
    border-style: solid;
}

.contactFormFields textarea
{
    margin: 0 0 0 24px;
    width: 350px;
    height: 60px;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 0.9em;
    color: #000000;
    overflow: hidden;
    border-color: #6b665a;
    border-style: solid;
    resize: none;
}


.grayCorner
{
    background-image: url('/Content/Images/grayCorner.png');
    background-repeat: no-repeat;
    background-position: right top;
}


.formField
{
    margin: 24px 0 0 24px;
}

.formLabel
{
    width: 130px;
}

.formFirstWord
{
    color: #ffffff;
}

.contactFormBottom
{
    left: 0px;
    position: absolute;
    top: 268px;
}

.contactFormSubmit
{
    position: absolute;
    left: 178px;
    top: 250px;
}

.mailMessage
{
    margin: 24px;
    font-family: Verdana, Arial, Sans-Serif;
    color: #ffffff;
}


/*
.clear
{
    clear: both;
}

.error
{
    color:Red;
}
*/

.hidden
{
    display: none;
}

.projectDetailBox
{
    width: 600px;
    /*height: 800px;*/
    background-color: #000;
    border-bottom: solid 3px #3B3830; 
    border-left: solid 3px #3B3830; 
    border-right: solid 3px #3B3830; 
    padding: 0px;
    position: relative;
}

.projectDetailBox img
{
    /*position: absolute;
    top: 21px;
    left: 21px;*/
    padding: 21px 21px 0px 21px;
}

.projectDetailBox .overlayImage
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.projectDetailBox .closeXImage
{
    position:absolute;
    right:0px;
    top:0px;
    padding: 3px 3px 0px 0px;
}

.projectDetailBox .projectDetailText
{
   /* position: absolute;
    top: 400px;
    left: 21px;
    right: 21px;*/
    padding: 21px 21px 0px 21px;
}

.projectDetailBox .projectDetailText a
{
    color:#fd9c09;
}

.projectTitle
{
  font-size:1.8em;   
  font-family:Verdana,Arial,Sans-Serif;
  padding-bottom:1em;
  /*color: #fd9c09;*/
  color: #ffffff;
  float:left;
}

.projectClient
{
    
    font-size:1.8em;   
    font-family:Verdana,Arial,Sans-Serif;
    padding-bottom:1em;
    text-align:right;
}

.projectUrl
{
    font-size:1.3em;   
    font-family:Verdana,Arial,Sans-Serif;
    padding-bottom:1em;
    text-align:left;
}

.bottomLink
{
    /*position: absolute;*/
    right: 21px;
    bottom: 21px;
}

#simplemodal-overlay
{
    background-color: #000;
    cursor: hand;
}

.client
{
    text-align:center;
    padding-bottom:40px;
}

.aboutText
{
    font-size:small;
    text-align:justify;
    line-height: 1.8em;
    margin:0px 40px 0px 40px;
}

.aboutText p
{
    margin-bottom:3em;
}

.aboutTable
{
    margin:50px 40px 0px 40px;
    width:300px;
    line-height: 1.8em;
    font-size:small;
}