Ga Terug  
     


Templates (1.5) Het forum voor Joomla! Templates

Antwoord
 
Onderwerpopties Weergavemodus
Oud 2 februari 2009, 03:11   #1
MartCom
 
MartCom's Avatar
 
Geregistreerd op: 12 oktober 2008
Locatie: Leeuwarden
Leeftijd: 47
Berichten: 124
Bedankjes gegeven: 78
Bedankjes ontvangen: 34
Standaard afbeelding toevoegen aan achtergrond template

Beste JCers,

ik ben totaal niet thuis in templates, maar moet er toch eentje aanpassen

Ik heb de juiste afbeelding, ik heb een bestaande template en de bijbehorende css.

De afbeelding heet bg-content.gif
De site waar het om gaat is http://www.verhoeve.info/joomla/
De bedoeling is dat aan beide zijden van de site er een rand naar beneden komt waardoor de site er als een A4 met een slagschaduw uit komt te zien, in het logo is dat al terug te vinden en onder aan de pagina.

Ik zit zelf te denken in de richting van een stukje css wat er ongeveer zo uit zal zien:
Code:
    float: left;
    height: auto;
    width: 880px;
    padding-left: 15px;
    padding-right: 15px;
    background: url(images/bg_content.gif);
    background-repeat: repeat-y;
    background-position: left;
De css van de template ziet er als volgt uit:

Code:
*  {
    margin: 0;
    padding: 0; }
    

