/* GLOBAL STYLES */
* { margin:0; padding:0; outline: 0; }
html { height: 100%; overflow-y: scroll; }
body { height: 100%; background: #000000; text-align: center; font: 14px Cambria; color: #000000; } 

.clear { clear: both; }
a { color:#ffffff; cursor: pointer; text-decoration: none}
b { color:#ffffff;}
p { margin-bottom: 10px; font: 27px Cambria; margin: 3px; padding: 3px;}
th { padding: 4px;}
ul { margin-left: 30px; font: 24px Cambria;}
li { margin-left: 15px; font: 24px Cambria; font-weight: normal; }
h1 { font: 32px Cambria; font-weight: bold; color: #ffffff;}
h2 { font: 29px Cambria; font-weight: bold; color: #ffffff;}
h3 { font: 26px Cambria; font-weight: bold; color: #ffffff;}
table {font: 27px Cambria; padding: 4px;}
td {padding: 5px;}
hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

.clear {clear: both;}
.hint { font: 19px Cambria; font-weight: bold; color: #ffffff}
.hintOpenAI { font: 19px Cambria; font-weight: bold; color: #10A37F; text-decoration: underline}
.button { border: 2px solid grey; font: 22px Cambria; font-weight: bold; padding: 10px; margin: 10px; color: #ffffff; text-decoration: none; background-color: #434242;  border-radius: 10px}
.buttonNav { border: 2px solid #2b2b2b; font: 22px Cambria; font-weight: bold; padding: 4px; margin: 4px 2px 4px 2px; color: #ffffff; text-decoration: none; background-color: #2b2b2b;  border-radius: 10px}
.button:hover { border: 2px solid white; font: 22px Cambria; font-weight: bold; padding: 10px; margin: 10px; color: #ffffff; text-decoration: none; background-color: #2b2b2b;  border-radius: 10px}
.buttonNav:hover { border: 2px solid white; font: 22px Cambria; font-weight: bold; padding: 4px; margin: 4px 2px 4px 2px; color: #ffffff; text-decoration: none; background-color: #253F51;  border-radius: 10px}
.picture { border: 3px solid; padding: 3px; border-bottom-color: #F48728;  border-right-color: #F48728; border-top-color: #657E3B;  border-left-color: #657E3B;}

/* FORM STYLES */
#formID { }
#formID .fieldset { padding-bottom: 10px; }
#formID .fieldleft { float: left; width: 190px; padding-right: 4px; text-align: left; }
#formID .fieldright { float: left; width: 190px; padding-right: 4px; text-align: left; }
#formID input, #formID textarea, #formID select, #formID file { font: 20pt Cambria; background-color: #2b2b2b; border-radius: 10px; border: 2px ridge red; padding: 10px; margin: 10px; color: #ffffff;}
#formID input[type="radio"], #formID input[type="checkbox"] { background-color: transparent; border: none; }
#formID table td{ padding: 4px 10px 10px 4px; }

#formID1 { }
#formID1 .fieldset { padding-bottom: 10px; }
#formID1 .fieldleft { float: left; width: 190px; padding-right: 4px; text-align: left; }
#formID1 .fieldright { float: left; width: 190px; padding-right: 4px; text-align: left; }
#formID1 input, #formID1 textarea, #formID1 select, #formID1 file { font: 20pt Cambria; background-color: #2b2b2b; border-radius: 10px; border: 2px ridge red; padding: 10px; margin: 10px; color: #ffffff;}
#formID1 input[type="radio"], #formID1 input[type="checkbox"] { background-color: transparent; border: none; }
#formID1 table td{ padding: 4px 10px 10px 4px; }

#contentField table td { padding: 0; }

/* ERROR STYLES */
label.error { display: block; margin-bottom: 6px; font: 18px Cambria; margin-top: 0px; font-weight: bold; color: white}
input.error, select.error { background-color: #ffe1e1; border: 1px solid #ff8787; }
div.error { font: 15px Cambria; color: #ff0000; border: 1px solid gray; padding: 5px; background-color: #ffe8e8; margin-bottom: 15px; }
div.info { font: 15px Cambria; color: #000; border: 1px solid gray; padding: 5px; background-color: #8ac5ff; }

/* SITE STYLES */
#container { width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -101px; }
#container .push { height: 101px; }
#header { height: 41px; font-size: 22px; font-weight: bold; margin: 15px 0 0 20px; color: #fff; text-align: left; }
#header .div1 { float: left; }
#header .div2 { font-family: Cambria, Helvetica, sans-serif; font-size: 12px; color: #FFF; text-align: right; float: right; }
#header .div2 span { font-weight: bold; }
#content {}
#content .warnings {min-height: 40px; padding-top: 10px;}
#footer { font: 15px Cambria; line-height: 18px; background: #fff url(/images/background-footer.jpg) repeat-x top center; height: 101px; text-align: center; color: #636363; }
#footer div { padding-top: 40px; }
#footer a { color: #636363; }

#fields { float: left;}
.fieldsHolder { overflow:visible; padding:5px 10px 8px; position:relative; width:100%; background-color: #000000;}
.fieldsHolder input { width:145px }
.fieldsHolder label { display:inline-block; padding-top:10px; width:150px }

/* MENU STYLES */
#menu {	background-color: #434242; height: 34px; clear: both; padding: 0px 30px; min-width: 800px; text-align: center; }
#menu ul.left { float: left; }
#menu ul.right { float: right; }
#menu .nav { position: relative; margin: 0; padding: 0; }
#menu .nav ul { list-style: none; margin: 0; padding: 0; background: url(/images/transparent.png); }
#menu .nav a { display: block; color: #ffffff; text-decoration: none; padding: 5px; }
#menu .nav .top, .nav li li.sfhover { padding: 10px 15px 9px 17px; font-weight: bold; font-family: Cambria, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-align: center; }
#menu .nav ul li { padding: 2px; }
#menu .nav .selected .top { background: url(/images/selected.png) repeat-x; color: #ffffff; }
#menu .nav .selected:hover a.top, .nav .sfhover a.top { }
#menu .nav .parent { background: url(/images/arrow_right.png) 95% center no-repeat; }
#menu .nav li { float: left; list-style: none; }
#menu .nav li ul { position: absolute; }
#menu .nav li li { clear: both; }
#menu .nav li ul a { color: #ffffff; height: 15px; width: 145px; }
#menu .nav li ul ul { margin: -27px 0 0 157px; }
#menu .nav li li:hover, .nav li li.sfhover { background: #333; color: #000; }

/* LIST STYLES */
.list { border-collapse: collapse; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd; margin-bottom: 10px; }
.list th, .list td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.list thead th { background-color: #EFEFEF; padding: 0px 5px; }
.list thead th a, .list thead th { text-decoration: none; color: #222; font-weight: bold; }
.list thead th.header { cursor: pointer; background-repeat: no-repeat; background-position: center right; } 
.list tbody a { text-decoration: underline; }
.list tbody td { vertical-align: middle; padding: 3px 1px; }
.list tbody tr.odd { background: #fff; }
.list tbody tr.even { background: #f9f9f9; }
.list tbody tr.odd:hover td, .list tbody tr.even:hover td { background-color: #E4EEF7; }
.list td { vertical-align: middle; padding: 3px 1px; }
.list tr.odd:hover td, .list tbody tr.even:hover td { background-color: #E4EEF7; }

.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
.list .center { text-align: center; padding: 7px; }
.list .filter { background-color: #E7EFEF; }

/* DASHBOARD */
.overview { float: left; width: 49%; margin-bottom: 20px; }
.overview table { width: 100%; }
.overview td + td { text-align: right; }
.dashboard-heading { background: #547C96; color: #FFF; border-bottom: 1px solid #8EAEC3; padding: 5px; font-size: 14px; font-weight: bold; }
.dashboard-content { background: #FCFCFC; border: 1px solid #8EAEC3; padding: 10px; min-height: 180px; }
.statistic { float: right; width: 49%; margin-bottom: 20px; }
.range { float: right; color: #FFF; vertical-align: middle; }
.range { padding-top: 1px; padding-right: 1px; }
.range, .range select { font-size: 11px; }
.latest { clear: both; }
.latest tbody td { background: #FFF; }

/* PAGINATION STYLES */
.pagination { margin-bottom: 10px; border-top: 1px solid #eee; background: #F8F8F8; display: inline-block; width: 100%; }
.pagination .links, .pagination .results { padding: 9px; }
.pagination .links { float: left; }
.pagination .links a { border: 1px solid #ccc; padding: 4px 7px; text-decoration: none; color: #000; }
.pagination .links b { border: 1px solid #ccc; padding: 4px 7px; text-decoration: none; color: #000; background: #fff; }
.pagination .results { float: right; }

/* DATE TIME PICKER STYLES */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

/* PAGE STYLES */
#content .content { padding: 20px; }
#content .page { border: 1px solid #ccc; margin: auto; margin-top: 5px; margin-bottom: 10px; width: 100%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: left;}
#content .page h1 { margin: 0; padding: 8px 0 2px 20px; background: #dedede url(/images/background-h1.jpg) repeat-x; height: 30px; border-top-left-radius: 10px; border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; color: #000000; }
#content .buttons { float: right; }
#content .bottombuttons { margin: 0; padding: 8px 0 2px 0; background: #eee url(/images/background-h1.jpg) repeat-x; height: 29px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; color: #000000; text-align: right; }

 #slides {
      display: none
    }

    .container {
      margin: 0 auto
    }

   
	#slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(/images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }
	 .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(/images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: ##333
    }

    #slides a:hover,
    #slides a:active {
      color: ##9e2020
    }

    .navbar {
      overflow: hidden
    }
	
	#timeline {
		width: 800px;
		height: 350px;
		overflow: hidden;
		margin: 80px auto;
		position: relative;
		background: url('/images/dot.gif') left 45px repeat-x;
	}
		#dates {
			width: 800px;
			height: 60px;
			overflow: hidden;
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 50px;
				font-size: 20px;
				text-align: center;
				background: url('/images/biggerdot.png') center bottom no-repeat;
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
				}
				#dates .selected {
			        font-size: 30px;
				}
		
		#issues {
			width: 800px;
			height: 350px;
			overflow: hidden;
		}	
			#issues li {
				width: 800px;
				height: 350px;
				list-style: none;
				float: left;
			}
				#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					float: left;
					margin: 10px 30px 10px 50px;
					background: transparent;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
					zoom: 1;
					-webkit-transition: all 2s ease-in-out;
					-moz-transition: all 2s ease-in-out;
					-o-transition: all 2s ease-in-out;
					-ms-transition: all 2s ease-in-out; 
					transition: all 2s ease-in-out;
					-webkit-transform: scale(0.7,0.7);
					-moz-transform: scale(0.7,0.7);
				    -o-transform: scale(0.7,0.7);
				    -ms-transform: scale(0.7,0.7);
				    transform: scale(0.7,0.7);
				}
				#issues li h1 {
					color: #ffcc00;
					font-size: 40px;
					margin: 20px 0;
				}
				#issues li p {
					font-size: 14px;
					margin-right: 70px;
					font-weight: normal;
					line-height: 22px;
				}
		
		#grad_left,
		#grad_right {
			width: 100px;
			height: 350px;
			position: absolute;
			top: 0;
		}
			#grad_left {
		        left: 0;
		        background: url('/images/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('/images/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				background-position: 0 -76px;
			}
			#next {
				right: 0;
				background-image: url('/images/next.png');
			}
			#prev {
				left: 0;
				background-image: url('/images/prev.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}