@import url('reset.css');

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 13, 2011 */

@font-face {
    font-family: 'GrandesignNeueSerifRegular';
    src: url('fonts/grandesign_neue_serif-webfont.eot');
    src: url('fonts/grandesign_neue_serif-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/grandesign_neue_serif-webfont.woff') format('woff'),
         url('fonts/grandesign_neue_serif-webfont.ttf') format('truetype'),
         url('fonts/grandesign_neue_serif-webfont.svg#GrandesignNeueSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TerminalDosisLight';
    src: url('fonts/terminaldosis-light-webfont.eot');
    src: url('fonts/terminaldosis-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/terminaldosis-light-webfont.woff') format('woff'),
         url('fonts/terminaldosis-light-webfont.ttf') format('truetype'),
         url('fonts/terminaldosis-light-webfont.svg#TerminalDosisLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'GrandesignNeueSerifBold';
    src: url('fonts/grandesign_neue_serif_bold-webfont.eot');
    src: url('fonts/grandesign_neue_serif_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/grandesign_neue_serif_bold-webfont.woff') format('woff'),
         url('fonts/grandesign_neue_serif_bold-webfont.ttf') format('truetype'),
         url('fonts/grandesign_neue_serif_bold-webfont.svg#GrandesignNeueSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*body {background: url('bg_pattern.jpg')}*/
a {text-decoration: none; color: #000;}
#clear {clear: both;}

#container { margin: auto; padding:0;}

cite {font-style: italic;}

#header{height:150px; margin:0; padding-top:15px; }
#header ul.nav-left {height:30px; width:50%; margin-top:100px; border-top: 2px solid #A4CFF2; border-bottom: 2px solid #A4CFF2; font-family: 'TerminalDosisLight', Verdana, sans-serif; font-size: 18px; list-style: none; text-align: right; float:left;}
#header ul.nav-right {height:30px; width:50%; margin-top:100px; border-top: 2px solid #A4CFF2; border-bottom: 2px solid #A4CFF2; font-family: 'TerminalDosisLight', Verdana, sans-serif; font-size: 18px; list-style: none; text-align: left;float:left;}

#header li {vertical-align: middle; display:inline; padding: 20px;}
#header li.active {text-transform: uppercase;}


h1#logo {position:absolute; background: url(bg_house.png) no-repeat; text-indent:-9999px; display: block; width:100px; height:150px; left: 50%; margin:0 0 0 -50px;}


#content {width: 860px; margin:20px auto; font-family: 'GrandesignNeueSerifRegular', Minion Pro, Georgia, serif; font-size:14px;}
p#top {text-align: right; font-style: italic;}


#description { width: 860px; height: 212px; background: url('bg_description.png') no-repeat; margin:auto;}
h1#title {position:  relative; left: 30px; top:20px; font-size: 18px; text-transform: uppercase; }
#description p{position: relative; left:30px; top: 25px; width: 810px; }
.left {width: 260px; height: 170px; float:left; position: relative; z-index: 1; top:15px;}
.left ul { list-style: none;}
.left li {padding-top: 1px; font-size: 12px; }
.left li.active{font-style:italic; }
.left li a:hover{font-style:italic; color: #35749C;}
p#links {position: relative; font-size: 12px; margin:0; color:#35749C;}
p#links a {padding-left: 20px; color:#35749C;}
img { margin-top:25px;}


#footer {width:auto; text-align: center; font-family: 'GrandesignNeueSerifRegular', Minion Pro, Georgia, serif; font-size: 11px; border-top: solid 1px #B5B8B3; padding-top: 10px ;margin:30px 0;}

.about {width: 260px; height: 183px; float:left; position: relative; left:0; top:14px; background-image: url(jj_port_lines.png); text-indent: -9999px;}


/*BLOG*/
#blog {width: 550px; float:left; margin-right:100px;}
.post {width: 550px; border-bottom: 1px solid #C9C996; float:left; padding-bottom: 10px; padding-top:10px;}
.date {float: left; background: url('bg_date.png') no-repeat right; height: 30px; width:80px; font-family: 'GrandesignNeueSerifBold', Minion Pro, Georgia, serif; font-size: 16px; vertical-align: middle; padding-top:8px; margin-right:20px;}
.post p {width: 450px; margin-top:10px; float:left;}
.post p+p {margin-left: 100px;}
#right {position: relative; padding-top:10px; width: 210px; float: left;}
h3 {font-family: 'GrandesignNeueSerifRegular', serif; font-size: 14px; color:#35749C; border-bottom: 1px solid; margin-bottom: 15px;}
#right ul {list-style:url('li_arrow.png'); font-size: 12px; line-height: 1.3;margin-left:17px;}
#right li {padding:10px 0; border-bottom: 1px dashed #a4dff2;}

/*PORTFOLIO*/
ul#workNav {list-style: none;}
ul#workNav li {width:260px; margin-right:40px; float:left; margin-bottom: 30px;}
ul#workNav li.right {width:260px; float:left; margin-bottom: 30px; margin-right:0;}
h2 {font-family: 'GrandesignNeueSerifRegular', serif; font-size: 14px; border-top:1px solid #E3E3E3 ;border-bottom: 1px solid #E3E3E3; text-align: center; padding:2px 0; margin-top:10px;}