/* 
    Document   : global.css
    Created on : 26-May-2009, 09:41:17
    Author     : Jon Park
    Description:
        Global styling for UR's OSRS homepage
*/

/* === Global Tags === */
* { margin: 0; padding: 0; }
html { font-size: 100%; }
body {
	width: 900px;
	margin: 0 auto;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

a { color: #ED2662; text-decoration: underline; }
a:hover,
a.active { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-size: 1.0em; font-weight: normal; }
p { padding: 0 0 10px 0; font-size: 1.2em; }

/* === Main Content === */
div#hdr { width: 100%; padding: 0 0 15px 0; border-bottom: 1px solid #CCC; display: table; }
	div#hdr h1 { width: 164px; height: 164px; background-image: url('../img/iR/h1SiteTitle.gif'); float: left; }
	div#hdr h2 {
		width: 670px;
		height: 65px;
		padding: 25px 17px;

		font-size: 3.5em;
		line-height: 0.9em;
		font-weight: bold;
		color: #FFF;
		text-transform: uppercase;
		letter-spacing: -0.05em;

		background-color: #ED2662;
		display: block;
		float: right;
	}

div#hdr ul { width: 704px; height: 51px; list-style: none; float: right; clear: right; display: block; }
	div#hdr ul li { height: 51px; display: block; float: left; }
		div#hdr ul li a {
			padding: 26px 19px 10px 20px;
			font-size: 1.3em;
			color: #999;
			text-transform: uppercase;
			text-decoration: none;
			background-image: url('../img/bg/hdrUlLi.gif');
			background-position: right;
			background-repeat: no-repeat;
			display: block;
		}
		div#hdr ul li a#linkHome { padding: 26px 21px 10px 21px; }
		div#hdr ul li a#linkVision { padding: 26px 20px 10px 21px; }


		div#hdr ul li a.last { background-image: none; }
		div#hdr ul li a:hover, div#hdr ul li a.active { background-color: #ED2662; background-image: none; color: #FFF; }

