/* *****************************************************************************
 * Carlcassar.com Style Sheet                                                  *
 * Freelance Web Design Malta                                                  *
 * Description: Style Sheet for CarlCassar.com                                 *
 * Version: 1.0                                                                *
 * Author: Carl Cassar                                                         *
 * ****************************************************************************/

/* ********************************* LAYOUT ***********************************/

/* Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td, input, textarea {
    margin: 0; padding: 0;
}

#header, #content_wrapper, #content_top, #content_bottom, #footer{
    width:950px;
    margin-left:auto;
    margin-right:auto;
}

#content_wrapper{
    margin-top:20px;
}

#footer p{
    color:#FFF;
    text-align: center;
}

#content_wrapper{
    clear:both;
    height:auto;
    color: #FFF;
}

#logo{
    float:left;
    margin-left:10px;
    padding:20px;
}

#logo a{
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    text-indent: -1000px;
    display:block;
    width:400px;
    height:133px;
}

#nav {
    height:40px;
    float:right;
    padding-right: 20px;
}

#nav ul li{
    list-style: none;
    float:left;
}

#nav ul li a {
    width:120px;
    text-decoration:none;
    display:block;
    text-align:center;
}

#left_column{
    width:600px;
    height:auto;
    float:left;
}

#left_column_body{
    width:590px;
    height:auto;
    background: url(../img/left_column_body.png) repeat-y;
}

#left_column_top{
    width:590px;
    height:5px;
    background: url(../img/left_column_top.png) no-repeat;
}

#left_column_bottom{
    width:590px;
    height:5px;
    background: url(../img/left_column_bottom.png) no-repeat;
    margin-bottom: 10px;
}

.right_column_body{
    width:348px;
    height:auto;
    background: url(../img/right_column_body.png) repeat-y;
}

.right_column_bottom{
    width:348px;
    height:5px;
    background: url(../img/right_column_bottom.png) no-repeat;
    margin-bottom: 10px;
}

#right_column{
    margin-left:2px;
    width:348px;
    float:right;
    height:auto;
    text-align: justify;
}

#left_column td{
    height: 40px;
}

p{
    font-size: 1em;
    padding-bottom:20px;
    padding-left:20px;
    padding-right:20px;
    line-height:1.3em;
    text-align: justify;
 }

#right_column h1{
    display:block;
    height: 40px;
    background: url(../img/header_right.png) no-repeat;
    line-height: 40px;
    color:#FFF;
    padding-left: 20px;
}

#left_column h1{
    font-size: 1.5em;
    padding-bottom: 10px;
    padding-top: 16px;
    font-family: 'Droid Serif', arial, serif;
}

#left_column h2{
    font-weight: normal;
    color:#a20a08;
    padding-bottom: 10px;
    padding-top: 16px;
    font-family: 'Droid Serif', arial, serif;
}

.left_column_content_body{
    background: url(../img/left_column_content_body.png) repeat-y;
    width:550px;
    margin-left: 20px;
    padding-top:20px;
    color: #333;
}

.left_column_content_top{
    background: url(../img/left_column_content_top.png) no-repeat;
    width:550px;
    height:5px;
    margin-left: 20px;
}

.left_column_content_bottom{
    background: url(../img/left_column_content_bottom.png) no-repeat;
    width:550px;
    height:5px;
    margin-left: 20px;
    padding-bottom: 10px;
}

.little_icon{
    vertical-align: bottom;
    padding-right:20px;
}

h1{
    font-weight:normal;
    font-size: 0.9em;
    color:#a20a08;
}

fieldset{
    border: none;
    padding-left:20px;
    padding-top:20px;
}

.query_input{
    background: url(../img/query_bg.png) no-repeat;
    height:40px;
    padding-top: 10px;
    padding-bottom: 5px;
}

#queryForm img, #mailingForm img{
    vertical-align: top;
    padding-left:5px;
}

.input_label{
    line-height: 20px;
    padding-left: 10px;
    width:100px;
    color:#333;
    float:left;
}

#left_column form{
    padding-left:20px;
}

input{
    width:170px;
    background: none;
    margin-right: 30px;
    float:right;
    margin-top: -1px;
}

#left_column input{
    float:none;
    margin-left:20px;
}

input:focus, textarea:focus{
    outline:0;
}

#right_column textarea{
    background: none;/*#EBEBEC;*/
    border:none;
    width: 288px;
    max-width: 288px;
    padding:10px;
}

#left_column textarea{
    background: none;
    width:450px;
    max-width: 450px;
    padding:10px;
}

.textarea_body{
    background: url(../img/textarea_bg.png) repeat-y;
    width:308px;
}

.textarea_top{
    background: url(../img/textarea_bg_top.png) no-repeat;
    height:5px;
    width:308px;
}

.textarea_bottom{
    background: url(../img/textarea_bg_bottom.png) no-repeat;
    height:5px;
    width:308px;
}

.right_column_content_body{
    background: url(../img/textarea_bg.png) repeat-y;
    width:308px;
    margin-left:20px;
    color:#333;
    padding-top:10px;
}

.right_column_content_top{
    background: url(../img/textarea_bg_top.png) no-repeat 0px 20px;
    height:5px;
    width:308px;

    margin-left: 20px;
    padding-top:20px;
}

.right_column_content_bottom{
    background: url(../img/textarea_bg_bottom.png) no-repeat;
    height:5px;
    width:308px;
    margin-left: 20px;
    padding-bottom:20px;
}

.right_column_body ul{
    list-style-image: url(../img/more.png);
    list-style-position: outside;
    padding: 20px;
    padding-left: 40px;
    text-align: left;
}

.right_column_body ul li{
    padding-bottom: 20px;
}

