/*
 * main.css
 * www.trickedouttimeline.com
 *
 * Ben Rickett
 * 16 January 2012
 *
 */



/*
 * Body
 */
body{
    position: relative;
    margin: 0; padding: 10px;
}


/*
 * head
 */
#head{
    position: relative;
    height: 110px; min-width: 995px;
    margin: 0 0 10px; padding: 0;
}
    #head .head_left{
        position: absolute; top: 0; left: 0;
        width: 130px; height: 90px;
        padding: 10px 10px 10px 20px;
        background: red;
        background: #A7DBD8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    }
        #head ul.socMedList{
            list-style: none;
            margin: 0; padding: 0;
        }
            #head ul.socMedList li{
                padding: 0; margin: 5px 0;
                height: 24px;
            }

    #head .head_right{
        position: relative;
        margin: 0 0 0 170px; padding: 10px;
        background: #E0E4CC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

    }
        #head .advert_holder{
            width: 728px; height: 90px;
            padding: 0; margin: 0 auto;
            background: none;
        }


/*
 * main
 */
#main{
    min-width: 955px;
    margin: 10px 0; padding: 20px 20px 40px;
    background: #A7DBD8 url('../img1/BG/timeline_line.png') repeat-y 24px 0;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

    /* top */
    .main_top{
        margin: 0 auto; padding: 5px 0 0 40px;
        background: url('../img1/logo/logo.png') no-repeat 40px 60px;
    }
        .main_top .top_holder{
            height: 360px; min-width: 450px;
            margin: 0 40px 0 460px; padding: 10px 0 0 0;
        }
            .main_top .top_slider{
                position: relative;
                height: 320px; max-width: 800px;
                margin: 0 auto; border: 5px solid #222;
                background: url('../img1/BG/popart.png') repeat;
                -moz-box-shadow:inset 0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.6); box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
            }
            
            .main_top .top_slider .arrow_left{
                position: absolute; top: 130px; left: -30px; cursor: pointer; display: block;  z-index: 100;
                height: 50px; width: 50px;
                background: #F38630 url('../img1/icon/slider_arrow.png') no-repeat 2px 5px;
                -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); box-shadow: 0 0 4px rgba(0,0,0,0.3);
            }.main_top .top_slider .arrow_left:hover{
                background: #FA6900 url('../img1/icon/slider_arrow.png') no-repeat 2px 5px;
            }
            
            .main_top .top_slider .arrow_right{
                position: absolute; top: 130px; right: -30px; cursor: pointer; display: block; z-index: 100;
                height: 50px; width: 50px;
                background: #F38630 url('../img1/icon/slider_arrow.png') no-repeat 4px -55px;
                -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); box-shadow: 0 0 4px rgba(0,0,0,0.3);
            } .main_top .top_slider .arrow_right:hover{
                background: #FA6900 url('../img1/icon/slider_arrow.png') no-repeat 4px -55px;
            }

            .main_top .top_slider .tray_holder{
                position: relative; overflow: hidden;
                width: 100%; height: 100%;
            }
                .main_top .top_slider .tray_holder #slider_caption{
                    position: absolute; top: 0; left: 0; display: inline-block;  z-index: 100;
                    margin: 0; padding: 5px;
                    background: white; border-bottom: 5px solid #222; border-right: 5px solid #222;
                    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3); box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
                    font-family: "ReklameScript-Medium", cursive; color: #222;
                }

                .main_top .top_slider .tray_holder #slider_tray{
                    position: absolute; top: 40px; left: 0px;
                    width: 10000px; height: 200px;
                    margin: 0; padding: 0;
                }
                    .main_top .top_slider .tray_holder #slider_tray li{
                        float: left; display: block; height: 200px; width: 440px;
                    }
                        .main_top .top_slider .tray_holder #slider_tray li img{
                            display: block;
                            margin: 0 auto;
                        }
 

    /* aux_top */
    .aux_top{
        height: 60px;
        margin: 20px auto 0; padding: 0 0 20px 40px;
        background: url('../img1/logo/logo_wide.png') no-repeat 40px 0;
    }
        
        
    /* motto */
    .motto_holder{
        position: relative;
        margin: 0; padding: 30px 40px 5px 80px;
        text-align: center;
    }     
        .motto_holder .motto{
            position: relative;
            margin: 0; padding: 0;
            font-size: 35px; color: #222; text-align: center;
            font-family: "ReklameScript-Medium", cursive;
        } 
            .motto_holder .motto .sm_open{
                position: absolute; top: -30px; left: -70px;
                height: 62px; width: 75px;
                background: url('../img1/graphic/sm.png') no-repeat;
            }
            .motto_holder .motto .sm_close{
                position: absolute; top: -20px; right: -80px;
                height: 62px; width: 75px;
                background: url('../img1/graphic/sm.png') no-repeat 0 -70px;
            }

    /* startButton */
    .startHere_holder{
        padding: 40px 0 10px 40px; 
    }
        .startHere_holder a.startHere{
            display: block;
            height: 280px; width: 180px;
            margin: 0 auto;
            background: url('../img1/graphic/begin_arrow.png') no-repeat 0 0;
        } .startHere_holder a.startHere:hover{
            background: url('../img1/graphic/begin_arrow.png') no-repeat 0 -290px;
        }
        
    
    
    
    /* bubble */
    .bubble{
        position: relative;
        margin: 0; padding: 40px 0;
    }
        .bubble_arrow{
            position: absolute;
            width: 50px; height: 100%;
            background: url('../img1/BG/timeline_circle.png') no-repeat 0 center;
        }

        .bubble_inner{
            position: relative;
            min-height: 80px;
            padding: 15px; margin: 0 0 0 44px;
            background: white;
            -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
        }
            .bubble p, .bubble div, .bubble form{  font-family: "MuseoSlab-500", Verdana, serif;  }

            p.bubble_title{
                margin: 0; padding: 5px 0 0;
                font-size: 25px; color: #222;
            }
            p.bubble_subtitle{
                margin: 0; padding: 0;
                font-size: 14px; color: #999;
            }
            p.bubble_text{
                margin: 20px 0; padding: 0;
                font-size: 14px; color: #222; line-height: 20px;
            }
            ul.bubble_list{
                padding: 0 0 0 70px; margin: 20px 0;
            }
                ul.bubble_list li{
                    margin: 10px 0; padding: 0;
                    font-size: 14px; color: #222; line-height: 20px;
                }
            
            .bubble_platform_s, .bubble_platform_m, .bubble_platform_l,  .bubble_platform_xl{
                margin: 20px auto; padding: 20px;
                background: #E0E4CC;
                -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
            }
            .bubble_platform_s{ width: 550px; }
            .bubble_platform_m{ width: 700px; }
            .bubble_platform_l{ width: 800px; }
            .bubble_platform_xl{ width: 900px; }
                
                /* effect bubble */
                .effect_list{
                    list-style: none;
                    margin: 0; padding: 0;
                }
                    .effect_list li{
                        display: block; float: left;
                        width: 220px;
                        margin: 0 22px; padding: 0;
                    } 
                        .effect_button{
                            display: block; cursor: pointer;
                            width: 200px; height: 70px;
                            margin: 10px 0 6px; padding: 100px 10px 0;
                            background: #F38630; text-decoration: none;
                            -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
                            font-size: 24px; color: white; font-family: "Arial", sans-serif; font-weight: bold; text-decoration: none; text-align: center;
                            background-image: url('../img1/graphic/effect.png'); background-repeat: no-repeat;
                        } 
                        .effect_button:hover{ background-color: #FA6900; }
                        .effect_button:active{  -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); }
                        .effect_button_selected {background-color: #FA6900;-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); box-shadow: inset 0px 1px 2px rgba(0,0,0,.3);}
                        
                        .effect_button_tear{ background-position: 20px 15px; }
                        .effect_button_tear:hover{ background-position: -210px 15px; }
                        .effect_button_2in1{ background-position: -440px 15px; }
                        .effect_button_2in1:hover{ background-position: -670px 15px; }                        
                        .effect_button_zoom{ background-position: -900px 15px; }
                        .effect_button_zoom:hover{ background-position: -1130px 15px; }
                        .effect_button_jigsaw{ background-position: -1360px 15px; }
                        .effect_button_jigsaw:hover{ background-position: -1590px 15px; }

                        a.effect_eg{
                            cursor: pointer; display: block;
                            width: 120px; height: 13px;
                            margin: 0 0 14px 4px; padding: 0 0 0 13px;
                            font-size: 13px; text-decoration: none; color: #555; line-height: 13px; vertical-align: middle;
                            background: url('../img1/icon/example.png') no-repeat 0 0;
                        } a.effect_eg:hover{ color: #333; background: url('../img1/icon/example.png') no-repeat 0 -20px; }
                
                .effect_suggestions{
                    float: left;
                    width: 480px;
                    margin: 10px 22px; padding: 90px 0 0;
                    text-align: center;
                    background: url('../img1/graphic/effect_qm.png') no-repeat center 40px;
                }
                    .effect_suggestions p{
                        margin: 0 0 3px; padding: 0;
                        font-size: 30px; color: #CCBD85;
                    }
                    .effect_suggestions a{
                        cursor: pointer;
                        margin: 0; padding: 0;
                        font-size: 16px; color: #555;
                    } .effect_suggestions a:hover{
                        color: #222;;
                    }


            /* upload bubble */
            .upload_bg{
                background-image: url('../img1/graphic/upload_divider.png');
                background-repeat: no-repeat;
                background-position: center center;
                height: 120px;
            }
                .upload_left{
                    float: left;
                    width: 360px;
                    padding: 0 80px 0 0;
                }
                    .upload_input_wrap{
                        height: 20px;
                        margin: 0 auto; padding: 10px 0 5px;
                        width: 350px;
                    }
                        .upload_input_wrap label{
                            font-size: 16px;
                        }
                    
                    .upload_left .button_s{
                        width: 260px;
                        margin: 12px auto 0;
                    }
                    

                .upload_right{
                    float: left;
                    width: 360px; 
                }
                    .upload_title{
                        height: 20px;
                        margin: 0; padding: 10px 0 5px;
                        font-size: 16px; text-align: center;
                    }
                    
                    .upload_right .button_fb{
                        width: 220px;
                        margin: 12px auto 0;
                    }


                /* editor bubble */
                .editor_left{
                    float: left;
                    width: 450px;
                    margin: 0 30px 0 0;
                }

                .editor_right{
                    float: left;
                    width: 320px;
                }
                    .editor_preview{
                        position: relative;
                        width: 320px; height: 180px; 
                        padding: 0; margin: 0;
                        background: url('../img1/BG/coverPhoto.png') no-repeat 4px 0;
                    }
                        .editor_preview .coverPhoto_wrap{
                            position: absolute; top: 23px; left: 10px;
                        }
                            .editor_preview .coverPhoto_wrap img.coverPhoto{
                                width: 300px; height: 111px;
                            }

                        .editor_preview .profilePhoto_wrap{
                            position: absolute; top: 91px; left: 18px;
                            width: 57px; height: 57px;
                            padding: 2px;
                            background: white url('../img1/BG/profilePhoto.png') no-repeat 1px 2px;
                            -moz-box-shadow: 0 0 2px RGBA(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 2px RGBA(0, 0, 0, 0.2); box-shadow: 0 0 2px RGBA(0, 0, 0, 0.2);
                        }
                            .editor_preview .profilePhoto_wrap img.profilePhoto{
                                width: 57px; height: 57px;
                            }
                            
                        .editor_preview p.name{
                            position: absolute; top: 139px; left: 90px;
                            margin: 0; padding: 0;
                            font-size: 10px; font-weight: bold; font-family: "Lucida Grande", sans-serif;
                        }
                        
            /* like mask */
            .like_mask{
                position: absolute; top: 0; left: 0;
                height: 100%; width: 100%;
                background: url('../img1/BG/mask.png') repeat 0 0;
                -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
            }
                .like_platform{
                    width: 840px;
                    margin: 20px auto; padding: 10px 20px 0;
                    background: url('../img1/BG/fb_frame.png') no-repeat center 60px;
                }
                    p.like_title{
                        height: 50px;
                        margin: 0 auto; padding: 5px 0;
                        font-size: 36px; color: #F38630; text-align: center;
                        font-family: "ReklameScript-Medium", cursive;
                    }

                    .like_frame{
                        width: 450px; height: 100px;
                        margin: 0 auto; padding: 60px 0 0 140px;
                    }
                
                a.like_alt{
                    position: absolute; bottom: 10px; right: 20px;
                    color: #bbb; font-size: 20px; text-decoration: none;
                    font-family: "ReklameScript-Medium", cursive;
                }  a.like_alt:hover{ color: #FA6900;  }
        
        
        /* Advert */
        .bubble .advert_holder{
            width: 728px; height: 90px;
            padding: 0; margin: 0 auto;
        }



/*
 * foot
 */
#foot{
    position: relative;
    min-width: 995px;
    margin: 10px 0 0; padding: 0;
    background: #A7DBD8 url('../img1/graphic/foot_fold.png') no-repeat right bottom;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
    #foot .foot_left{
        float: left;
        width: 140px;
        padding: 20px 20px 20px 20px;
    }

    #foot .foot_right{
        float: left;
        width: 550px;
        padding: 20px;
    }
        
        #foot .foot_head{
            margin: 0; padding: 0;
            border-bottom: 5px solid white;
            color: white; font-size: 15px;  font-family: "MuseoSlab-500Italic", Helvetica, serif; 
        }
        
        #foot a{
            text-decoration: none;
            color: white; font-size: 14px;  font-family: "MuseoSlab-500", Helvetica, serif; 
        } #foot a:hover{ text-decoration: underline; }


        #foot .foot_text{
            margin: 10px 0 5px; padding: 0;
            color: white; font-size: 14px;  font-family: "MuseoSlab-500", Helvetica, serif; 
        }
        
        #foot .foot_linklist{
            list-style: none;
            margin: 10px 0 0 0; padding: 0;
        }