/* Normal link */
a  {
    text-decoration: underline;
    color:#999999; }
a:hover, a:focus  {
    color:#666666;
    text-decoration:underline; }

 img, fieldset  { border:none; }
 h1  { font-size:16px; color:#000000; font-family:Arial, Helvetica;}
 h2  { font-size:14px; color:#000000; font-family:Arial, Helvetica; font-weight:normal;}
 h3  { font-size:12px; color:#000000; font-family:Arial, Helvetica;}
 h4  { font-size:10px; color:#000000; font-family:Arial, Helvetica;font-weight:normal;}
 h5  { font-size:8px; color:#000000; font-family:Arial, Helvetica;}


/* Small text */
.small, .smalldark, .createdate, .modifydate, .mosimage_caption,
.back_button, .pagenavcounter, .pagenav, .pagenavbar, a.readon  {
    font-size: 0.9em;
}


p  {
    padding:5px; }

ul  {
    list-style: none; }

ul li  {
    padding-left: 0px; }

ol  {
    margin-top: 5px;
    margin-bottom: 5px; }

ol li  {
    margin-left: 15px; }

th  {
    padding: 4px;
    font-weight: bold;
    text-align: left; }

fieldset  {
    border: none; }

fieldset a  {
    font-weight: bold; }


a img  {
    border: none; }

td, div  {
    font-size: 1em; }



/* FORM
--------------------------------------------------------- */
form  {
    margin: 0;
    padding: 0; }

input, select  {
    font: 12px/normal Arial, sans-serif; }

select, .inputbox  {
    padding: 2px; }

.inputbox_sm {
    border: 1px #C9C7C7 solid;
    font-family:Arial, Helvetica, sans-serif;
    padding-left: 2px;
    margin-right:27px;
    margin-top:4px;
    font-size:12px; }
    
.inputbox_sm2 {
    border: 1px #C9C7C7 solid;
    font-family:Arial, Helvetica, sans-serif;
    padding-left: 2px;
    margin-right:27px;
    margin-top:5px;
    font-size:12px; }

textarea  {
    font-family:Arial;
    font-size:13px;
    padding-left: 2px; }

.inputbox  {
    margin-top:3px;
    border: 1px solid #C9C7C7;

    color:#000000; }

#search_searchword {
    width:180px; }

.inputbox:hover, .inputbox:focus  {
    border: 1px solid #606060; }

/* JOOMLA STYLE
--------------------------------------------------------- */
table.blog  {

}

table.blog .article_seperator  {
    display: block;
    height: 20px; }


table.contentpane  {
    border-collapse:collapse;
    border-spacing:0px;
    margin:0px;
    padding:0px;
 }

table.contentpaneopen, table.contentpane, table.blog {
    width:100% }

table.contentpaneopen  {
    border: none; }

table.contenttoc  {
    margin: 0 0 10px 10px;
    padding: 0;
    width: 35%; }

table.contenttoc a  {
    text-decoration: none; }

table.contenttoc td  {
    padding: 1px 5px 1px 25px; }

table.contenttoc th  {
    padding: 4px;
    background: #2F2F2F;
    color: #FFFFFF;
    text-indent: 5px;
    border: 1px solid #3F3F3F; }

table.poll  {
    padding: 0;
    width: 100%;
    border-collapse: collapse; }

table.pollstableborder  {
    padding: 0;
    width: 100%;
    border: none;
    text-align: left; }

table.pollstableborder img  {
    vertical-align: baseline; }

table.pollstableborder td  {
    padding: 2px!important; }

table.searchintro  {
    padding: 10px 0;
    width: 80%; }

table.searchintro td  {
    padding: 5px!important; }

 /*Control the Frontend Editor area width*/
table.adminform  {
    width: 400px!important; }

.adminform .inputbox  {
}

.blog_more  {
    margin: 10px 0; }

.blog_more strong  {
    margin: 0 0 5px;
    padding-left: 13px;
    display: block;
    color: #606060;
    text-transform: uppercase; }

td.buttonheading  {
    padding: 0 0 0 3px!important; }

.category  {
    font-weight: bold; }

.clr  {
    clear: both; }

.componentheading  {
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1.3em;
    line-height: normal;
    font-weight: bold; }

.contentdescription  {

    padding-bottom: 30px; }

table.blog .contentheading  {
    font-size: 15px;
    font-weight:bold;
    font-family:Arial,Helvetica,sans-serif;
    color:#fc241b;
    line-height: normal; }

.contentheading  {
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: normal; }

a.contentpagetitle  {
    text-decoration: none!important;
    color: #FFFFFF; }

a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus  {
    text-decoration: none!important;
    color: #FFFFFF; }

table.contentpaneopen td, table.contentpane td  {

}

.createdate  {
    padding-bottom:5px;
    line-height: 10px;
    font-weight: bold; }

.modifydate  {
    color: #7E7E7E;
    height: 15px; }

.moduletable  {
    padding: 0; }

.mosimage  {
    padding: 0;
    border:1px solid #CCCCCC;
    margin:6px;    }

.mosimage img  {
    padding: 0;
    margin: 0!important; }

    
.mosimage_caption {
    background:#EFEFEF none repeat scroll 0%;
    border-top:1px solid #CCCCCC;
    color:#666666;
    font-size:10px;
    margin-top:2px;
    padding:1px 2px;}

.pagenav,
.pagenav_prev,
.pagenav_next,
.pagenavbar  {
    padding: 0 2px; }

a.pagenav,
.pagenav_prev a,
.pagenav_next a,
.pagenavbar a  {
    text-decoration: none; }

a.pagenav:hover, a.pagenav:active, a.pagenav:focus,
.pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_prev a:focus,
.pagenav_next a:hover, .pagenav_next a:active, .pagenav_next a:focus,
.pagenavbar a:hover, .pagenavbar a:active, .pagenavbar a:focus  {
    text-decoration: none; }

.pagenavbar  {
    padding-left: 14px; }

.pagenavcounter  {
    padding: 8px 14px 0 14px; }

.sectiontableheader  {
    padding: 3px 5px;
    border: 1px solid #222222;
    background: #2F2F2F;
    color: #FFFFFF;
    font-weight: bold; }

tr.sectiontableentry1 td  {
    padding: 5px; }

tr.sectiontableentry2 td  {
    padding: 5px; }

.small  {
}

.smalldark  {
    text-align: left; }

div.syndicate div  {
    text-align: center; }

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td  {
    background: none; }
    
    
a.readon  {
    float: right;
    padding: 5px 36px 8px 19px;
    display: block;
    font-size:12px;
    color:#000000;
    margin-top:13px;
    font-weight: normal;
    background: url(../images/readmore.png) no-repeat top center; 
    text-decoration: none; }

a.readon:hover, a.readon:active, a.readon:focus  {
    color:#999999;    
    text-decoration:none;}
    
.button:hover, .button:focus {
    color:#000000;
    border-color:#5F5F5F;
    cursor:pointer;
    border-style:solid;
    border-width:1px; }

.button {
    background: url(../images/button_back.gif) repeat-x; 
    color:#000000;
    border:none;
    border:1px solid #999999;
    font-size:12px;
    margin-bottom:6px;
    margin-top:8px;
    padding:1px 8px 1px;}




/* MISCELLANOUS
----------------------------------------------------------- */

.back_button {
    height:37px;
    padding-top:26px;}


div.back_button a,
div.back_button a:active  {
    margin: -2px 0;
    display: block;
    padding-left:9px;
    height:37px;
    color:#000000;
    font-size:12px;
    font-weight:bold;
    background: none!important;
    text-decoration: none!important; }
    

div.back_button a:hover,
div.back_button a:active  {
    margin: -2px 0;
    display: block;
    height:37px;
    padding-left:9px;
    color:#999999;
    background: none!important;
    text-decoration: none!important; }

#mod_login_password, #mod_login_username  {
    width: 50%; }

#mod_login_password  { 
    width: 80%; }

#mod_login_username  {
    width: 80%; }

#mod_login_remember  {
    border: none;
    background: none; }


/* Clearfix */
.clearfix:after  {
    clear: both;
    display: block;
    content: ".";
    height: 0;
    visibility: hidden; }

* html > body .clearfix  {
    width: 100%;
    display: block; }

* html .clearfix  {
    height: 1%; }

/* Firefox Scrollbar Hack*/
html  {
    margin-bottom: 1px;
    height: 100%!important;
    height: auto; }
    
    
/* Typography
--------------------------------------------------------- */    

img.solid {
    border:1px solid #999999;
    margin:5px 0pt 2px 2px;
    padding:1px; }
    
img.dashed {
    border:1px #999999 dashed;
    margin:5px 0pt 2px 2px;
    padding:1px; }

    
.introletter {
    color:#000000;
    display:block;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:40px;
    font-style:normal;
    font-weight:normal;
    line-height:30px;
    padding:4px 8px 0pt 0pt; }
    
blockquote {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.3em;
    font-style:italic;
    font-weight:normal;
    line-height:1.5;
    padding:6px 45px; }
    




    
/* Layout
--------------------------------------------------------- */


table {
        margin-left: auto;
        margin-right: auto;
}


#s5_mainbacktop {
    background: url(../images/topback.png) no-repeat;
    width:912px;
    height:75px;    }


    
#s5_mainbackmiddle {
    background: #FFFFFF;
    color:#000000;
    width:888px;
    padding-top:4px;
    padding-left:30px;
    padding-right:12px;
    }
    
* html #s5_mainbackmiddle {
    margin-top:-6px; }
    
#s5_mainbottomback {
    background: url(../images/bottomback.png) no-repeat;
    width:912px;
    height:53px;
    }
    

    
#s5_mainback {
    width:100%;
    clear:both; }
    
    #s5_header {
        margin-bottom:8px;
        clear:both;
        width:100%;}
    
    #s5_leftcolumn{
        float:left;
        margin-right:12px;}
    
    #s5_maincolumn{
        width:auto;}
        
        #s5_mainbody {
            width:93%; }
        
        #s5_positions {
            margin-bottom:12px;
            width:95%; }
        
            #s5_user1_100 {
                margin-bottom:25px;
                width:95%;}
                
            #s5_user2_100 {
                margin-bottom:25px;
                width:95%;}
            
            
            #s5_user1_50 {
                margin-bottom:25px;
                float:left;
                width:49%;}
                
            #s5_user2_50 {
                margin-bottom:25px;
                float:left;
                width:49%;}
                
    #s5_rightcolumn{
        float:right;
        margin-left:12px;}
    
    