.right_column_body p{
    text-align: left;
}

.textarea_body p{
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 10px;
    color: #333;
}

.submit{
    background: url(../img/submit.png) no-repeat;
    width:150px;
    height:40px;
    color:#FFF;
    border:none;
    margin-top:10px;
    margin-bottom: 20px;
}

.error{
    color: #ff0000;
}

.thanks{
    color: #00AEEF;
}

#left_column .thanks, #left_column .error{
    padding-left: 40px;
}

#right_column .thanks, #right_column .error{
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

#me{
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.page_header{
    padding:0px;
    margin-bottom:-4px;
    padding-left:40px;
}

.title{
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.white_title{
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    color: #FFF;
}

p a{
    color: #a20a08;
    text-decoration: none;
    font-weight:bold;
}

.site_icon{
    float:left;
    padding-right: 20px;
}

.more{
    padding-right: 10px;
    vertical-align: bottom;
}

a img {
    border:none;
}

.commenter{
    font-weight: bold;
    color: #a20a08;
    font-size: 1.1em;
}

.timestamp{
    font-size:xx-small;
    color: #999;
    padding-left: 10px;
}

/* *********************** Contact Us - Right Column **************************/

.browser_logo #first{
    padding-top:10px;
}

.browser_logo img{
    vertical-align: middle;
    padding-right:20px;
    width:50px;
}

.browser_logo a{
    color:#333;
    font-weight: normal;
}

.very_good_list ul{
    margin-left:20px;
    margin-right:20px;
    list-style: none;
}

.very_good_list ul .title{
    background:url("../img/green_very_good.png") no-repeat 0px 10px;
    padding:20px;
    padding-left:40px;
}

.very_good_list .details{
    height:auto;
    text-align: justify;
}

.more_icon{
    background:url("../img/more_selected.png") no-repeat;
    height:20px;
    width:20px;
    float:right;
}

.services_icon{
    float:left;
    padding-right: 20px;
    padding-left:20px;
}

#previous{
    background:url("../img/sites/previous.png") -100px 0px no-repeat;
    height:400px;
    width:100px;
    position:absolute;
    top:30px;
    left:50px;
    z-index: 100;
}

#next{
    background:url("../img/sites/next.png") -100px 0px no-repeat;
    height:500px;
    width:100px;
    position:absolute;
    top:30px;
    left:800px;
    z-index: 100;
}

#full_width_content_top{
    background:url("../img/full_width_content_top.png");
    height:5px;
    width:950px;
}

#full_width_content_bottom{
    background:url("../img/full_width_content_bottom.png");
    height:5px;
    width:950px;
    margin-bottom: 10px;
}

#full_width_content{
    background:url("../img/full_width_content.png");
    height:auto;
    width:950px;
    position:relative;
}

#frame{
    margin:auto;
    width:620px;
    min-height:420px;
    height:auto;
    padding-top:30px;
    background: url("../img/sites/bg_frame.png") 0 20px no-repeat;
}

#port_wrapper{
    margin-left:10px;
    width:600px;
}

.caption{
    width:560px;
    color:#FFF;
    background: url(../img/sites/caption.png);
    height:auto;
    padding:20px;
    margin-bottom: 20px;
    text-align:center;
    position: absolute;
    bottom: -16px;
    left:0px;
}

#plus_button{
    height: 50px;
    width: 50px;
    background: url("../img/sites/plus_button.png") no-repeat;
    position: absolute;
    top:370px;
    left:185px;
    z-index: 150;
}

/*
    style.css - Cascading style sheet for page style
*/

/*  Fonts  */
html{
    font-family: Arial,Helvetica, Verdana, sans-serif;
    font-size: 0.9em;
    letter-spacing:0.1em;
    background-image: url(../img/bg.jpg);
    background-repeat: repeat;
}

input, textarea{
    font-size: 0.9em;
    font-family: Arial,Helvetica, Verdana, sans-serif;
}

#banner{
    clear:both;
    height:300px;
    width:950px;
    background-image: url(../img/banner.png);
    background-repeat: no-repeat;
}

#banner_link{
    width:750px;
    padding-top:220px;
    height:40px;
}

#banner_link a{
    height: 40px;
    width:225px;
    float:right;
    color: #FFF;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
    background-image: url(../img/banner_icon.png);
    background-repeat: no-repeat;
}

#banner_link a:hover{
    background-position: -225px;
}

#nav{
    height:175px;
}

#nav ul li a{
    color:#FFF;
    padding-top: 130px;
}


#nav #nav_hom a{
    background-image: url(../img/home_icon.png);
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

#nav #nav_ser a{
    background-image: url(../img/services_icon.png);
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

#nav #nav_prt a{
    background-image: url(../img/portfolio_icon.png);
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

#nav #nav_con a{
    background-image: url(../img/contactme_icon.png);
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

#nav #nav_hom a:hover, #nav #nav_ser a:hover, #nav #nav_prt a:hover,
#nav #nav_con a:hover{
    background-position: -120px 50%;
}

#body_hom #nav_hom a, #body_ser #nav_ser a, #body_prt #nav_prt a,
#body_con #nav_con a{
    background-position: -240px 50%;
}

#footer{
	height:100px;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:0.9em;
        color:#FFF;
        clear:both;
}

#footernav{
	padding-top:20px;
	padding-bottom:5px;
}

#footernav a{
	text-decoration:none;
	color:#FFF;
}

#footernav a:hover{
	color:#FFF;
}

.numbers{
    padding: 10px;
}

.helpitem h1, .helpitem img{
    float: left;
}

.helpitem h1{
    padding: 0px;
}

.helpitem img{
    padding-left: 20px;
}

.helpitem p{
    clear: left;
    text-align: justify;
}