#main { width:1000px; margin:0 auto; text-align:left;}

#header {height:370px; background:url(/siteimages/header-bg.gif) top left no-repeat; padding:30px 62px 0 62px;}

#content {border-bottom:8px solid #ec6a00; background:#f9f9f9 url(/siteimages/content-tail.gif) bottom repeat-x; margin:0 62px 0 63px;}

#footer { height:68px;}

.col-1, .col-2, .col-3 {float:left;}
.container {width:100%; overflow:hidden;}

/* ============================= page1 ===========================*/

#page1 .col-1 {width:450px;}
#page1 .col-2 {width:250px;}

/* ============================= page2 ===========================*/

#page2 .col-1 {width:450px;}
#page2 .col-2 {width:250px;}

#page2 .col-1 .col-1 {width:240px;}
#page2 .col-1 .col-2 {width:180px;}

/* ============================= page3 ===========================*/

#page3 .col-1 {width:255px;}
#page3 .col-2 {width:445px;}

/* ============================= page4 ===========================*/

#page4 .col-1 {width:450px;}
#page4 .col-2 {width:250px;}

#page4 .col-1 .col-1 {width:207px;}
#page4 .col-1 .col-2 {width:207px;}

/* ============================= page5 ===========================*/

#page5 .col-1 {width:255px;}
#page5 .col-2 {width:445px;}

#page5 .col-2 .col-1 {width:240px;}
#page5 .col-2 .col-2 {width:180px;}

/* ============================= page6 ===========================*/

#page6 .col-1 {width:450px;}
#page6 .col-2 {width:250px;}

#page6 .col-1 .col-1 {width:189px;}
#page6 .col-1 .col-2 {width:192px;}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
    background-image: none;
}


/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}


#slideshow_wrapper { 
    position:relative; 
    background-color:#cccccc; 
    margin-top:40px;
    padding-top:30px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    clear:both;
    width: 750px;
}

#slideshow_wrapper h1 {
    color:#666666;
    font-size:24px;
    text-shadow:#ffffff 0 1px 0;
}

#slideshow_wrapper p {
    color:#666666;
    line-height:19px;
}

#individual_screenshot {
    width:350px;
    float:left;
    margin-left:30px;
}

#individual_screenshot img {
    -webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.9, transparent), to(rgba(0,0,255,0.2)));
}

#screenshot_description {
    width:280px;
    float:right;
    margin-right:30px;
    margin-top:50px;
}

ul#slideshow_carousel {
    list-style-type:none;
}

ul#slideshow_carousel li {
    display:block; 
    width:710px; 
    height:510px; 
    background-image: none;
}

#slideshow_controller {
     z-index:2; 
     margin-bottom:20px;
     width:290px; 
     position:absolute; 
     top:30px; 
     right:45px;
}

#slideshow_controller a {
    display:block; 
    outline:none; 
    text-align:center; 
    font-weight:bold; 
    color:#ffffff; 
    background-color:#666666; 
    width:135px; 
    text-decoration:none; 
    padding:5px 0; 
    background-image:url(/images/dosomething.png);
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-transition:all .2s ease-in-out;
}

#slideshow_controller a.disabled {
    color:#ffffff; 
    opacity:.4; 
    cursor:default; 
    filter:alpha(opacity=40);
}

#slideshow_controller a.disabled:hover {
    background-color:#666666;
}

#slideshow_controller a:hover {
    background-color:#666666;
}

#slideshow_controller a.previous {
    float:left;
}

#slideshow_controller a.next {
    float:right;
}