#s5_bottomtop {
    padding-top:33px;
    background: url(../images/bottomtop.png) no-repeat;
    width:912px;}
    
    #s5_bottommiddle {    
        background-color:transparent !important;
        background-image:url(../images/s5_opac20.png) !important;
        width:912px; }
        
        
        #s5_bottomwrap {
            color:#000000;
            position:relative; }
            
        #s5_breadcrumbs {
            width:100%;
            margin-bottom: 8px; }
            
        #s5_breadcrumbs a{
            text-decoration:none;}
        
        #s5_breadcrumbs a:hover {
            text-decoration:underline;}
        

        #s5_mainbodybottom {
            margin-top:10px;
            width:95%; }
            
        #s5_mainbodybanner {
            margin-top:10px;
            width:95%; }



            
            
        #s5_user3_25{
            float:left;
            width:22.3%;
            margin:6px;
            border:1px solid #E1E1E1;
            padding:4px; }
            
        #s5_user4_25 {
            float:left;
            width:22.3%;
            margin:6px;
            border:1px solid #E1E1E1;
            padding:4px; }
            
        #s5_user5_25 {
            float:left;
            width:22.3%;
            margin:6px;
            border:1px solid #E1E1E1;
            padding:4px; }
            
        #s5_user6_25 {
            float:left;
            width:22.3%;
            margin:6px;
            border:1px solid #E1E1E1;
            padding:4px; }        

            
            #s5_user3_33{
                float:left;
                width:30.6%;
                margin:6px;
                border:1px solid #E1E1E1;
                padding:4px; }
                
            #s5_user4_33 {
                float:left;
                width:30.6%;
                margin:6px;
                border:1px solid #E1E1E1;
                padding:4px; }
                
            #s5_user5_33 {
                float:left;
                width:30.6%;
                margin:6px;
                border:1px solid #E1E1E1;
                padding:4px; }
                
            #s5_user6_33 {
                float:left;
                width:30.6%;
                margin:6px;
                border:1px solid #E1E1E1;
                padding:4px; }    
                
                
                
                #s5_user3_50{
                    float:left;
                    width:47%;
                    margin:6px;
                    border:1px solid #E1E1E1;
                    padding:4px; }
                    
                #s5_user4_50 {
                    float:left;
                    width:47%;
                    margin:6px;
                    border:1px solid #E1E1E1;
                    padding:4px; }
                    
                #s5_user5_50 {
                    float:left;
                    width:47%;
                    margin:6px;
                    border:1px solid #E1E1E1;
                    padding:4px; }
                    
                #s5_user6_50 {
                    float:left;
                    width:47%;
                    margin:6px;
                    border:1px solid #E1E1E1;
                    padding:4px; }    
                    
                    
                    #s5_user3_100{
                        float:left;
                        width:100%;
                        border:1px solid #E1E1E1; }
                        
                    #s5_user4_100 {
                        float:left;
                        width:100%;
                        border:1px solid #E1E1E1;; }
                        
                    #s5_user5_100 {
                        float:left;
                        width:100%;
                        border:1px solid #E1E1E1; }
                        
                    #s5_user6_100 {
                        float:left;
                        width:100%;
                        border:1px solid #E1E1E1;}





            
        
        #s5_user7_33 {
            float:left;
            width:30%;
            padding:10px; }
            
        #s5_user8_33 {
            float:left;
            width:30%;
            padding:10px;}
        
        #s5_user9_33 {
            float:left;
            width:30%;
            padding:10px;}
            
            #s5_user7_50 {
                float:left;
                width:46%;
                padding:10px; }
                
            #s5_user8_50 {
                float:left;
                width:46%;
                padding:10px;}
            
            #s5_user9_50 {
                float:left;
                width:47%;
                padding:10px;}
                
                
                #s5_user7_100 {
                    float:left;
                    width:888px;
                    padding:10px; }
                    
                #s5_user8_100 {
                    float:left;
                    width:888px;
                    padding:10px;}
                
                #s5_user9_100 {
                    float:left;
                    width:888px;
                    padding:10px;}
            
        
    #s5_bottombottom {
        background: url(../images/bottombottom.png) no-repeat;
        clear:both;
        height:78px;
         }
         
.boxed {
    border: 2px solid #CCCCCC;}
    
.boxed:hover{
    border: 2px solid #666666;}            

    
    
    
body  {
    font-size: 75%;
    color:#FFFFFF;
    margin:0 auto;
    font-family: Arial, Helvetica, sans-serif; }
    
#s5_logo {
    height: 100px;
    width:352px;
    background: url(../images/logo.png) no-repeat top; }
    
#s5_wrapper {
    margin:0pt auto;
    width:900px; }
    
    
#s5_background {
    width:100%;
    min-height:837px;}

    
#s5_logo {
    width:352px;
    height:100px;
    margin: 0 auto;}
    

    #s5_menubarwrap {
        width:916px;
        height:85px;
        clear:both;
        background: url(../images/menu_bar.png) no-repeat top center; }
        
    #s5_menu {
        float:left;}
    
    
    #s5_search {
        float:right;
        font-size:11px;
        height:22px;
        margin-top:5px;
        padding-left:25px;
        padding-top:0px;
        position:relative;
        width:141px;
        background: url(../images/search.jpg) no-repeat;}
        
        #s5_search #mod_search_searchword {
            border:medium none;
            color:#FFFFFF;
            font-size:11px;
            background:none;
            }
        
    #s5_user1 {
        margin: 0 auto;}
        
        
        .button-login {
            cursor:pointer;
            border:none;
            width:73px;
            margin:0px;
            margin-bottom:0px;
            padding-right:21px;
            padding-bottom:5px;
            height:31px;
            background: transparent url(../images/login/login.png) no-repeat;}
            
        .inputbox-login {
            background: transparent url(../images/back.png) no-repeat;}
            
        .more a {
            color:#FFFFFF;
            text-decoration:none;}
        
        .more a:hover{
            text-decoration:underline;}        
                    
