/* publication status */
@import 'http://calendar.columbia.edu/sundial/include/css/publicationStatus.css.php';

body {
	margin: 0;
	background: white;
}

/* Uppermost bar, containing "Sundial", "Request Support", etc. */
div#application_header {
	position: relative;
	height: 44px;
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: 
	    url(http://calendar.columbia.edu/sundial/images/sundialChildHeaderMiddle.gif);
}

  div#application_header div {
	position: absolute;
	bottom: 3px;
	right: 149px;
  }
  
  div#application_header_border {
	width: 100%;
	height: 4px;
	background: url(http://calendar.columbia.edu/sundial/images/miniblue.gif);
	font-size: 1px; /* ie */
  }

div#application_footer {
	font-size: 10px;
	margin-top: 2ex;
	border-top: 1px solid black;
	background: url(/sundial/images/sundial_footer.gif)
		    repeat-x white;
	padding: 11px;
	height: 39px;
	clear: both;
}

div#internal_header {
  text-align: right;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* the light blue form buttons */
span.actionButton {
	border: 1px solid black;
	border-right: 1px solid #bbb;

	width: 8.5em;
	
	font-size: 1.08em;
	font-family: Verdana;
	
	margin: auto;
	cursor: pointer;

	display: inline-block;
	display: -moz-inline-box;  /* inline-block doesn't work in fx */

	margin-top: 5px;
}

* html span.actionButton {
	/* IE basically forgets the container exists -- styling it inline is
	   therefore a Bad Thing. */
	display: block;
}

/* preserve appearance */
a span.actionButton { color: black; }
div.controls a:hover { text-decoration: none }

span.actionButton span {
	display: block;
	background: #b4cafb;
	
	text-transform: lowercase;
	text-align: center;

	width: 8.5em;
	
	border-right: 1px solid black;
	border-left: 1px solid #b1b9cc;
	border-bottom: 1px solid #8697bc;
	border-top: 1px solid #f0f9ff;
}

* html span.actionButton span {
	/* ie only -- IE will only apply inline-block to elements that are
	   natively "display: inline", and even then it's ugly. */
	display: inline-block;
	margin-bottom: 6px;
}

* html div#actionList span.actionButton span {
	margin-bottom: 0;
}

div#actionList {
	clear: both;
	float: left;
	width: 160px;
}
div#actionList select {
        width: 155px;
}
div#actionList input#searchText {
        width: 130px
}

div#actionList h3 {
	color: black;
	font-size: 12px;
	border-bottom: 1px solid #999;
}

div#actionList span.actionButton {
	display: block;
}

/******* Instructions pages on forms *******/
div.instructions {
	margin: 1em 0;
}

div.condensed p.extText {
	display: none;
}

div.section p.instructions {
	padding-top: 1em;
}

div.expanded {
	background: url(/sundial/images/instructions.gif)
	            left center no-repeat white;
}

div.expanded {
	padding: 0 30px 8px 42px;
}

div.section div.expanded {
	padding: 0 30px 8px 30px;
}

/* in a backgrounded div, margins and a border look better */
div.open div.expanded {
	margin: 0 1em 1em 1em;
	border: 1px solid #d5d5d5;
	background-position: 11px center;
	padding: 2px 42px 8px 42px;
}

a.more {
	font-weight: bold;
	color: rgb(40, 102, 40);
}

div.expanded a.more {
	color: rgb(152, 40, 40);
}

/******* Opening and closing sections *******/
div.open {
	background: #f5f5f5;
}

/* ie: */ div.closed, div.section.closed {
	background: #ccc;
	padding: 0 0 2px 0;
	margin-left: 10px;
}

div.closed * {
	display: none;
}

div.closed h3,
div.closed a.sectionSwitch,
div.closed a.sectionSwitch span.off {
	display: block;
}

div.section.closed h3, div.closed h3, div.section.open h3, div.open h3 {
	margin-bottom: 0;
}

div.open a.sectionSwitch span.off {
	display: none;
}

a.sectionSwitch {
	display: block;
	clear: both;
	
  	margin: 2px 0 0 5px;
  	padding: 0px 2px;
  	
	width: 15px;
	text-align: center;
  
	color: black;
	background: #ccc;
  
	border: 1px solid #a0a0a0;

	font-weight: bold;
	font-size: 9px;
	text-decoration: none;

	margin-left: 5px;
}

a.sectionSwitch:hover {
	background: #d5d5d5;
}

/******* The styles for priv/ forms happen down here. *******/

h3, div.controls, div.section, p.instructions {
	clear: both;
}

div#content {
   padding: 0 1.5em;
}

h2 {
   border-bottom: 1px solid #ccc;
}

div.section h3 {
  background: rgb(58,108,205) url("http://calendar.columbia.edu/sundial//images/bgHeaderBump.gif") repeat-x;
  color: white;
  margin: 0 0 1em 0;
  padding: 3px 8px;

  line-height: 1em;
  font-size: 10px;
  text-transform: uppercase;
}

div.section h3 a {
  color: rgb(200, 255, 200);
  text-transform: lowercase;
  font-size: 1.1em;
}

div.section {
	margin: 2em 10px 0 10px;
}

/* ensure that padding takes effect with a false-clear element in moz */
div.section:after {
	font-size: 0;
	content: '.';
	clear: both;
	display: block;
	visibility: hidden;
}