/*
 * popup
 */

.popup_mask{
    position: fixed; top: 0; left: 0;
    height: 100%; width: 100%;
    z-index: 900;
    background: url('../img1/BG/mask.png') repeat 0 0;
}

    .popup{
        position: fixed;
        width: 820px;
        z-index: 901;
        margin: 0; padding: 10px;
        background: #A7DBD8;
        -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;    
    }
        .popup_close{
            cursor: pointer;
            position: absolute; top: -15px; right: -12px;
            width: 40px; height: 40px;
            background: url('../img1/icon/popup_close.png') no-repeat;
        } .popup_close:hover{ background: url('../img1/icon/popup_close.png') no-repeat 0 -50px; }
        
        .popup_inner{
            overflow: auto;
            padding: 20px;
            background: white;
            -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;    
        }
            .popup p, .popup div{  font-family: "MuseoSlab-500", Verdana, serif;  }

            .popup_title{
                margin: 0; padding: 5px 0 0;
                font-size: 25px; color: #333;
            }
            .popup_text{
                margin: 5px 0; padding: 0;
                font-size: 14px; color: #333; line-height: 20px;
            }
            
            .popup_graphic{
                position: relative;
                width: 780px; height: 150px;
                margin: 20px 0 30px;
            }
            .popup_graphic_tear{ background: url('../img1/graphic/help_tear.png') no-repeat center; }
            .popup_graphic_2in1{ background: url('../img1/graphic/help_2in1.png') no-repeat center; }
            .popup_graphic_zoom{ background: url('../img1/graphic/help_zoom.png') no-repeat center; }
            .popup_graphic_jigsaw{ background: url('../img1/graphic/help_jigsaw.png') no-repeat center; }
                        
                .popup_graphic .label{
                    position: absolute;
                    width: 200px;
                    margin: 0; padding: 0;
                    font-size: 14px; color: #333; text-align: center;
                }
                .popup_graphic .label_one{ top: 150px; left: 30px; }
                .popup_graphic .label_two{ top: 150px; left: 290px; }
                .popup_graphic .label_three{ top: 150px; left: 550px; }