#s5_mainbuttons {
    height:22px;
    padding-left:18px;
    width:100% }
    
    #s5_boxbutton {
        cursor:pointer;
        padding-right:14px;
        height:22px;
        float:left;    }
        
        #s5_boxbuttonleft {
            height:22px;
            width:10px;
            background: url(../images/left_box.png) no-repeat;
            float:left;    }
        
        
            
        #s5_boxbuttonmiddle {
            height:22px;
            color:#000000;
            font-size:11px;
            padding-top:3px;
            padding-left:3px;
            padding-right:3px;
            background: url(../images/middle_box.gif) repeat-x;
            float:left;    }
        
        #s5_boxbuttonright {
            width:10px;
            height:22px;
            background: url(../images/right_box.png) no-repeat;
            float:left;    }


        
#s5_rss {
    height:22px;
    cursor:pointer;
    float:left;}
    
#s5_footer {
    height:75px;
    position:relative;
    bottom:0;
    width:900px; }
    
    #s5_footer_inner {
        color:#000000;
        text-align:center;
        font-size:11px;
        padding-top:47px;}
    
        #s5_footer_inner a {
            text-decoration:none;
            color:#000000; }
            
        #s5_footleft {
            float:left; }
        
        #s5_footright {
            float:right; }        
            
#popup_div {
    width:402px;
    color:#000000;
    background: url(../images/s5box.png) no-repeat; }
    
    #popup_div h3, a {
        color:#000000; }
        
    #close_popup_div {
        cursor:pointer;}
        
    #popup_div div.moduletable {
        padding-bottom:17px; }

        
/********************  Module Styles ********************/
        
#s5_leftcolumn div.module div div div table td, #s5_rightcolumn div.module div div div table td {
    padding-left:10px;
    width:auto;
    }
#s5_leftcolumn div.module h3, #s5_rightcolumn div.module h3 {
    font-size:12px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:12px;
    margin-top:0px;    }
    
#s5_leftcolumn div.module, #s5_rightcolumn div.module{
    background:transparent url(../images/wh_br.png) no-repeat scroll right bottom;
    clear:both;
    color:#000000;
    float:left;
    font-size:11px;
    margin-bottom:21px;
    padding:0pt;
    width:100%;
    }
#s5_leftcolumn div.module div, #s5_rightcolumn div.module div {
    background:transparent url(../images/wh_bl.png) no-repeat scroll left bottom;
    padding:0pt;
    }
* html #s5_leftcolumn div.module div, #s5_rightcolumn div.module div {
    width:100%;
    }
#s5_leftcolumn div.module div div, #s5_rightcolumn div.module div div {
    background:transparent url(../images/wh_tr.png) no-repeat scroll right top;
    padding:0pt;
    }
#s5_leftcolumn div.module div div div, #s5_rightcolumn div.module div div div {
    background:transparent url(../images/wh_tl.png) no-repeat scroll left top;
    border-bottom: 1px #CCCCCC solid;
    padding:10px 9px 16px 13px;
    width:auto;
    }
    


#s5_leftcolumn div.module div div div div, #s5_rightcolumn div.module div div div div {
    background:transparent none repeat scroll 0%;
    margin:0pt;
    padding:0pt;
    }
    
#s5_leftcolumn div.module div div div div, #s5_rightcolumn div.module div div div div {
    border:none; }

    
/********************  Module Styles for image menus use module class sufix "-img" ********************/
    
#s5_leftcolumn div.module-img div div div table td, #s5_rightcolumn div.module-img div div div table td {
    padding-left:10px;
    width:auto;
    }
#s5_leftcolumn div.module-img h3, #s5_rightcolumn div.module-img h3 {
    font-size:12px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:12px;
    margin-top:0px;    }
    
#s5_leftcolumn div.module-img, #s5_rightcolumn div.module-img{
    background:transparent url(../images/wh_br.png) no-repeat scroll right bottom;
    clear:both;
    color:#000000;
    float:left;
    font-size:11px;
    margin-bottom:21px;
    padding:0pt;
    width:100%;
    }
#s5_leftcolumn div.module-img div, #s5_rightcolumn div.module-img div {
    background:transparent url(../images/wh_bl.png) no-repeat scroll left bottom;
    padding:0pt;
    }
* html #s5_leftcolumn div.module-img div, #s5_rightcolumn div.module-img div {
    width:100%;
    }
#s5_leftcolumn div.module-img div div, #s5_rightcolumn div.module-img div div {
    background:transparent url(../images/wh_tr.png) no-repeat scroll right top;
    padding:0pt;
    }
#s5_leftcolumn div.module-img div div div, #s5_rightcolumn div.module-img div div div {
    background:transparent url(../images/wh_tl.png) no-repeat scroll left top;
    border-bottom: 1px #CCCCCC solid;
    padding:10px 9px 16px 13px;
    width:auto;
    }
    


#s5_leftcolumn div.module-img div div div div, #s5_rightcolumn div.module-img div div div div {
    background:transparent none repeat scroll 0%;
    margin:0pt;
    padding:0pt;
    }
    
#s5_leftcolumn div.module-img div div div div, #s5_rightcolumn div.module-img div div div div {
    border:none; }



#s5_rightcolumn  div.module-img img {
    margin-left:-12px;
    padding-right:3px;
    float:left;
    margin-top:1px;
    position:absolute;
    vertical-align:bottom;
    }    
    