/* faux padding */
div.section label, div.section p, div.section a.more, div.section table,
div.section div.functionBar {
	margin-left: 1em;
}

div.controls {
	margin: 1em 0;
	text-align: center;
}

div.controls img { cursor: pointer; }

a.guidelines {
  background: #dfdfdf;
  padding: 0 3px;
  border: 1px solid #cfcfcf;
}

div.section h3 + label,
div.section p.instructions + label {
	border-top: 1px solid rgb(186, 186, 186);
}

/* Labels mark the rows of each section */
div.section label {
	float: left;
	clear: both;
	padding: 4px 0;
	width: 150px;
	padding-left: 10px;
	border-bottom: 1px solid rgb(186, 186, 186);
	margin-right: 10px;
}

div.section table label {
	float: none;
	clear: none;
	padding: 0 2px;
	width: auto;
	margin: auto;
	border: none;
}

input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	border: 1px solid rgb(186, 186, 186);
}

div.section input[type="checkbox"], div.section input[type="radio"] {
	/* see ie6Layout.js for the compatibility version of this */
	border: none;
}

div.section option, div.section input.required:enabled {
	/* moz gets weird with select's background unless you do this */
	background-color: white;
}

/* override that too: */
div.section input.required.invalid:enabled {
	background-color: yellow;
}

input.short {
	width: 13ex;
}

input.short.very {
	width: 4ex;
}

span.data {
  background-color: rgb(233,233,233);
  border: 1px dashed rgb(200,200,200);
  padding: 1px 5px;
}

/* form elements and groups should float together */
div.section input,
div.section select,
div.section textarea,
span.data,
div.together {
	margin: 4px 0;
  float: left;
}

a.flexible {
	font-weight: bold;
	color: rgb(51, 153, 102);
}

/* elements in a grouping div or table shouldn't float */
div.together input,
div.together select,
div.together span.data,
div.together textarea,
div.section table input,
div.section table select,
div.section table span.data,
div.section table textarea {
	float: none;
	margin: 1px;
}

div.section div.together.helpful {
	padding-left: 2em;
}

div.section div.dependent {
	float: left;
	clear: left;
	padding-left: 25px;
	background: url(http://calendar.columbia.edu/sundial/images/ell-bullet.gif) 6px center no-repeat;
}

span.falseButton {
	font-family: Courier New, Courier, fixed;
	background: #c0d0ff;
	color: #000;
	border-color:  #a0cdff rgb(120, 120, 158) rgb(140,140,158) #a0cdff;
	border-style: solid;
	border-width: 1px;
	padding: 0px 1px 0px 1px;
	text-transform: lowercase;
}

/* How required fields should look: */
input.required, select.required {
	padding-left: 15px;
  	background-image: url(http://calendar.columbia.edu/sundial/images/icons/required.gif);
  	background-position: 2px center;
  	background-repeat: no-repeat;
}

div.together.required, textarea.required {
	padding-left: 15px;
	background-image: url(http://calendar.columbia.edu/sundial/images/icons/required.gif);
	background-position: 2px 3px;
	background-repeat: no-repeat;
}

.invalid, .required.invalid, .required.together.invalid,
/* ie: */ div.section input.invalid, div.section div.invalid {
	border: 2px solid red;
	background-color: yellow;
}

/* tables and lists */

div#content table {
	margin-left: 3em;
}

div#content div.section table {
	margin-left: 1em;
	margin-right: 1em;
	clear: both;
}

div#content div.section table table {
	margin: 0;
	clear: none;
}

table.currentList td {
  padding-right: 15px;
  border-bottom: 1px solid #d9d9d9;
}

th.headerCategory {
  border-bottom: 1px solid black;
  font-weight: bold;
  text-align: center;
}

#currentPerms  {
  list-style-type: none;
  padding-left: 5px;
}

select.newChoices {
  margin-right: 7px;
}

.newList {
  margin-top: 5px;
}

#newTypes {
 width: 200px;
}

ul.currentList {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0;
  width: auto;
}

ul.currentList li {
  padding: 0 0 2px;
  margin: 0 0 3px 0;
  border-bottom: 1px solid #d9d9d9;
}

.no {
  background: url(/sundial/images/x.gif)
              center center no-repeat;
}

.yes {
  background: url(/sundial/images/green_check.gif)
              center center no-repeat;
}

table#miniPerms td, table#miniPerms th {
  padding: 5px;
}

table#miniPerms td {
  border-right: 1px solid #aaa;
}

table#miniPerms th {
  text-align: center;
  vertical-align: bottom;
}

table.centered td, table.centered th {
  text-align: center;
}

table.padded td, table.padded th {
	padding: 5px;
}
table.padded td.scrollbar { padding: 0 }
table.padded td.checkboxCont { padding: 0 }

/* function bar */

div.functionBar {
	background-image: url('/sundial/images/functionBar/backgroundLight.gif');
	height: 17px;
	margin: 0 0 0 2px;
	border: 1px solid black;
}

div.functionBar img {
	float: right;
}

/* table ordering */
a.ascending {
	padding-right: 13px;
	background: url('/sundial/images/admin/arrowDown.gif')
		    center right no-repeat;
}

a.descending {
	padding-right: 13px;
	background: url('/sundial/images/admin/arrowUp.gif')
		    center right no-repeat;
}

div.templateCode {
  border: 1px solid black;
  background: #FFEEDD;
  padding: 5px;
}