/* Clear floats above this element */
.clear {
    clear:both;
}

/* Clear floats *after* this element */
.clearafter:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

a {
    text-decoration:none;
} 
a:hover   {
    text-decoration:underline;
} 

.jjImgBig, .jjImgMed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.jjImgBig {
    width: 300px;
}
.jjImgMed {
    width: 200px;
}

@media (min-width: 480px) {
    .jjImgBig {
	width: 400px;
    }
    .jjImgMed {
	width: 300px;
    }
}
@media (min-width: 580px) {
    .jjImgBig {
	width: 400px;
    }
    .jjImgMed {
	width: 400px;
    }
}

.jjImgSmall {
    display: block;
    vertical-align:middle;
    margin: 0px 40px 20px 0px;
    float:right;
    width: 100px;
}

/* Paragraph style for no-javascript warning */
.jsNone {
    border-style:solid;
    border-width:1px;
    margin:10px;
    padding:5px;
    text-align:center;
}

/* Only show these if javascript is enabled. Need to separate out
pages (.jsOnlyPage), which jquery mobile handles, from other elements
(.jsOnly).  */
.jsOnly, .jsOnlyPage {
    display:none;
}

.jjMainTop {
    padding: 0px 100px 0px 0px;
}

.jjSidebar {
    float: right;
    font-size: smaller;
    width: 100px;
    margin: 20px 0px 20px 10px;
    background:#F0F0F0;
}

#facebookLink {
    margin 0px;
    vertical-align: top;
}
#facebookLike {
    border:none;
    overflow:hidden;
    width: 85px;
    height:21px;
}

.jjMainBottom {
}

.jjCaption {
    font-size:smaller;
    text-align:center;
    margin:0;
    padding:0;
}

.jjStepNumber {
    font-size:xx-large;
    font-weight:bolder;
    border-style:solid;
    border-width:3px;
    margin:5px;
    padding:0px 5px;
    float:left;
}

.jjStepTitle {
    font-size:x-large;
    font-weight:bolder;
    width:75%;
    margin:15px 10px;
    float:left;
}

.jjStepHeader {
    font-size:large;
    font-weight:bolder;
}

.jjStepBody {
    clear:both;
}

.jjDisplayUrl, .jjEmailUrl {
    font-size:large;
    font-weight:bolder;
    margin:7px;
}

#jjSlideshowPlay, #jjSlideshowStop, #jjSlideshowPrev,
#jjSlideshowNext, #jjSlideshowFirst, #jjSlideshowLast {
    background-image:url(../images/jj-play-icons-36-black.png);
    background-repeat:no-repeat;
    width:36px;
    height:36px;
    padding:6px;
}
 
#jjSlideshowPlay  { background-position:   6px 4px; }
#jjSlideshowStop  { background-position: -66px 4px; }
#jjSlideshowPrev  { background-position:-138px 4px; }
#jjSlideshowNext  { background-position:-210px 4px; }
#jjSlideshowFirst { background-position:-282px 4px; }
#jjSlideshowLast  { background-position:-354px 4px; }

#jjSlideshowButtons, #jjDeleteButtons, #jjFitButtons, #jjShowButtons, #jjRecalibrateButtons {
    text-align:center;
}

#jjCreateName, #jjCalibrateFile, #jjUploadFile {
    width:95%;
}

/* ---------------------------------------------------------------------- */

body {
    max-width:600px;
}

.ui-mobile-viewport {
    max-width:600px;
    min-height:100%;
    margin:0 auto;
    position:relative;
}

.ui-content {
    background:#F0F0F0;
    padding:0 15px;
}