#s5_leftcolumn  div.module-img img {
    margin-left:-12px;
    padding-right:3px;
    float:left;
    margin-top:1px;
    position:absolute;
    vertical-align:bottom;
    }
/*******************User positions 3,4,5 and 6**********************/    


#s5_user3_25 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user3_25 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}
        
#s5_user4_25 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user4_25 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}
        
    
#s5_user5_25 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user5_25 div.module div {
        margin-top:8px;
        padding-left:2px;
        padding-bottom:4px;        }
        
#s5_user6_25 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user6_25 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}




#s5_user3_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user3_33 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}
        
#s5_user4_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user4_33 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}
        
    
#s5_user5_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user5_33 div.module div {
        margin-top:8px;
        padding-left:2px;
        padding-bottom:4px;        }
        
#s5_user6_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user6_33 div.module div {
        margin-top:8px;    
        padding-left:2px;
        padding-bottom:4px;}
        
        


    #s5_user3_50 div.module h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        line-height:27px;
        margin-top:-7px;    }    
    
        #s5_user3_50 div.module div {
            margin-top:8px;    
            padding-left:2px;
            padding-bottom:4px;}
        
    #s5_user4_50 div.module h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        line-height:27px;
        margin-top:-7px;    }
        
        #s5_user4_50 div.module div {
            margin-top:8px;    
            padding-left:2px;
            padding-bottom:4px;}
            
    
    #s5_user5_50 div.module h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        line-height:27px;
        margin-top:-7px;    }
        
        #s5_user5_50 div.module div {
            margin-top:8px;
            padding-left:2px;
            padding-bottom:4px;        }    
            
            
    #s5_user6_50 div.module h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        line-height:27px;
        margin-top:-7px;    }
    
        #s5_user6_50 div.module div {
            margin-top:8px;    
            padding-left:2px;
            padding-bottom:4px;}

    
        
        
        
        #s5_user3_100 div.module h3{
            font-size:13px;
            font-weight:bold;
            height:24px;
            color:#000000;
            line-height:27px;
            margin-top:-7px;    }
            
                #s5_user3_100 div.module div {
                    margin-top:8px;    
                    padding-left:2px;
                    padding-bottom:4px;}
                
            #s5_user4_100 div.module h3{
                font-size:13px;
                font-weight:bold;
                height:24px;
                color:#000000;
                line-height:27px;
                margin-top:-7px;    }
                
                #s5_user4_100 div.module div {
                    margin-top:8px;    
                    padding-left:2px;
                    padding-bottom:4px;}
                    
            
            #s5_user5_100 div.module h3{
                font-size:13px;
                font-weight:bold;
                height:24px;
                color:#000000;
                line-height:27px;
                margin-top:-7px;    }
                
                #s5_user5_100 div.module div {
                    margin-top:8px;
                    padding-left:2px;
                    padding-bottom:4px;        }    
                    
                    
            #s5_user6_100 div.module h3{
                font-size:13px;
                font-weight:bold;
                height:24px;
                color:#000000;
                line-height:27px;
                margin-top:-7px;    }
            
                #s5_user6_100 div.module div {
                    margin-top:8px;    
                    padding-left:2px;
                    padding-bottom:4px;}


    
    
    
    
    
/*******************User positions 7,8 and 9 **********************/    
    
#s5_user7_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user7_33 div.module div {
        margin-top:8px;    }
        
    #s5_user7_33 div.module-noimg h3{
        font-size:13px;
        position:relative;
        font-weight:bold;
        height:24px;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user7_33 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user7_33 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user7_33 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user8_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user8_33 div.module div {
        margin-top:8px;    }
        
    #s5_user8_33 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:24px;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user8_33 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user8_33 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user8_33 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user9_33 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user9_33 div.module div {
        margin-top:8px;    }
        
    #s5_user9_33 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:24px;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user9_33 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user9_33 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user9_33 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        position:relative;
        font-weight:bold;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
        
        
#s5_user7_50 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user7_50 div.module div {
        margin-top:8px;    }
        
    #s5_user7_50 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        position:relative;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user7_50 div.module-check h3{
        position:relative;
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user7_50 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user7_50 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user8_50 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user8_50 div.module div {
        margin-top:8px;    }
        
    #s5_user8_50 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        position:relative;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user8_50 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user8_50 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user8_50 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user9_50 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user9_50 div.module div {
        margin-top:8px;    }
        
    #s5_user9_50 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        position:relative;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user9_50 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user9_50 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user9_50 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
    
    
    
#s5_user7_100 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user7_100 div.module div {
        margin-top:8px;    }
        
    #s5_user7_100 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        position:relative;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user7_100 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user7_100 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        position:relative;
        height:30px;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user7_100 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user8_100 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user8_100 div.module div {
        margin-top:8px;    }
        
    #s5_user8_100 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        color:#000000;
        position:relative;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user8_100 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user8_100 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user8_100 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
    
#s5_user9_100 div.module h3{
    font-size:13px;
    font-weight:bold;
    height:24px;
    color:#000000;
    line-height:27px;
    margin-top:-7px;    }
    
    #s5_user9_100 div.module div {
        margin-top:8px;    }
        
    #s5_user9_100 div.module-noimg h3{
        font-size:13px;
        font-weight:bold;
        height:24px;
        position:relative;
        color:#000000;
        line-height:10px;
        margin-top:-28px;    }
        
    
    #s5_user9_100 div.module-check h3{
        background:transparent url(../images/check.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
        
    #s5_user9_100 div.module-box h3{
        background:transparent url(../images/box.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:20px;
        margin-top:-35px;
        padding-left:25px; }
    
    #s5_user9_100 div.module-contact h3{
        background:transparent url(../images/contact.gif) no-repeat scroll left top;
        color:#000000;
        font-size:13px;
        font-weight:bold;
        height:30px;
        position:relative;
        line-height:15px;
        margin-top:-33px;
        padding-left:25px; }
