/* ========================================= */
/*                CSS DOC INFO               */
/* ========================================= */
/* Created by: Anthony Winter                */
/* Website: http://www.digitalwinter.co.uk   */
/* ========================================= */

/* ========================================= */
/*               Website Layout              */
/* ========================================= */
* {margin:0; padding:0;}
body {margin:0; padding:0; background:url(../images/mainbackpat.jpg); font-size: 100%; color: #000; font-family:DejaVuSansBook, Arial;}
#topleft {position:absolute; z-index:-1; top:0; left:0; width:311px; height:500px; background:url(../images/topleft.png) no-repeat;}
#wrapper {width:100%; float:left;}
h1, h2, h3, h4, h5 {text-align:left;}

/* ========================================= */
/*                   Fonts                   */
/* ========================================= */
@font-face {
    font-family: 'LucidaSansItalic';
    src: url('../fonts/lsansi-webfont.eot');
    src: url('../fonts/lsansi-webfont.eot?iefix') format('eot'),
         url('../fonts/lsansi-webfont.woff') format('woff'),
         url('../fonts/lsansi-webfont.ttf') format('truetype'),
         url('../fonts/lsansi-webfont.svg#webfonttJIAghLh') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

/* ========================================= */
/*                   Header                  */
/* ========================================= */
header {width:100%; float:left;}

#h_wrap {width:1000px; height:85px; margin:0 auto;}

#logo {width:351px; height:70px; float:left; margin:20px 0 0 0;}

header nav {width:325px; float:right; text-align:right; padding:40px 0 20px 0; background:url(../images/light_blue_fade.png); border-left:1px dashed #999; border-bottom:1px dashed #999; border-right:1px dashed #999; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}
header nav li {list-style-type:none; display:inline; margin:0 20px 0 0;}
header nav a {text-decoration:none; color:#000; font-size:130%; font-weight:normal;}
header nav a:hover {color:#000; border-bottom:solid 1px #36c;}

#topsites {width:200px; float:left; margin:0 0 0 75px;}

/* ========================================= */
/*               Main Content                */
/* ========================================= */
#frontpage {width:100%; float:left; margin:-60px 0 40px 0;}
#maincontent {width:100%; float:left; margin:20px 0 40px 0;}

#m_wrap {width:1000px; margin:0 auto;}

/* =============    Index     ============== */
article {width:419px; float:left; padding:0 25px 0 0; text-align:justify;}
article a {color:#36c;}
article p {font-size:90%;}
article h2 {color:#000; font-size:160%; font-family: 'LucidaSansItalic'; font-weight:normal;}
article h3 {color:#000; font-size:120%; font-family: 'LucidaSansItalic'; font-weight:normal;}

aside {width:547px; float:right; margin:20px 9px 0 0;}
aside h2 {color:#000; font-size:140%; text-shadow:1px 1px 1px #fff;}

/* ============    Portfolio    ============ */
.row {width:1000px; margin:0 0 30px 0; float:left;}

.window {width:302px; float:left; padding:0 0 10px 0; margin:0 15px 0 15px; border-bottom:1px solid #999;}
.windowflake {width:302px; float:left; padding:0 0 10px 0; margin:0 0 0 25px; text-align:center}
.window p {font-size:80%;}
.window a {font-size:90%; color:#36c;}
.window img {margin:0 0 5px 0; border:1px solid #777;}

/* ============     Contact     ============ */
#left_box {width:380px; min-height:370px; float:left; text-align:justify; margin:0 30px 0 0; background:url(../images/mail-back.png) bottom no-repeat;}
#left_box p.smessage {color:#090; font-size:110%; border:1px solid #090; padding:5px; font-weight:bold;}
#left_box p.emessage {color:#C00; font-size:110%; border:1px solid #C00; padding:5px; font-weight:bold;}

#mid_box {width:320px; float:left; text-align:left; margin:0 10px 0 10px;}
#mid_box {width:300px;}
#mid_box .input {font-size:100%; width:300px; height:20px; padding:5px; border:1px solid #666; background:none; margin:3px 0 0 0; border-radius: 5px;}
#mid_box .msgbox {font-size:80%; font-family:DejaVuSansBook; width:300px; height:120px; padding:5px; margin:5px 0 0 0; border:1px solid #666; background:none; border-radius: 5px;}

#right_box {width:200px; float:right; text-align:left; padding:20px 0 0 0;}

#left_box h2 {color:#000; font-size:160%; font-family: 'LucidaSansItalic'; font-weight:normal;}
#left_box h3, #mid_box h3, #right_box h3 {color:#36c; font-size:120%; font-family: 'LucidaSansItalic'; font-weight:normal;}
#left_box p, #mid_box p, #right_box p {font-size:90%;}

address {font-style:normal;}

/* ========================================= */
/*                  Footer                   */
/* ========================================= */
footer {width:100%; background:url(../images/blue_fade.png); float:left; padding:10px 0 10px 0; margin-bottom:20px; color:#000; border-top:1px #036 solid; border-bottom:1px #036 solid;}
#f_wrap {width:1000px; margin:0 auto;}

footer a {color:#000;}
footer p {font-size:75%; padding:0 10px 0 2px;}
footer li {font-size:75%; list-style-type:none; padding:0 0 3px 2px;}

footer nav {width:300px; float:left;}
footer nav a {text-decoration:none;}
footer nav li {display:inline; list-style-type:none;}
footer nav a:hover {border-bottom:solid 1px #36c;}
footer #copyright {width:275px; float:right; text-align:right; padding-top:2px;}

/* ========================================= */
/*                  Misc                     */
/* ========================================= */
a img {border:0;}
.selected {border-bottom:solid 1px #36c;}
#hide {display:none;}
#testimonial1, #testimonial2, #testimonial3, #testimonial4, #testimonial5 {width:500px; font-size:80%; background:url(../images/mainbackpat.jpg); padding:10px;}