@charset "utf-8";
@import url('reset.css');
body,html {
height:100%;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
margin:0; 
}

#container {
width:100%;
min-height:100%;
position:relative;
background-image:url(../images/bg.jpg);
background-repeat:repeat-y;
background-color:#fefefe;
background-position:center;
}

#top_nav {
height:70px;
width:100%;
background-image:url(../images/bg_02.jpg);
}

#top_nav_content {
width:880px;
height:70px;
background-image:url(../images/bg_03.jpg);
margin:auto;
}

#header {
height:232px;
width:100%;
background-image:url(../images/headerbg.jpg);
background-position:bottom;
}

#header_content {
height:232px;
width:100%;
background-image:url(../images/header.jpg);
background-position:center;
background-repeat:no-repeat;
}

#portfolioheader {
height:232px;
width:100%;
background-image:url(../images/portfolioheader.jpg);
background-position:center;
background-repeat:no-repeat;
}

#resourcesheader {
height:232px;
width:100%;
background-image:url(../images/resourcesheader.jpg);
background-position:center;
background-repeat:no-repeat;
}

#content {
width:860px;
margin:auto;
padding:20px 0 95px;
}

#content_left {
width:230px;
float:left;
}

#content_right {
float:right;
width:590px;
text-align:justify;
}
#content_right iframe { width:190px;}
#content_right_iframe iframe { width:100%;}

#footer {
position:absolute;
bottom:0;
background-color:#151618;
height:68px;
width:100%;
z-index:9;
}

#footer_content {
width:900px;
color:#ccc;
background-image:url(../images/bg_12.jpg);
background-repeat:no-repeat;
background-position:top;
margin:auto;
padding:20px;
}

#footer_content_left {
width:400px;
font-size:11px;
padding-top:10px;
float:left;
margin:auto;
}

#footer_content_right {
width:400px;
font-size:11px;
padding-top:10px;
float:right;
text-align:right;
margin:auto;
}

.spacer {
clear:both;
}

.navhead {
padding-left:20px;
padding-bottom:5px;
font-size:16px;
color:#099;
}

.box_top {
background-image:url(../images/corner.png);
background-position:top left;
background-repeat:no-repeat;
}

.box_top span {
background-image:url(../images/corner.png);
background-position:top right;
background-repeat:no-repeat;
display:block;
}

.box_bottom {
background-image:url(../images/corner.png);
background-position:bottom left;
background-repeat:no-repeat;
margin-bottom:20px;
}

.box_bottom span {
background-image:url(../images/corner.png);
background-position:bottom right;
background-repeat:no-repeat;
display:block;
}

.box_centre {
height:10px;
margin-left:10px;
margin-right:10px;
background-color:#1B1C20;
}

.box_bg {
background-color:#1B1C20;
padding-left:0;
padding-right:0;
color:#CCC;
padding-bottom:50px;
}

.box_bg2 {
background-color:#1B1C20;
color:#CCC;
padding:1px 10px 50px;
}

.boxpadding {
padding-left:10px;
padding-right:10px;
}

.logo {
width:0;
float:left;
}

.left {
float:left;
width:29%;
padding-left:10px;
font-weight:700;
}

.right {
float:left;
width:69%;
}

.left2 {
float:left;
width:48%;
padding-left:10px;
}

.right2 {
float:left;
width:48%;
}

h4 {
border-bottom:dashed 1px #666;
font-size:14px;
padding:10px;
}

h1 {
display:block; font-family:"Century Gothic",Arial; font-weight:normal; font-size:32px; padding-bottom:10px; color:#d03791;

}

h1 img {
position:absolute;
top:0;
left:0;
}

h2 {
color:#099;
font-size:16px;
font-weight:400;
background-image:url(../images/h2.jpg);
display:block;
width:100%;
background-repeat:no-repeat;
margin:15px 0;
padding:2px 5px 2px 10px;
}

h3 {
display:block;
background-image:url(../images/h3.jpg);
background-position:bottom;
background-repeat:no-repeat;
height:25px;
font-size:16px;
font-weight:400;
margin:15px 0;
}

a:link {
color:#9A0958;
text-decoration:underline;
}

a:hover {
text-decoration:none;
color:#099;
}

.top {
background-position:bottom;
}

.templateCategoryMenu li {
    line-height:7px; padding-top:4px;
}
.templatesHolder { margin:10px;}

#content_left ul#menu a {
position:relative;
display:block;
text-decoration:none;
}

#content_left ul#menu a span {
position:absolute;
top:5px;
right:5px;
}

#content_left ul#menu,ul#menu ul {
list-style-type:none;
margin:0;
padding:0;
}

#content_left ul#menu li {
margin-top:0;
}

#content_left ul#menu li a {
margin-left:10px;
margin-right:10px;
color:#CCC;
background-image:url(../images/linksbg.jpg);
background-position:top center;
background-repeat:no-repeat;
padding:5px 5px 5px 25px;
}

#content_left ul#menu li a:hover {
color:#099;
background-image:url(../images/linksbg_hover.jpg);
background-repeat:no-repeat;
}

#content_left ul#menu li ul li a {
padding-left:45px;
background-image:url(../images/linksbg2.jpg);
background-repeat:no-repeat;
}

#content_left ul#menu li ul li a:hover {
padding-left:45px;
background-image:url(../images/linksbg_hover2.jpg);
background-repeat:no-repeat;
}

#content_left a:visited,a:active {
text-decoration:underline;
color:#099;
}

p { padding:15px}





#top_nav { width:100%; height:70px; background-image:url(../images/bg_02.jpg);}
#top_nav_content { width:900px; height:70px; margin:auto;  background-image:url(../images/bg_03.jpg); background-position:center; background-repeat:no-repeat; position:relative}
#top_nav_content h1 { margin:0}
#logo { position:absolute; left:0; top:0}
ul#topnav { height:70px; list-style:none; margin:0; padding:0; position:absolute; right:0; top:0}
ul#topnav li { float:left}
ul#topnav li a { display:block; height:70px; position:relative}
ul#topnav li a span { display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:100;}

ul#topnav li a.intro { width:66px; background-image:url(../images/nav_intro.jpg)}
ul#topnav li a.intro span { background-image:url(../images/nav_intro_over.jpg)}

ul#topnav li a.templates { width:108px; background-image:url(../images/nav_templates.jpg)}
ul#topnav li a.templates span { background-image:url(../images/nav_templates_over.jpg)}

ul#topnav li a.resources { width:105px; background-image:url(../images/nav_resources.jpg)}
ul#topnav li a.resources span { background-image:url(../images/nav_resources_over.jpg)}

ul#topnav li a.portfolio { width:100px; background-image:url(../images/nav_portfolio.jpg)}
ul#topnav li a.portfolio span { background-image:url(../images/nav_portfolio_over.jpg)}

ul#topnav li a.contact { width:85px; background-image:url(../images/nav_contact.jpg)}
ul#topnav li a.contact span { background-image:url(../images/nav_contact_over.jpg)}