/*******************default joomla menu **********************/    


/* Default Joomla! Menu */
a.mainlevel  {
    color:#000000;
    display:block;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    line-height:25px;
    list-style-position:outside;
    list-style-type:none;
    margin-left:-14px;
    padding-left:8px;
    text-decoration:none;}
    


a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus  {
    color:#FFFFFF;
    text-decoration:none;
    background:#4F4F4F;}

a.mainlevel#active_menu  {
    display: block;
    text-decoration: none;    
    display: block; }

a.mainlevel:hover#active_menu  {
    text-decoration: none;    
    display: block; }

a.sublevel  {
    padding: 2px 2px 2px 27px;
    text-decoration: none; }


a.sublevel:active,
a.sublevel:focus  {
    text-decoration: none; }
a.sublevel:hover {
    color:#000000;
    text-decoration: underline; }
    
#active_menu  {
    color:#000000;
    background:#D6D6D6; }
    
a.sublevel#active_menu  {
    background:none;
    text-decoration: underline;}

    
/*******************default joomla menu with images, use "-img" on menu class suffix **********************/    


/* Default Joomla! Menu */
a.mainlevel-img  {
    color:#000000;
    display:block;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    line-height:25px;
    list-style-position:outside;
    list-style-type:none;
    margin-left:15px;
    padding-left:8px;
    text-decoration:none;}
    


a.mainlevel-img:hover,
a.mainlevel-img:active,
a.mainlevel-img:focus  {
    color:#FFFFFF;
    text-decoration:none;
    background:#4F4F4F;}

a.mainlevel-img#active_menu  {
    display: block;
    text-decoration: none;    
    display: block; }

a.mainlevel-img:hover#active_menu  {
    text-decoration: none;    
    display: block; }

a.sublevel-img  {
    padding: 2px 2px 2px 27px;
    text-decoration: none; }


a.sublevel:active,
a.sublevel:focus  {
    text-decoration: none; }
a.sublevel-img:hover {
    color:#000000;
    text-decoration: underline; }
    
#active_menu-img  {
    color:#000000;
    background:#D6D6D6; }
    
a.sublevel-img#active_menu  {
    background:none;
    text-decoration: underline;}

            
            

    
    
    
        
    
/*  Bottom Menu - "footer" module, menu must be "flat list", class suffix "-bottom"  */

ul#mainlevel-bottom {
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    font-style:normal;
    font-weight: normal;
    line-height:10px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none; }
    
ul#mainlevel-bottom li {
    display:block;
    color:#000000;
    float:left;
    margin-right:0px;
    height:12px;
    border-right: 1px #000000 solid;
    overflow:hidden;
    padding-left:0px;
    padding-right:0px; }
    
ul#mainlevel-bottom li a {
    color:#000000;
    display:block;
    padding:1px 4px;
    text-decoration:none; }
    
ul#mainlevel-bottom li a:hover {
    color:#FFFFFF;
    background-color:#000000; }

    
/****************** Typography *********************/


.grey_box {background:#F5F5F5;
    border:1px solid #CDCDCD;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;
    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}

.blue_box {
    background:#C2DCFF;
    border:1px solid #8CBCFC;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;
    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}

.green_box {
    background:#BCEFBE;
    border:1px solid #88B889;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;
    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}

.orange_box {
    background:#FBDFAB;
    border:1px solid #F9C461;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;









    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}

.red_box {
    background:#FAC0C2;
    border:1px solid #FA8A8D;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;
    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}

.dark_box {
    background:#333333;
    border:1px solid #999999;
    color:#ffffff;
    font-size:1.1em;
    font-weight:bold;
    margin:8px auto;
    text-align:left; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:15px 
}


.green_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #FFFFFF;
    background: #88B889;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.red_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #FFFFFF;
    background: #FC5B5F;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.blue_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #FFFFFF;
    background: #8CBCFC;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.orange_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #FFFFFF;
    background: #F9C461;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.grey_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #A09F9F;
    background: #F5F5F5;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.dark_boxed {
    float: left;
    margin-right: 8px;
    padding: 7px;
    display: block;
    color: #FFFFFF;
    background: #333333;
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    font-size:2.2em; 
    font-family:Arial, sans-serif
}

.block_box {
    clear: both;
    padding: 10px 15px;
    position: relative;
}
        
