.ui-footer-fixed { padding-bottom:0px;bottom:0px; }
.ui-header-fixed { padding-top: 0px;top:0px; }
.ui-header .ui-title, .ui-footer .ui-title, .ui-btn-inner * { white-space: normal !important; margin: 0 15%; font-size:18px; }
.ui-footer .ui-title { margin: 0 5%; white-space: normal !important; font-size:18px; }
.ui-content { padding:0px; }
.ui-footer, .ui-header { background-color:#333333; }
a, a:hover, a:link { color:#CCCCCC; }
.photo
{
   display: block;
   margin: 0px auto;
}

dl.informations dt
{
   font-weight: bold;
}

body {
	background-color:#333333;
	color:#999999;
}
.outer_face {
    position: relative;
    width: 200px; /* width of clock */
    height: 200px; /* height of clock */
    border-radius: 200px; /* clock round corner radius */
    background: white;
    box-shadow: inset 0 0 10px gray;
    border: 0 solid gray; /* thickness of outer border */
    }

.outer_face::before, .outer_face::after, .outer_face .marker { /* time markers syle */
    content: "";
    position: absolute;
    width: 8px; /* width of 12-6 and 3-9 markers */
    height: 100%;
    background: black;
    z-index: 0;
    left: 50%;
    margin-left: -4px; /* set this value of 1/2 marker width */
    top: 0
    }
.inner_face .numbers { /* time markers syle */
    content: "";
    position: absolute;
    width: 8px; /* width of 12-6 and 3-9 markers */
    height: 100%;
    z-index: 0;
    left: 50%;
    margin-left: -4px; /* set this value of 1/2 marker width */
    top: 0
}
.outer_face::after, .numbers.threenine {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
    }

.outer_face .marker {
    background: gray;
    width: 6px; /* width of all other markers */
    margin-left: -3px /* set this value of 1/2 marker width */
    }

.outer_face .marker.oneseven, .numbers.oneseven {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
	}

.outer_face .marker.twoeight, .numbers.twoeight {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
    }

.outer_face .marker.fourten, .numbers.fourten {
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
    }

.outer_face .marker.fiveeleven, .numbers.fiveeleven {
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
    }

.inner_face {
    position: relative;
    width: 88%;
    height: 88%;
    background: white;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    z-index: 1000;
    left: 6%; /* set this value of 1/2 width value*/
    top: 6% /* set this value of 1/2 height value*/
    }

.inner_face::before {
    /* clock center circle small */
    content: "";
    width: 18px; /* width of inner circle */
    height: 18px; /* height of inner circle */
    border-radius: 18px;
    margin-left: -9px; /* set this value of 1/2 width value*/
    margin-top: -9px; /* set this value of 1/2 height value*/
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 30px blue;
    }

.inner_face::after {
    content: "QUARTZ";
    position: absolute;
    width: 100%;
    font: normal 0.7em Arial;
    color: gray;
    text-align: center;
    top: 75%;
    }
.inner_face.reverse::after {
	-moz-transform: scaleX(-1);    /* Gecko */
	-o-transform: scaleX(-1);      /* Opera */
	-webkit-transform: scaleX(-1); /* Webkit */
	transform: scaleX(-1);         /* Standard */
	filter: FlipH;                 /* IE 6/7/8 */
}
.hand, .hand.hour {
    position: absolute;
    width: 4px; /* width of hour hand */
    height: 30%; /* height of hour hand */
    top: 20%; /* set top to 50% - height */
    left: 50%;
    margin-left: -2px; /* set this value to 1/2 width */
    background: black;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
    -moz-box-shadow: 0 0 3px gray;
    -webkit-box-shadow: 0 0 3px gray;
    box-shadow: 0 0 3px gray
    }

.hand.minute {
    height: 45%; /* height of min hand */
    top: 5%; /* set top to 50% - height */
    width: 5px; /* width of min hand */
    margin-left: -2.5px; /* set this value to 1/2 width */
    }

.hand.second {
    height: 50%; /* height of sec hand */
    width: 2px; /* width of sec hand */
    margin-left: -1px; /* set this value to 1/2 width */
    top: 0;
    background: red
    }

.numbers.twelvesix::before {
    content: "12";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: black;
    text-align: center;
    }
.numbers.twelvesix::after {
    content: "6";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: black;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }
.numbers.threenine::before {
    content: "3";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: black;
    text-align: center;
    }
.numbers.threenine::after {
    content: "9";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: black;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }

	
.numbers.oneseven::before {
    content: "1";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    }
.numbers.oneseven::after {
    content: "7";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }

.numbers.twoeight::before {
    content: "2";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    }
.numbers.twoeight::after {
    content: "8";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }

.numbers.fourten::before {
    content: "4";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    }
.numbers.fourten::after {
    content: "10";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }

.numbers.fiveeleven::before {
    content: "5";
    width: 40px;
    height: 32px;
	position:absolute;
	top:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    }
.numbers.fiveeleven::after {
    content: "11";
    width: 40px;
    height: 32px;
	position:absolute;
	bottom:2px;
	left:-16px;
    font: normal 2em Arial;
    color: gray;
    text-align: center;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
    }