/*
 * button
 */
 
/* standard */
.button_s{
    width: 200px;
    margin: 10px; padding: 13px 20px;
    font-size: 20px;
}

.button_m{
    width: 260px;
    margin: 0 auto; padding: 12px 20px;
    font-size: 30px;
}
 
.button_l{
    width: 400px;
    margin: 0 auto; padding: 20px 20px;
    font-size: 36px;
}

.button_xl{
    width: 500px;
    margin: 0 auto; padding: 30px 10px;
    font-size: 55px;
    text-shadow: 1px 1px 0 #FA6900, 2px 2px 0 #FA6900, 3px 3px 0 #FA6900, 4px 4px 0 #FA6900, 5px 5px 0 #FA6900;
}
 
.button_s, .button_m, .button_l, .button_xl{
    display: block;
    cursor: pointer;
    color: white; font-family: "Arial", sans-serif; font-weight: bold; text-decoration: none; text-align: center;
    background: #F38630; border: none;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
} 
.button_s:hover, .button_s:focus, .button_m:hover, .button_m:focus, .button_l:hover, .button_l:focus, .button_xl:hover, .button_xl:focus{ background: #FA6900; }       
.button_s:active, .button_m:active, .button_l:active, .button_xl:active{ -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); box-shadow: inset 0px 1px 2px rgba(0,0,0,.3); }       