.introletter_dark {
    color:#000000;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

.introletter_orange {
    color:#F4A30B;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

.introletter_green {
    color:#198232;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

.introletter_grey {
    color:#B3B3B3;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

.introletter_red {
    color:#ED3136;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

.introletter_blue {
    color:#2D6FC1;
    display:block;
    float:left;
    font-style:normal;
    font-weight:normal;
    font: 50px/40px Arial, Helvetica, sans-serif;
    padding:4px; 
}

    
blockquote {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.3em;
    font-style:italic;
    font-weight:normal;
    line-height:1.5;
    padding-left:50px; padding-right:45px; padding-top:6px; padding-bottom:6px 
}
 
.code_grey {
    margin: 15px;
    background: #F7F7F7;
    padding: 10px 20px 10px 20px;
    border-top: 2px solid #CCCCCC;
    color: #666666;
    border-bottom: 2px solid #CCCCCC;
    font: 1.3em/1.5 monospace;
}

.code_blue {
    margin: 15px;
    background: #C2DCFF;
        color: #666666;
    padding: 10px 20px 10px 20px;
    border-top: 2px solid #8CBCFC;
    border-bottom: 2px solid #8CBCFC;
    font: 1.3em/1.5 monospace;
}

.code_red {
    margin: 15px;
    background: #FAC0C2;
    padding: 10px 20px 10px 20px;
        color: #666666;
    border-top: 2px solid #FA8A8D;
    border-bottom: 2px solid #FA8A8D;
    font: 1.3em/1.5 monospace;
}

.code_orange {
    margin: 15px;
    background: #FBDFAB;
    padding: 10px 20px 10px 20px;
    border-top: 2px solid #F9C461;
        color: #666666;
    border-bottom: 2px solid #F9C461;
    font: 1.3em/1.5 monospace;
}

.code_green {
    margin: 15px;
    background: #BCEFBE;
    padding: 10px 20px 10px 20px;
        color: #666666;
    border-top: 2px solid #88B889;
    border-bottom: 2px solid #88B889;
    font: 1.3em/1.5 monospace;
}

.code_dark {
    margin: 15px;
    background: #333333;
    padding: 10px 20px 10px 20px;
    border-top: 2px solid #999999;
    border-bottom: 2px solid #999999;
    font: 1.3em/1.5 monospace;
    color: #ffffff;
}

.bold_blue {
    border-bottom: 1px solid #8CBCFC;
    border-top: 1px solid #8CBCFC;
    padding: 1px;
        color: #666666;
    margin-right: 3px;
    background: #C2DCFF;
    font-weight: bold;
}

.bold_red {
    border-bottom: 1px solid #FA8A8D;
    border-top: 1px solid #FA8A8D;
    padding: 1px;
        color: #666666;
    margin-right: 3px;
    background: #FAC0C2;
    font-weight: bold;
}

.bold_grey {
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 1px;
        color: #666666;
    margin-right: 3px;
    background: #F7F7F7;
    font-weight: bold;
}

.bold_green {
    border-bottom: 1px solid #88B889;
    border-top: 1px solid #88B889;
    padding: 1px;
    margin-right: 3px;
        color: #666666;
    background: #BCEFBE;
    font-weight: bold;
}

.bold_orange {
    border-bottom: 1px solid #F9C461;
    border-top: 1px solid #F9C461;
    padding: 1px;
    margin-right: 3px;
        color: #666666;
    background: #FBDFAB;
    font-weight: bold;
}

.bold_dark {
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    padding: 1px;
    margin-right: 3px;
    color: #ffffff;
    background: #333333;
    font-weight: bold;
}


ol.numbered_list li {
margin-left: 15px;
line-height: 160%;
}

ol.numbered_list {
margin-left: 15px;
line-height: 160%;
padding-left: 15px;
}

img.solid {
    border:1px solid #999999;
    margin:5px 0pt 2px 2px;
    padding:1px;
}

img.bold {
    border:5px solid #E4E2E2;
    margin:5px 0pt 2px 2px;
    padding:1px;
}
    
img.dashed {
    border:1px #999999 dashed;
    margin:5px 0pt 2px 2px;
    padding:1px; 
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
Wie heeft er raad voor mij hoe ik dit het beste aan kan passen?

Alvast bedankt voor jullie tijd en aandacht.

Als het niet kan zoals het moet, is het tijd voor een koffiepauze
MartCom is offline Stuur een bericht via Skype™ naar MartCom   Met citaat antwoorden
Oud 3 februari 2009, 20:47   #2
r2gnl
Moderatorteam
Gebruikersgroep Maastricht
 
r2gnl's Avatar
 
Geregistreerd op: 19 september 2008
Locatie: Maastricht, Boschpoort
Leeftijd: 47
Berichten: 874
Bedankjes gegeven: 76
Bedankjes ontvangen: 148
Standaard Re: afbeelding toevoegen aan achtergrond template

Hi,

Eerste vraag gebruik je ook Firefox wel eens? Daar kun je een snapon aan toevoegen als webdeveloper.
Die geeft je de extra functionaliteit om je CSS te bekijken.
Als ik dat doe zie ik verschillende css blokken, waaronder:
Code:
#s5_mainbackmiddle (line 478)
{
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
color: #000000;
width: 888px;
padding-top: 4px;
padding-left: 30px;
padding-right: 12px;
}
Vervang eerst background-image: none; door jouw afbeelding. Dan zie je waar deze geplaatst wordt.
Dan kun je vervolgens gaan kijken of je positionering de gewenste is

Remco

Remco Gerbrands (r2gnl)

ARTOGE | www.artoge.nl | kvk 1408396 |
r2gnl is offline   Met citaat antwoorden
Oud 3 februari 2009, 23:36   #3
MaartenVt
 
MaartenVt's Avatar
 
Geregistreerd op: 29 september 2008
Leeftijd: 49
Berichten: 1.265
Bedankjes gegeven: 71
Bedankjes ontvangen: 160
Standaard Re: afbeelding toevoegen aan achtergrond template

En moet je maar eens kijken wat voor prachtige achtergrond je dan kunt krijgen

Maar zonder gekheid, inderdaad daar zoiest als

PHP Code:
#FFFFFF url(http://www.isopro.nl/imagageg/deachtergrond.jpg) no-repeat scroll center top 
of iets dergelijks invoeren en het is gepiept..

Waarom ik het plaatje erbij doe is om te laten zien wat er ook direct 'duidelijk' wordt.

Het aangepast plaatje met aan de rechterkant wit word zichtbaar zo.

even bij style bij het plaatje "margin-right: 15px; float: left;" zetten en dan kun je dat witte stukje weglaten en ziet het er goed uit.

Als je firefox gebruikt kun je hier firebug downloaden. zo kun je direct in je css file kijken tijden het browsen
Bijgesloten Plaatje(s)
Bestandstype: jpg Isopro.jpg‎ (78,4 KB, 23x gelezen)

Laatst aangepast door MaartenVt : 3 februari 2009 om 23:39.

Maarten

MaartenVt is offline Stuur een bericht via Skype™ naar MaartenVt   Met citaat antwoorden
Oud 6 februari 2009, 02:38   #4
MartCom
 
MartCom's Avatar
 
Geregistreerd op: 12 oktober 2008
Locatie: Leeuwarden
Leeftijd: 47
Berichten: 124
Bedankjes gegeven: 78
Bedankjes ontvangen: 34
Standaard Re: afbeelding toevoegen aan achtergrond template

Ik denk dat ik het snap....

Ik ga er van het weekend even mee bezig, dan zal het resultaat snel genoeg zichtbaar moeten zijn...of niet

Alvast bedankt voor jullie hulp!

Als het niet kan zoals het moet, is het tijd voor een koffiepauze
MartCom is offline Stuur een bericht via Skype™ naar MartCom   Met citaat antwoorden
Oud 8 februari 2009, 17:45   #5
MartCom
 
MartCom's Avatar
 
Geregistreerd op: 12 oktober 2008
Locatie: Leeuwarden
Leeftijd: 47
Berichten: 124
Bedankjes gegeven: 78
Bedankjes ontvangen: 34
Standaard Re: afbeelding toevoegen aan achtergrond template

Inmiddels een kies kwijt, verdoving uitgewerkt, maar toch maar aan de slag gegaan

In FF kom ik nu absoluut in de buurt van hetgeen het zou moeten zijn, maar in IE...yikes!!!!

Iemand nog advies waar ik naar moet kijken?

Als het niet kan zoals het moet, is het tijd voor een koffiepauze
MartCom is offline Stuur een bericht via Skype™ naar MartCom   Met citaat antwoorden
Oud 8 februari 2009, 18:56   #6
MaartenVt
 
MaartenVt's Avatar
 
Geregistreerd op: 29 september 2008
Leeftijd: 49
Berichten: 1.265
Bedankjes gegeven: 71
Bedankjes ontvangen: 160
Standaard Re: afbeelding toevoegen aan achtergrond template

Ik zie helemaal geen achtergrond in ff eigenlijk...

Maarten

MaartenVt is offline Stuur een bericht via Skype™ naar MaartenVt   Met citaat antwoorden
Oud 8 februari 2009, 19:02   #7
sc00zy
 
sc00zy's Avatar
 
Geregistreerd op: 6 oktober 2008
Locatie: Assen
Leeftijd: 36
Berichten: 2.266
Bedankjes gegeven: 68
Bedankjes ontvangen: 291
Standaard Re: afbeelding toevoegen aan achtergrond template

Citaat:
Origineel geplaatst door MaartenVt Bekijk Bericht
Ik zie helemaal geen achtergrond in ff eigenlijk...
De schaduwen links en rechts zijn toegevoegd.

Arjan Menger
http://welldotcom.nl - Joomla! websites, templates, extensies, hosting, cursussen en support
Volg Welldotcom op Twitter - http://twitter.com/welldotcom
Chat live met Welldotcom - http://messenger.providesupport.com/...obl14jwap.html
sc00zy is offline Stuur een bericht via AIM naar sc00zy Stuur een bericht via MSN naar sc00zy Stuur een bericht via Yahoo naar sc00zy Stuur een bericht via Skype™ naar sc00zy   Met citaat antwoorden
Oud 8 februari 2009, 20:04   #8
MartCom
 
MartCom's Avatar
 
Geregistreerd op: 12 oktober 2008
Locatie: Leeuwarden
Leeftijd: 47
Berichten: 124
Bedankjes gegeven: 78
Bedankjes ontvangen: 34
Standaard Re: afbeelding toevoegen aan achtergrond template

Idd, die schaduwen gaat het om.

In FF zien ze er bij mij goed uit, in IE8 niet, in IE7 bij mijn vrouw wel.

Ik ben dus even de weg kwijt....

Als het niet kan zoals het moet, is het tijd voor een koffiepauze
MartCom is offline Stuur een bericht via Skype™ naar MartCom   Met citaat antwoorden
Oud 8 februari 2009, 20:34   #9
MaartenVt
 
MaartenVt's Avatar
 
Geregistreerd op: 29 september 2008
Leeftijd: 49
Berichten: 1.265
Bedankjes gegeven: 71
Bedankjes ontvangen: 160
Standaard Re: afbeelding toevoegen aan achtergrond template

Helaas ik kan je dan niet verder helpen.....geen Internetexplorer op mn computers

Maarten

MaartenVt is offline Stuur een bericht via Skype™ naar MaartenVt   Met citaat antwoorden
Oud 8 februari 2009, 22:36   #10
sc00zy
 
sc00zy's Avatar
 
Geregistreerd op: 6 oktober 2008
Locatie: Assen
Leeftijd: 36
Berichten: 2.266
Bedankjes gegeven: 68
Bedankjes ontvangen: 291
Standaard Re: afbeelding toevoegen aan achtergrond template

Ik zie dat je nog aan het verder stoeien bent, maar de donkere achtergrond zoals je die nu hebt vind ik zelfs veel mooier dan je aanvankelijke plan!

Arjan Menger
http://welldotcom.nl - Joomla! websites, templates, extensies, hosting, cursussen en support
Volg Welldotcom op Twitter - http://twitter.com/welldotcom
Chat live met Welldotcom - http://messenger.providesupport.com/...obl14jwap.html
sc00zy is offline Stuur een bericht via AIM naar sc00zy Stuur een bericht via MSN naar sc00zy Stuur een bericht via Yahoo naar sc00zy Stuur een bericht via Skype™ naar sc00zy   Met citaat antwoorden
Antwoord

Onderwerpopties
Weergavemodus

Berichting Regels
Je mag niet nieuwe onderwerpen maken
Je mag niet reageren op berichten
Je mag niet bijlagen posten
Je mag niet je berichten bewerken

BB code is Aan
Smilies zijn Aan
[IMG] code is Aan
HTML code is Uit

Forumnavigatie


Alle tijden zijn GMT +1. De tijd is nu 08:51.