/* ZEROING */
body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
.clear {clear: both; }
.null {display: none; }
.hidden {position: absolute; top: -9999px; height: 0; overflow: hidden; width: 0;}
strong { font-weight: bold; }
em {font-style: italic; }
sup { font-size: .6em; vertical-align: 0; position: relative; bottom: 1ex; }

/* STRUCTURE */
body                              { background: #F5F5F5 url('../images/bg_gradient.jpg') repeat-x; font-family: tahoma, arial, sans-serif; font-size: 74%; color: #3F3D24;}

div#wrapper                 { max-width: 100%; margin-left: auto; margin-right: auto; }
div#shadowRight         { width: 100%; background-image: url('../images/shadow_right.gif'); background-repeat: repeat-y; background-position: top right; background-color: #FFFFFF;}
div#shadowLeft           { width: 100%; background-image: url('../images/shadow_left.gif'); background-repeat: repeat-y; background-position: top left; }
div#canvasRight         { width: 100%; background-image: url('../images/canvas_right.jpg'); background-repeat: no-repeat; background-position: top right; }
div#canvasLeft           { width: 100%; background-image: url('../images/canvas_left.jpg'); background-repeat: no-repeat; background-position: top left; }
/* div#canvas                   { background-color: #FFFFFF; margin-left: 30px; margin-right: 30px; border-left: 1px #6D6D6D solid; border-right: 1px #6D6D6D solid; }
*/
div#footerRight         { clear: both; width: 100%; background-image: url('../images/bottom_border.png'); background-repeat: no-repeat; background-position: top center; background-color: #F5F5F5; padding-top:2em;}
div#footerLeft           { width: 100%;  }
div#footerCanvas       { background-color: #F5F5F5; margin-left: 30px; margin-right: 30px;}
div#footerSidebar     { background-position: 48em 0; width: 100%; } 
div#footerTopRight   { width: 100%; background: transparent url('../images/footer_top_right.gif') top right no-repeat; }
div#footerTopLeft     { width: 100%; background: transparent url('../images/footer_top_left.gif') top left no-repeat; padding-top: 18px; padding-bottom: 32px; }

div#content                 { height: 100%; width: 100%; background-color:#F5F5F5;}
div#inner-content {width:68em; margin:auto;overflow:visible;padding-bottom:0px; background: #FFF url('../images/sidebar.gif') 48em top repeat-y;}
div#maincontent         { float: left; height: 100%; width: 48em; padding-bottom:2em; background:#FFF}
div#maincontent .panel { padding: 18px; padding-top:10px;}

div#membership           { float: none; width:16em; margin-left: 48em; height: 100%; padding: 18px 22px 18px 18px; background:transparent; overflow:visible;}

/* GENERAL FORMATTING */
a                                     { color: #006699; text-decoration: underline; }
a:hover, a:focus, a:active { color: #003D59; text-decoration: none; }
p                                    { line-height: 1.5em; margin-top: .5em; }
h1                                  { font-size: 1.75em; color: #00814D; }
h2                                   { font-size: 1.35em; color: #00814D; padding-top: 1em; padding-bottom: .5em;  }
h2.flush                       { padding-top: 0; }
#maincontent h2          { padding-bottom: 0; }

/* FORMS */
div.formElement { font-size: .9em; padding-top: 1em; padding-bottom: .5em; padding-left: 0; float: left; width: 99%; clear: both; }
div.formSubmitButtons { margin-top: 2em; }
input.inputText { font-size: 1.3em; padding: 4px; width: 99%; border: 1px #999 solid;}
input.inputFile { font-size: 1.3em; padding: 4px; width: 99%; border: 1px #999 solid;}
input.inputRange { font-size: 1.3em; padding: 4px; width: 25%; border: 1px #999 solid;}
input.inputSmall { width:65%; margin-right: .5em; }
input.inputTiny { width:2em; margin-right: .5em; }
input.buttonPlain { color: #3F3D24; background-color: #f0f0f0; border: 1px #999 solid; font-size: 1em; padding: 4px; }
input.buttonClear { float: left; clear: left; margin-top: .5em;}
textarea.inputTextarea { font-family: tahoma, arial, sans-serif; line-height: 1.5em; font-size: 1.3em; padding: 4px; width: 99%; border: 1px #999 solid; }
input.inputRadio, input.inputCheckbox { line-height: 1.5em; float: left; clear: left; margin-top: 7px;  }
label.labelRadio span, label.labelCheckbox span { line-height: 1.5em; float: left; padding: 4px 0 0 8px; width: 86%;}
select { font-size: 1.3em; padding: 4px; width: 102%; border: 1px #999 solid; }
select.selectExpiry{ font-size: 1.3em; padding: 4px; width: 30%; border: 1px #999 solid;}
select.selectUpdate { width: 80%; }
div.formLabel { float: left; width: 46%; }
div.formLabel label { float: left; color: #006C41; font-size: 1.3em; width: 99%; padding-top: .5em; }
div.formField { float: left; padding-top: 4px; clear: none; width: 46%; }
div.formField form { float: right; clear: none; padding: 0; margin: 0; }
fieldset { float: left; clear: left; width: 46%; }
fieldset div.formField { width: 99%; }
fieldset.fieldsetInset { padding-left: 20px; margin-top: 0; width: 45%; }
fieldset.fieldsetInset label { width: 99%; margin-top: .75em; font-size: 1.1em; line-height: 1.5em;}
fieldset.fieldsetInset input.inputText { width: 99%; }
fieldset.fieldsetInset select { width: 102%; }
fieldset.fieldsetInset div.formField { width: 90%; }
legend { float: left; margin-bottom: 0; margin-top: 0; color: #006C41; font-size: 1.3em; width: 46%; }
fieldset.fieldsetInset legend { float: left; margin-bottom: 4px; margin-top: 1em; color: #F60; font-size: 1.3em; }
div.formHelp { font-size: .95em; margin-left: 52%; width: 46%; }
div.formHelp p { margin-top: 0; margin-bottom: .3em; }
div.formHelp img { margin-right: 16px; }
div.formHelp li { line-height: 1.5em; }
div.formError { width: 99%; color: #E00; font-size: 1em; padding-bottom: 4px; float: left; padding-top: 1em; }
div.formElement div.formError { width: 46%; padding-left: 46%; padding-top: 0; }
div.formError span { width: 46%; float: left; }
div.formRequired { color: #F60; float: right; padding-top: 1em;  }
span.required { float: left; color: #F60; padding-bottom: .5em; }
input.add { margin-top: 3px; background: #f0f0f0 url('../images/add.gif') 5px 6px no-repeat; padding-left: 16px; }
input.remove{ background: #f0f0f0 url('../images/remove.gif') 6px 7px no-repeat; padding-left: 16px; }
ol.formOptions { float: left; width: 100%; }
ol.formOptions li { float: left; width: 100%; padding-top: .3em; }


div.buttonBackground { background-image: url('../images/button_right.gif'); background-position: right top; width: 100%; background-repeat: no-repeat; height: 41px; }
div.buttonBackground div { background: transparent url('../images/button_left.gif') 0 0 no-repeat; width: 100%; height: 41px;  }
div.buttonBackground input { font-family: verdana, arial, sans-serif; color: #333; padding-left: 8px; background-color: transparent; border: 0; font-size: 1.4em; width: 100%; background-image: url('../images/button_arrow.gif'); background-repeat: no-repeat;  background-position: right 6px; text-align: left; height:41px;}
div.buttonBackground input:hover, div.buttonBackground input:focus , div.buttonBackground input:active  { cursor: pointer; color: #FF6600; background-position: right -66px; }
div#forgottenPassword { text-align: right; width: 95%; }

/* FAUX BUTTONS (LINKS */
div.buttonFauxHighlight { position: relative; background-color: #FF7920; background-image: url('../images/highlight_right.gif'); background-position: right top; width: 100%; background-repeat: no-repeat; height: 41px; }
div.buttonFauxHighlight div { background: transparent url('../images/highlight_left.gif') 0 0 no-repeat; width: 100%; height: 41px; }
div.buttonFauxHighlight a { font-weight: bold; color: #FFF; text-decoration: none; display: block; font-family: verdana, arial, sans-serif; padding-left: 8px; padding-top: 10px; font-size: 1.4em; width: 95%; background-image: url('../images/button_arrow_special.gif'); background-repeat: no-repeat;  background-position: right 6px;text-align: left; height:31px;}
div.buttonFauxHighlight a:hover, div.buttonBackground a:focus , div.buttonBackground a:active  { color: #FFF; text-decoration: underline; background-position: right -66px; }
div.buttonFauxHighlight a.special { z-index: 5; padding-top: 20px; color: #000; font-size: 1em; font-weight: normal; text-align: center; position: absolute; right: -10px; top: -21px;  height: 80px; width: 76px; background: url('../images/special.png') 0 0 no-repeat; display: block; }
div.buttonFauxHighlight a.special:hover, div.buttonFauxHighlight a.special:active, div.buttonFauxHighlight a.special:focus { background-position: 0 0; text-decoration: none; color: #000; }

div.buttonFaux { position: relative; background-color: #CCCCCC; background-image: url('../images/button_right.gif'); background-position: right top; width: 100%; background-repeat: no-repeat; height: 41px; }
div.buttonFaux div { background: transparent url('../images/button_left.gif') 0 0 no-repeat; width: 100%; height: 41px;  }
div.buttonFaux a { color: #333; text-decoration: none; display: block; font-family: verdana, arial, sans-serif; padding-left: 8px; padding-top: 10px; font-size: 1.4em; width: 95%; background-image: url('../images/button_arrow.gif'); background-repeat: no-repeat;  background-position: right 6px;text-align: left; height:31px;}
div.buttonFaux a:hover, div.buttonBackground a:focus , div.buttonBackground a:active  { color: #FF6600; text-decoration: none; background-position: right -66px; }

div.buttonRight { float: right; }
div.buttonRight { width: auto; }
div.buttonRight input.inputSubmit { width: auto; padding-right: 40px; }
div.buttonRight div { width: auto; }


/* HEADER */
div#header                   { width: 100%; height: 106px; position: relative; background: #007546 url('../images/header_tile.jpg') repeat-x; }
div#inner-header			{ width: 67em; min-width:67em; margin:auto; height: 106px; position: relative;}
div#header h1               { float: left; padding: 0; margin: 0; }
div#inner-header ul#tabs     { float: left; position: absolute; left: 192px; bottom: 0; }

div#header ul#tabs li { float: left; margin-right: 4px; height: 2.5em; margin-top: .75em; }
div#header ul#tabs li div { height: 100%; float: left; background: #00623A url('../images/tab_left.gif') top left no-repeat; }
div#header ul#tabs li div div { height: 100%; float: left; background: transparent url('../images/tab_right.gif') top right no-repeat; }
div#header ul#tabs li span.label { font-size: 1.1em; float: left; padding: .5em 1em 0 1em; }
div#header ul#tabs li a { vertical-align: bottom; color: #FFF; text-decoration: none; }
div#header ul#tabs li a:hover,
div#header ul#tabs li a:active,
div#header ul#tabs li a:focus { text-decoration: underline; }

div#header ul#tabs li.on {height: 3.3em; margin-top: 0; }
div#header ul#tabs li.on  div{ background: #FFF url('../images/tab_on_left.gif') top left no-repeat; }
div#header ul#tabs li.on div div { float: left; background: transparent url('../images/tab_on_right.gif') top right no-repeat; }
div#header ul#tabs li.on span.label { color: #00A160; font-size: 1.5em; float: left; padding: .5em 1em 0 1em; }

ul#toolbar {font-weight:bold;color:#FFF;padding-right:10px;padding-top:10px;float:right;}
ul#toolbar li.first {border-right:3px solid #FFF;}
ul#toolbar li {display:inline;}
ul#toolbar a {text-decoration:none;color:#FFF;font-size:1.1em;padding-right:10px;padding-left:5px;}

/* MAIN CONTENT */
div#maincontent .panel {font-size: 1.2em; height: 100%; }
div#maincontent ol#steps {float: left; }
div#maincontent ol#steps li,
div#maincontent ol#steps li img { float: left; }
div#maincontent p.more { background: url('../images/divider.png') center bottom no-repeat;text-align:right; padding-bottom:20px;}
div#maincontent a.more { background-image: url('../images/bullet.gif'); padding-left: 18px; background-repeat: no-repeat; background-position: 0 4px; margin-top:1.5em;}
div#maincontent ul { padding: .5em 0 0 0; }
div#maincontent ul li { clear: left; line-height: 1.3em; background-image: url('../images/bullet_small.gif'); background-repeat: no-repeat; padding: .5em 0 .5em 24px; background-position: .5em 1em; }
div#maincontent ul.ticks li { background-image: url('../images/tick.gif'); background-repeat: no-repeat; padding: .5em 0 .5em 24px; background-position: 0 8px; }

div.screenshot { float: right; margin-left: 1em; text-align: right; width: 200px; }
div.screenshot a { float: left; clear: left; padding-bottom: 2px;  }
div.screenshot a img { padding: 4px; border: 1px #CCC solid; }
div.screenshot a.magnify { float: none; font-size: .8em; padding-left: 16px; margin-right: 6px; background: transparent url('../images/magnify.gif') 0 3px no-repeat; }

/*
div#maincontent ul.examples li { float: left; width: 96px; padding-top: 108px; padding-left: 0; text-align: center; }
div#maincontent ul.examples li.egInternet { background-image: url('../images/eg_internet.gif'); }
div#maincontent ul.examples li.egIntranet { background-image: url('../images/eg_intranet.gif'); }
div#maincontent ul.examples li.egWireframe{ background-image: url('../images/eg_wireframe.gif'); }
div#maincontent ul.examples li.egMobile { background-image: url('../images/eg_phone.gif'); }
div#maincontent ul.examples li.egProduct { background-image: url('../images/eg_product.gif'); }
*/
div#maincontent ul.examples { padding: 0; margin: 0; }
div#maincontent ul.examples li { padding-top: 2em; width: 230px; clear: none; float: left; padding-left: 0; margin-left: 0; background-image: none; text-align: center; }
div#maincontent ul.examples li div.screenshot { float: none; margin-top: .5em;}

div#maincontent ul.columns2 li { float: left; width: 40%; clear: none; font-size: .85em; padding-left: 2em; }

/* MEMBERSHIP AREA */
div.membershipPanel { float: left; padding-bottom: 2em; width: 100%; }
div.promotion { text-align:center; }

div#membership input.text {width: 95%; padding: .2em .3em .2em .3em; font-size: 1.35em; border: 1px #999 solid; }
div#membership form { width: 100%; float: left; }
div#membership form div{ width: 99%; position: relative; float:left; margin-bottom: 1em; }
label.overlabel-apply { position:absolute; font-size: 1.3em; top:.3em; left:.5em; z-index:1; color:#666; }
label.overlabel-apply sup { font-size: .7em; bottom: .5ex;}
span.subtext { font-size: .9em; margin-top: 4px; padding-left: 2px; float: left; font-weight:bold;}

div#membership span.logo { text-align: center; width: 100%; display: block; margin-top: 6px; }
div#membership span.logo img { background-color: #FFF; padding: 6px; border: 1px #CCC solid; text-align: center; }

/* FOOTER */
div#footerCanvas {text-align: center; }
div#footerCanvas ul li { display: inline; padding: 1em; }
div#footerCanvas ul li.on { font-weight: bold; }
div#footerCanvas a { text-decoration: underline; color: #666; }
div#footerCanvas a:hover,
div#footerCanvas a:active,
div#footerCanvas a:focus { text-decoration: none; color: #333; }

/* ERRORS */
div#maincontent ul.errorlist li {background-image:none;padding-left:0px;}

/* Smart 100 */
ul.logos {
	text-align:center;
	background: url('../images/divider.png') center top no-repeat;
}
div#maincontent ul.logos li.logo {
	display:inline;
	background-image:none;
	padding: 0px 2em;
	clear:none;
}
div.sign-up-help {
	clear:left;
}
/* Testimonial */
div.bubble-1 {
	background: url('http://www.loop11.com/media/images/bottom-right-bubble.gif') bottom right no-repeat;
	padding-bottom:19px;
}
div.bubble-2 {
	background: #CDCDCD url('http://www.loop11.com/media/images/top-left-bubble.gif') top left no-repeat;
}
div.bubble-3 {
	background: url('http://www.loop11.com/media/images/bottom-right-curve-bubble.gif') bottom right no-repeat;
}
div.bubble-4 {
	background: url('http://www.loop11.com/media/images/top-right-bubble.gif') top right no-repeat;
}
div.bubble-5 {
	background: url('http://www.loop11.com/media/images/bottom-left-bubble.gif') bottom left no-repeat;
}
q.testimonial {
	display:block;padding:1em;color:#1F1D14;font-style:italic;
}
cite.testimonial {
 	display:block;padding-left:1.5em;font-weight:bold;margin-top:-0.4em;
}

.blog-post {
	width:17.5em;
	float:left;
	padding-left:1em;
}
.blog-post h2 {
	padding-top:5px;	
}
#create-user-test {
	width:30%;float:left;padding-top:1.2em;
}
#create-user-test img {
	display:block;margin:auto;
}
#invite-participants {
	width:30%;padding-left:4%;float:left;padding-top:1.2em;
}
#invite-participants img {
	display:block;
	margin:auto;
}
#analyse-data {
	width:30%;padding-left:4%;float:left;padding-top:1.2em;
}
#analyse-data img {
	display:block;	
	margin:auto;
}
#number-1 {
	background: url('/media/numbers/number-1.gif') no-repeat left 8px;padding-left:42px;padding-top:5px;	
}
#number-2 {
	background: url('/media/numbers/number-2.gif') no-repeat left 13px;padding-left:42px;padding-top:10px;
}
#number-3 {
	background: url('/media/numbers/number-3.gif') no-repeat left 13px;padding-left:42px;padding-top:10px;
}
#number-4 {
	background: url('/media/numbers/number-4.gif') no-repeat left 13px;padding-left:42px;padding-top:10px;
}
#number-5 {
	background: url('/media/numbers/number-5.gif') no-repeat left 13px;padding-left:42px;padding-top:10px;
}
#project-panel {
	background-color:#FFF;
	text-align:center;
	border:1px solid #70C29E;
	border-color:#00814D;
	margin:1em 0em;
}
#project-panel p {
	padding-bottom:1em;font-size:1.5em;
}
#project-button {
	 width:12em;margin:auto;
}
#project-button a {
	background:none;padding-left:2em;
}
#get-started {
	font-size:200%;
	background-color: #70C29E;
	background-color: #00814D;
	color:#FFF;
	padding-top:10px;
}
div.feature-panel {
	height:20em;
	padding:1em 1em 1em 0em;
	width:17.5em;
	overflow:hidden;	
	float:left;
}
div.feature-page h2 {
	clear:both;
}
div.feature-panel h3 {
	font-weight:bold;
	padding-bottom:0.8em;	
}
div#college-panel {
	border:1px solid #ACACAC;
	background-color: #FFFFFF;	
	padding-bottom:13px;
}
div#college-panel h2 {
	text-align:center;
	margin:0px;
	padding:10px 0px 0px;
}
div#college-panel h2 a {
	text-decoration:none;	
	color: #3F3D24;
	background-color: #FFFFFF;
	display:block;
}
div#college-panel a {
	text-decoration:none;
}

div#college-panel #college-free {
	text-decoration:none;	
	color: #3F3D24;
	background: #FFFFFF url('/media/images/gradcap.gif') no-repeat 15px 12px;
	display:block;
	font-size:1.15em;
	padding-top:1em;
	padding-left:85px;
	padding-right:15px;
	height:5em;
}
span#college-find-out {
	display:block;
	height:25px;
	width:70%;
	margin:auto;
	margin-top:-5px;
	text-align:center;
	background: #ACACAC url('/media/images/findout_right.gif') no-repeat top right;
}
span#college-find-out span {
	padding-top:4px;
	height:21px;
	color:#FFFFFF;
	font-size:1.1em;
	display:block;
	background: transparent url('/media/images/findout_left.gif') no-repeat top left;	
}