/* ===========================================
   page layout */

.page{
    /*border: 1px solid green;*/
}

.clear{
    overflow:   hidden;
    width:      100%;
}

.columns{
    overflow:   hidden;
    width:      100%;
    /*border: 1px solid green;*/
}

.columns .divider{
    padding-bottom: 10px;
    border-bottom:  1px solid #cccccc;
    margin-bottom:  20px;
}

/* ===========================================
   split floating columns */

.columns .half1{
    float:          left;
    width:          48%;
    margin-right:   4%;
}

.columns .half2{
    float:          left;
    width:          48%;
}

/* ===========================================
   page type 1 */

.page_s1{
    width:              100%;
    height:             100%;
    background-image:   url("../img/bkg_s1.jpg");
    background-repeat:  repeat-y;
}

.s1c1{
    float:      left;
    width:      600px;
    /*border: 1px solid green;*/
}

.s1c1 .padding{
    padding:        20px;
    padding-top:    12px;
    /*border: 1px solid green;*/
}

/* ===========================================
   page type 2 */

.page_s2{
    width:              100%;
    height:             100%;
    background-image:   url("../img/bkg_s2.jpg");
    background-repeat:  repeat-y;
}

.s2c1{
    float:      left;
    width:      350px;
    /*border: 1px solid green;*/
}

.s2c2{
    float:      left;
    width:      250px;
    overflow:   visible;
    /*border: 1px solid green;*/
}

.s2c1 .padding{
    padding:        20px;
    padding-top:    12px;
}

.s2c2 .padding{
    padding:    12px;
}

/* ===========================================
   page type 3 */

.page_s3{
    width:              100%;
    height:             100%;
    background-image:   url("../img/bkg_s3.jpg");
    background-repeat:  repeat-y;
}

.s3c1{
    float:      left;
    width:      453px;
    /*border: 1px solid green;*/
}

.s3c2{
    float:      left;
    width:      147px;
    /*border: 1px solid green;*/
}

.s3c1 .padding{
    padding:        20px;
    padding-top:    12px;
}

.s3c2 .padding{
    padding:    12px;
}


.page_s4 {
    width:              100%;
    height:             100%;
    background-image:   url("../img/bkg_s4.jpg");
    background-repeat:  repeat-y;
}
/* ===========================================
   vertically center elements with a table */

table.centered{}

table.centered td{
    vertical-align: middle;
}