/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border-style: none;
	border-color: inherit;
	border-width: 0;
	margin: 0 0 32 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* START ATMOSPHERE */
body   
{
    background-color:#999999;
    font-size: 1em;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    color:#333333;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

p {margin:.6em 0}

.hideInMobile {display:none !important;}
.hideAboveMobile {display:inline !important;}

/* ToolTips */
a.tip { margin: 0 .3em; text-decoration: none; font-weight: bold; font-size: .8em; background-color: white; padding: 0 .25em 0 .2em; border: 1px dotted #ccc; border-radius: 3px; text-decoration: none; color: #EA8C00; }

/* Styled lists */
ul.pipeList {font-size:.85em; padding:10px; border-top:1px dotted #666; border-bottom:1px dotted #666; margin:5px 0; text-align:center;}
ul.pipeList li {display:inline-block; margin:0; padding:0 10px; border-right:none; line-height:1.8em;}
ul.pipeList li:last-child {border-right:none;}

/* BODY STUFF */
#MainBody {width:320px; margin:10px auto 15px auto; overflow:hidden;}

/* BANNER */
#banner {overflow:hidden; margin-bottom:15px;}
#banner .panelWrapper {padding:5px;}	
#banner .panelWrapper.logo {display:none; width:40px; text-align:center; float:left; height:48px;}
#banner .panelWrapper.logo img {width:40px; height:50px; display:block; margin:0 auto;}
#banner .panelWrapper.bannerContent {width:308px; overflow:hidden; float:right; background-image:url(../images/GrayWolfLogo-head.jpg); background-size:45px; background-position:top right; background-repeat:no-repeat;}
#banner .panelWrapper.bannerContent img {width:150px; height:18px;}
#banner .panelWrapper .tagline {display:none;}

#banner .topMenu {font-size:.9em; margin-top:.5em; text-align:left;}
#banner .topMenu ul {width:250px; }
#banner .topMenu ul li { float:left; text-align:center; margin:3px 6px 3px 0; }
#banner .topMenu ul li:last-child {margin-right:0;}
#banner .topMenu a:link, #banner .topMenu a:visited {background-color:#fff;display:block; border:1px solid #666; padding:.2em .6em; border-radius:3px;font-size:.8em; color:#385570; text-decoration:none;}
#banner .topMenu a:hover {color:#000;}

/* FOOTER */
#footer {text-align:center; font-size:.8em; color:#000; margin-bottom:25px;}

/* ALERT AREAS ON FORMS */
.alertMsgArea {overflow:hidden; font-weight:bold; background-image:url(../images/warning.jpg); background-position:left top; background-repeat:no-repeat; margin:1em 0; color:#FF0000;}
.alertMsgArea p, .alertMsgArea ul {margin-left:35px; padding-top:0; text-align:left;}

/* CSS BUTTONS */
.cssbutton { text-decoration: none; cursor:pointer; text-align:center; padding:.3em 1em; margin-left:.8em; display:inline-block; *display:block;}
.cssbutton.smaller {font-size:.8em !important; padding:.1em !important; border-radius:3px; line-height:3em;}
.cssbutton.primary {font-size:1em; font-weight:bold; background-color:#DD8500; color:#FFF; border:1px solid #996600; border-radius:3px;}
.cssbutton.primary:hover {background-color:#F99500;}
.cssbutton.primary.on { background-color: #F99500; border-color: #000000; }
.cssbutton.secondary {padding-top:.1em; padding-bottom:.2em; font-size:.9em; font-weight:normal; background-color:#D8D8D8; color:#4D5273; border:1px solid #999;}
.cssbutton.secondary:hover {background-color:#E6E6E6;}

div.buttonrow {text-align:center !important; display:block; margin-top:1em; line-height:1.6em;}
div.buttonrow div.innerButtonRow {display:inline-block; text-align:center;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper {float:left; text-align:center; margin:0 7px;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper p.fieldInstruction {margin:0 !important; padding:0 !important; text-align:center;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper .cssbutton {margin:0 0 .5em 0 !important;}

/* ALL PAGES */
.panelWrapper {padding:10px; text-align:left; background-color:#fff; border:1px solid #333; border-radius:8px; overflow:hidden; }

#mainContent {padding:15px;}
#mainContent.centerContent { background-color:#D9DADB;}

/* Scrolling Viewer */
.scrollingViewer {overflow:auto; border:1px solid #666;}

/* LEFT HAND MENU */
#menuLeft { float:left; width:300px; overflow:hidden; font-size:.9em;}
#menuLeft h1 {color:#FF3300; font-size:1.8em; margin-top:0; margin-bottom:1em;}
#menuLeft .row {margin-bottom:.3em;}
#menuLeft .row select {padding:2px;}
#menuLeft .row label {padding-top:.4em; width:110px; text-align:right; line-height:1em; font-weight:bold; color:#333; margin-right:5px; float:left;}
#menuLeft .submenus {display:none; margin:10px 0; border:1px solid white; border-radius:7px; padding:5px;}
ul.rtUL {white-space: normal;}

#menuLeft .mobileSubMenu label {text-align:left !important; margin-bottom:.3em;}
#menuLeft .mobileSubMenu select {padding:.3em; display:block; clear:both; font-family:"Courier New", Courier, monospace; font-size:1em; color:black; width:270px;}

#menuLeft a:link, #menuLeft a:visited {text-decoration:none;}
#menuLeft a:hover {color:rgb(255, 51, 0);}

/* PAGE DETAILS AREA (RIGHT HAND SIDE) */
#detailsArea {width:270px; float:right; background-color:#FFF; padding:8px; border:1px solid #CCC;}
#detailsArea h1 {color:#333; font-size:1.2em; margin-top:0; margin-bottom:1em;}
#detailsArea p {margin:.45em 0;}


/* ICON BAR */
.iconBar { text-align: left; margin: .3em 0 .3em 0; padding: 3px; background-color: #F9F9F9; }
.iconBar a {text-decoration:none;}
.iconBar a, 
.iconBar input {margin-right:8px;}

#popUpWindowMainWrapper {overflow:hidden; background-color:#fff; padding-bottom:20px; border-bottom:1px solid black;}
#popUpWindowMainWrapper .iconBar {background-color:#fff; text-align:center; margin:0;}

/* LOGIN PAGE */
.loginWrapper {width:320px; margin:100px auto; overflow:hidden;}
.loginWrapper a:link, .loginWrapper a:visited {text-decoration:none;}
.loginWrapper a:hover {text-decoration:underline;}
.loginWrapper hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
.loginWrapper img {display:block; margin:0 auto 25px auto;}
.loginWrapper .loginPanel {float:left; width: 290px; min-height:240px; margin-bottom:10px;}
.loginWrapper .logoPanel {float:left; width: 290px; }
.loginWrapper .logoPanel p {text-align:center; font-size:.85em; color:#333;}
.loginWrapper .row {display:block; overflow:hidden; margin-bottom:10px; clear:both; }
.loginWrapper .row label {padding-top:.3em; width:80px; text-align:right; font-weight:bold; color:#333; margin-right:15px; float:left;}

/* FORMS */
.formStyle1 input[type=text],
.formStyle1 input[type=password], .formStyle1 textarea,
.formStyle1 select {width:90%; font-size:.9em; border:1px solid #666;}

.formStyle1 ul.checkboxes {list-style:none; padding:0; display:block; overflow:hidden; margin:10px 0 10px 10px;}
.formStyle1 ul.checkboxes li {clear:both; display:block; overflow:hidden;}
.formStyle1 ul.checkboxes li input {float:left; display:block; margin:.5em .7em 0 0; }
.formStyle1 ul.checkboxes label {color:#333; width:80%; float:left; overflow:hidden; display:block; text-align:left; font-weight:normal;}

ul.checkboxes.normal li input {float:left; display:block; margin:.3em .3em 0 0;}
ul.checkboxes.normal li label {float:left; display:block; margin:0; line-height:1.4em; text-align:left; font-weight:normal;}

/*.formStyle1 fieldset .buttonrow {padding: 10px 0 10px 205px;}   buttons are inside a fieldset */
.formStyle1 .fieldInstruction { margin-top:.2em; display:block; font-style:italic; font-size:.85em; color:#666; font-family: Arial, Helvetica, sans-serif;}

.formStyle1 label {float:left; width:200px; font-size:.9em; color:#333; display:block; text-align:left; margin-top:3px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
.formStyle1 label b {color:#FF0000; font-weight:bold; font-size:1em;}
.formStyle1 fieldset {border-style: none;
	border-color: inherit;
	border-width: medium;
	position:relative; border-radius: 7px; background-color:#E9EDED; padding:3em 15px 15px 15px; margin-bottom:10px;
	top: 0px;
	left: 0px;
}
.formStyle1 legend {position:absolute; font-weight:bold; top:10px; left:10px; font-size:1.1em; color:#595959; }
.formStyle1 legend b {font-weight:normal; font-size:.85em;}
.formStyle1 .row {display:block; margin-bottom:.5em; text-align:left;}

.formStyle1 .row.standout {text-align:center;  padding: .4em; background-color: #6699FF; border: 1px solid #CCC; border-bottom: 3px solid #CCC; }
.formStyle1 .row.standout label {color:White;}
.formStyle1 .row.standout a.close:link {color:White; font-size:.8em; margin-left:1em; font-weight:bold;}


fieldset.nolegend {padding-top:15px;}

.formStyle1 div.error, div.generalErrorWrapper { margin: 10px 0; padding: 10px; color: #FF0000; display: block; border: 2px solid #FF0000; border-radius: 6px; background: #FFECEC; }
.formStyle1 div.success, div.generalSuccessWrapper { margin: 10px 0; padding: 10px; color: #009900; display: block; border: 2px solid #009933; border-radius: 6px; background-color: #EFF9EE; }

.formStyle1 p.instruction {color:#990000; font-style:italic;}

.formStyle1 input.error, 
.formStyle1 label.error,
.formStyle1 select.error {border-color:#ff0000 !important; background-color:#f1d9d7 !important; border-width:1px; }

/* POPUP WINDOW */
#popUpWindowMainWrapper {margin:0 auto; display:block; text-align:center;}
#popUpWindowMainWrapper .RadChart {margin:0 auto; } /* width does not work on RadChart here */
#popUpWindowMainWrapper .RadChart img {margin:0 auto; width:95%;}
#popUpWindowMainWrapper .topMenu {margin-bottom:.3em;}
#popUpWindowMainWrapper .topMenu select {margin-right:.3em;}

#popUpWindowMainWrapper .formStyle1 fieldset {border-radius:0; padding:3px;}

/* TABLES */
table.simpleChart1 th, 
table.simpleChart1 td  {padding:3px 20px 3px 0; font-size:.8em; text-align:left; vertical-align:top; border-bottom:1px solid #ccc;}
table.simpleChart1 th  {font-weight:bold; }

/* GRAPHS */
.graphAreaWrapper .formStyle1 label {text-align:left;}

/* QUICK LINK PANEL */
.QuickLinkPanel {display:none; font-size:.9em;}
.QuickLinkPanel h2 {padding:.5em 0; font-size: 1em; font-weight: bold; color: #000066; }

/* Projects page */
/*.scrolledBox {overflow-x:scroll; width:220px;} */

/* ================================*/
/*  MEDIA QUERIES */
/* ================================*/
@media screen and (min-width: 500px) {
	#MainBody {width:480px;}
	
	#banner .panelWrapper {padding:10px;}	
	#banner .panelWrapper.logo {display:block; width:80px; height:80px;}
	#banner .panelWrapper.logo img {width:60px; height:80px;}
	#banner .panelWrapper.bannerContent {background-image:none; width:345px;}
	
	#menuLeft {width:450px;}
	#menuLeft .mobileSubMenu select {width:435px;}
	
	#detailsArea {width:430px;}
    #detailsArea .iconBar.hideInMobile {display:block !important;}

    /*.scrolledBox {overflow-x:hidden; width:100%;} */

}

@media screen and (min-width: 750px) {
	.hideInMobile {display:inline !important;}
    .hideAboveMobile {display:none !important}

	#MainBody {width:730px;}
	#detailsArea {width:415px; border:none;}
	
	#banner .panelWrapper.bannerContent {width:600px; height:80px;}
	

	#banner .topMenu a:link, #banner .topMenu a:visited {display:inline; border:none; margin:0;}
	#banner .panelWrapper .tagline {display:block; font-size:.8em;}

	#mainContent.centerContent {background-color:#FFFFFF; background-image:url(../images/bgColumn.gif); background-position:left; background-repeat:repeat-y;}

	#menuLeft { float:left; width:245px; overflow:hidden; min-height:600px; font-size:.9em;}
	#menuLeft .submenus {display:block;}
	#menuLeft .mobileSubMenu {display:none;}
    #menuLeft .row label {text-align:left; line-height:1.6em;}

    .QuickLinkPanel {display:block;}
}

@media screen and (min-width: 910px) {
	#MainBody {width:950px;}
	#detailsArea {width:630px;}
	#detailsArea h1 {font-size:1.6em;}
	#detailsArea .QuickLinkPanel h2 {font-size:1.2em;}
	#banner .panelWrapper.bannerContent {width:810px; height:80px;}
	#banner .topMenu ul li {font-size:1.4em; }

    /* GRAPHS */
    .graphAreaWrapper .formStyle1 label {text-align:right;}

    .formStyle1 input[type=text],
    .formStyle1 input[type=password], .formStyle1 textarea,
    .formStyle1 select {width:60%; padding:4px; font-size:1.1em; border-radius:5px;}
	.formStyle1 select.wider {width:85% !important;}
    .formStyle1 label {text-align:right; margin-top:.45em; margin-right:15px;}
	.formStyle1 .fieldInstruction { margin-left:215px; }
	
	.topMenus.formStyle1 select {width:80%;}
	
}