/* facebook */
.button_fb{
    display: block; cursor: pointer;
    margin: 10px; padding: 13px 20px;
    font-size: 20px;
    background: #2D53A2 url('../img1/icon/fb_logo.png') no-repeat 15px bottom;
    cursor: pointer;
    color: white; font-family: "Arial", sans-serif; font-weight: bold; text-decoration: none; text-align: center;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.button_fb:hover, .button_fb:focus{ background: #1D4392 url('../img1/icon/fb_logo.png') no-repeat 15px bottom; }
.button_fb:active{ -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.9); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.9); box-shadow: inset 0px 1px 2px rgba(0,0,0,.9); }       







/*
 * loading bar
 */
 
.loader_platform{
    margin: 20px auto; padding: 80px 20px;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

@-webkit-keyframes bg-anim {
	from {background-position: 0 0}
	to {background-position: -40px 0}
}
@-moz-keyframes bg-anim {
	from {background-position: 0 0}
	to {background-position: -40px 0}
}
@-ms-keyframes bg-anim {
	from {background-position: 0 0}
	to {background-position: -40px 0}
}
@keyframes bg-anim {
	from {background-position: 0 0}
	to {background-position: -40px 0}
}

.loader_wrap{
	width: 300px; height: 20px;
    margin: 0 auto; padding: 0;
	-webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
	-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
	box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
	background: -webkit-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176));
	background: -moz-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176));
	background: -ms-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176));
	background: -o-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176));
	background: linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176));
	-webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;
}

    .loader_wrap .loader{
        height: 18px;
        border: solid 1px #eee;
        -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;
        /*-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2);
        */
        background-image: -webkit-repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 15px,
            rgba(255,255,255,0.2) 15px,
            rgba(255,255,255,0.2) 30px),
            -webkit-linear-gradient(
            -90deg,
            rgb(240,179,123),
            #F38630);
        background-image:
            -moz-repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 15px,
            rgba(255,255,255,0.2) 15px,
            rgba(255,255,255,0.2) 30px),
            -moz-linear-gradient(
            -90deg,
            rgb(240,179,123),
            #F38630);
        background-image:
            -ms-repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 15px,
            rgba(255,255,255,0.2) 15px,
            rgba(255,255,255,0.2) 30px),
            -ms-linear-gradient(
            -90deg,
            rgb(240,179,123),
            #F38630);
        background-image:
            -o-repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 15px,
            rgba(255,255,255,0.2) 15px,
            rgba(255,255,255,0.2) 30px),
            -o-linear-gradient(
            -90deg,
            rgb(240,179,123),
            #F38630);
        background-image:
            repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 15px,
            rgba(255,255,255,0.2) 15px,
            rgba(255,255,255,0.2) 30px),
            linear-gradient(
            -90deg,
            rgb(240,179,123),
            #F38630);
        width: 100%;
        -webkit-animation: bg-anim 1s linear infinite;
        -moz-animation: bg-anim 1s linear infinite;
        -ms-animation: bg-anim 1s linear infinite;
        animation: bg-anim 1s linear infinite;
    }