div#body { width: 100%; padding: 15px 0; clear: both; }
	div#content { width: 624px; float: left; }
		div#content h3#pageTitle { font-size: 3.0em; color: #666; }
			div#content h3#pageTitle span { color: #ED2662; }
		div#content p { line-height: 1.2em; }
		div#content p.intro { padding: 15px 20px; font-size: 2.6em; line-height: 1.0em; color: #FFF; background-color: #ED2662; }
		div#content p.largeGrey { font-size: 2.0em; color: #999; }
		div#content img { margin: 0 0 20px 0; }
		
		div#content ul#cycleNav { margin: -25px 0 25px 0; list-style: none; text-align: right; float: right; }
			div#content ul#cycleNav li { padding: 0 0 0 5px; display: inline; }
				div#content ul#cycleNav li a { padding: 6px 7px; font-size: 1.4em; font-weight: bold; border: 1px solid #CCC; text-decoration: none; }
				div#content ul#cycleNav li a.active, div#content ul#cycleNav li a:hover { padding: 7px 8px; background-color: #ED2662; color: #FFF; border: none; }
		div#content div#viewport { width: 624px; border-top: 1px solid #CCC; clear: both; overflow: hidden; }
		div#content div#viewport h3 { padding: 0 0 15px 0; font-size: 2.0em; font-weight: bold; color: #ED2662; }

			body#ourVision div#content div#viewport { height: auto; }
			div#content div.pane { width: 624px; padding: 20px 0 0 0; float: left; }
				body#ourVision div#content div.pane h3.pink { padding: 0 0 15px 0; font-size: 1.4em; font-weight: bold; color: #ED2662; }
				body#ourVision div#content div.pane img { margin: 20px auto 10px auto; display: block; }
				body#ourVision div#content div.pane p { padding: 0 0 15px 0; }

				div#content div.pane ul.features { padding: 10px 0 20px 0; list-style: none; }
				div#content div.pane ul.features li {
					padding: 13px 0 13px 32px;
					font-size: 1.3em;
					background-color: #EFEFEF;
					background-image: url('../img/bg/featuresLi.gif');
					background-repeat: no-repeat;
					background-position: 12px 15px;
				}
				div#content div.pane ul.features li.alt { background-color: #FFF; }


	/* Added by Steven Gibbons */
	div#content div.testimonial { position: relative; margin: 10px 0 20px 0; padding: 0 10px; background: #ED2662; -moz-border-radius: 10px; }
	div#content div.testimonial p { margin: -5px 50px 0 50px; padding: 0; color: #FFF; font-size: 1.4em; }
		div#content div.testimonial p.author { margin: 10px 50px 0 50px; font-size: 1.1em; font-weight: bold; }
	div#content div.testimonial span.left { position: relative; top: 20px; left: 15px; display: block; width: 25px; height: 21px; background: url('../img/bg/left-quote.gif') no-repeat; }
	div#content div.testimonial span.right { position: relative; top: -23px; left: 560px; display: block; width: 25px; height: 21px; background: url('../img/bg/right-quote.gif') no-repeat; }
	div#content div.testimonial span.spike { z-index: 340; position: absolute; bottom: -18px; left: 15px; display: block; width: 25px; height: 18px; background: url('../img/bg/spike.gif') no-repeat; }
	
	ul#videoDemos { margin: 0; padding: 0 0 20px 0; list-style: none; }
		ul#videoDemos li { float: left; margin: 24px 24px 0 0; width: 192px; height: 196px; background: #ED2662; }
		ul#videoDemos li.noBorder { margin-right: 0; }			
		ul#videoDemos li p { font-size: 1.6em; color: #FFF; padding: 7px 10px; }
		ul#videoDemos li a { width: 192px; height: 140px; display: block; background: #222; }
			ul#videoDemos li a#video_01 { background: url('../img/bg/video_01.jpg') no-repeat; }
			ul#videoDemos li a#video_02 { background: url('../img/bg/video_02.jpg') no-repeat; }
			ul#videoDemos li a#video_03 { background: url('../img/bg/video_03.jpg') no-repeat; }
			ul#videoDemos li a#video_04 { background: url('../img/bg/video_04.jpg') no-repeat; }
			ul#videoDemos li a#video_05 { background: url('../img/bg/video_05.jpg') no-repeat; }
			ul#videoDemos li a#video_06 { background: url('../img/bg/video_06.jpg') no-repeat; }
	
	div#videos { display: none; }
		div#video { display: block; }
	
	div#sidebar { width: 239px; float: right; }
		div#sidebar .contentBox { margin: 0 0 30px 0; padding: 9px 12px 12px 12px; background: #666 url('../img/bg/contentBox.gif') no-repeat right top; }
		div#sidebar .contentBox h3, div#sidebar .contentBox h4, div#sidebar .contentBox h5 { padding: 0 0 10px 0; font-size: 1.8em; line-height: 1.1em; color: #FFF; }
		div#sidebar .contentBox h3 span, div#sidebar .contentBox h4 span, div#sidebar .contentBox h5 span { color: #ED2662; }
		div#sidebar .contentBox p { color: #FFF; }
		div#sidebar .contentBox img { margin: 0 0 10px 0;}
		div#sidebar .contentBox a {
			padding: 8px 9px;
			color: #FFF;
			font-weight: bold;
			text-decoration: none;
			background: #ED2662 url('../img/bg/contentBoxA.gif') repeat-x top;
			-moz-border-radius: 6px;
			-khtml-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			display: table;
		}
		div#sidebar .contentBox a span { display: none; }
		div#sidebar .contentBox input.text { width: 197px; padding: 2px 5px; background-color: #999; border: 1px solid #999; color: #FFF; font-size: 1.0em; }
		div#sidebar .contentBox form#onlineDemo p.field { padding: 0 0 5px 0; }
		div#sidebar .contentBox form#onlineDemo a {	margin: 5px 0 0 0; }

	div#ftr { width: 900px; padding: 20px 0; border-top: 3px solid #ED2662; }
	div#ftr p.copyright { padding: 0 0 20px 0; }
	
	form#demoRequest table,
	form#contactUs table { margin: 20px 0; }
	form#demoRequest table td,
	form#contactUs table td { padding: 0 0 5px 0; }
	form#demoRequest table td input,
	form#contactUs table td input { width: 197px; padding: 5px 7px; background-color: #DDD; border: 1px solid #DDD; color: #333; font-size: 1.2em; }
	form#demoRequest table td textarea,
	form#contactUs table td textarea { 
			width: 350px; 
			height: 140px; 
			padding: 5px 7px; 
			background-color: #DDD; 
			border: 1px solid #DDD; 
			color: #333; 
			font-size: 1.1em;
			font-family: Verdana, Geneva, sans-serif;
			}
		form#demoRequest table td a,
		form#contactUs table td a {
			margin: 5px 0 0 0;
			padding: 8px 9px;
			color: #FFF;
			font-weight: bold;
			font-size: 1.2em;
			text-decoration: none;
			background: #ED2662 url('../img/bg/contentBoxA.gif') repeat-x top;
			-moz-border-radius: 6px;
			-khtml-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			display: table;
		}
		
		div.testimonial div { display: none; }

/* === IDs & Classes === */
.imgReplace { background-repeat: no-repeat; background-position: top; display: block; }
	.imgReplace span { width: 0; height: 0; overflow: hidden; display: block; }
a.imgReplace:hover { background-position: bottom; }
a.imgReplace.noHover:hover { background-position: top; }

a.btnReplace { visibility: hidden; }

.fLeft { float: left !important; }
.fRight { float: right !important; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/*-------------impromptu---------- */
.jqifade{ position: absolute; background-color: #000000; }
div.jqi{ width: 400px; font-family: Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 1px #eeeeee; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 7px; }
div.jqi .jqicontainer{ font-weight: bold; }
div.jqi .jqiclose{ position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #bbbbbb; font-weight: bold; }
div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; }
div.jqi .jqibuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; }
div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
div.jqi button:hover{ background-color: #728A8C; }
div.jqi button.jqidefaultbutton{ background-color: #ED2662; }
.jqiwarning .jqi .jqibuttons{ background-color: #ED2662; }
/*-------------------------------- */