/*
** Style <input type="file"...>:
** http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
**
** Rounded corners:
** http://bathew.com/playhouse/rounded-corner-form-elements/
** and http://www.mediaevent.de/xhtml/textarea.html
** and http://www.webdevelopersnotes.com/tips/html/html_table_tutorial_rounded_corners.php3
** and http://css-tricks.com/creating-a-nice-textarea/
*/

html, body {
	padding: 0px;
	margin: 0px;
	font-family: Tahoma, sans-serif;
	font-size: 12px;
	overflow: auto;
}

a {
	color: #0000ff;
	outline: none;
}

a:active{
	outline: none;
}

ol {
	margin-top: 20px;
	margin-bottom: 20px;
}
li {
	margin-bottom: 10px;	
}
ul.inner, ol.inner {
    margin-top: 10px;    
}

div#backgroundDiv {
	position:fixed;
	top: 0px;
	width:100%;
	height:100px;
	background-image:url('background.png');
	background-repeat: repeat-x;
	background-color: #ffffff;
}
.CodeMirror-wrapping {
	border: 1px solid black;
}

/*
** Button layout
*/
a.button {
    /* Sliding right image */
    background: transparent url('btn1_right.png') no-repeat scroll top right; 
	height: 20px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	margin-right: 10px;
	float: left;
	/* Change this according to right image height */
	padding-right: 10px;
	text-decoration: none;
	color: #000000;
}
a.button span {
	/* Background left image */ 
	background: transparent url('btn1_left.png') no-repeat; 
	display: block;
	/* Change this according to button height */
	line-height: 20px;
	padding: 0px 0px 0px 12px;
	text-align: center;
} 
a.button:active {
	background: transparent url('btn1_right_click.png') no-repeat scroll top right;
	/* Firefox: Hide dotted outline */
	outline: none;
}
a.button:active span {
	background: transparent url('btn1_left_click.png') no-repeat; 
    /* When pressed the push text down for 1px */
    padding: 1px 0px 0px 12px;
    text-align: center;
}

/*
** Link layout
*/
a.link {
    /* Sliding right image */
    background: transparent url('btn2_right.png') no-repeat scroll top right; 
	height: 20px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	margin-right: 10px;
	/* Change this according to right image height */
	padding-right: 10px;
	text-decoration: none;
	color: #ffffff;
}
a.link span {
	/* Background left image */ 
	background: transparent url('btn2_left.png') no-repeat; 
	display: block;
	/* Change this according to button height */
	line-height: 20px;
	padding: 0px 0px 0px 12px;
	text-align: center;
} 
a.link:active {
	background: transparent url('btn2_right_click.png') no-repeat scroll top right;
	/* Firefox: Hide dotted outline */
	outline: none;
}
a.link:active span {
	background: transparent url('btn2_left_click.png') no-repeat; 
    /* When pressed the push text down for 1px */
    padding: 1px 0px 0px 12px;
    text-align: center;
} 


input.inputTextfield {
	width: 120px;
}

input {
	border: 1px solid black;
}
select {
	border: 1px solid black;
	width: 144px;
}
textarea {
	border: 1px solid black;
}

/* The structures (splitters, etc.) for the textarea and previewer content */
div.projectMainDiv {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 0px;
	height: 456px;	
}

div.projectMainDivFullscreen {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 0px;
	bottom: 40px;	
}

div#projectSplitterLeftDiv {
	position: absolute;
	left: 0px;
	width: 50%;
	height: 100%;
}
div#projectSplitterRightDiv {
	position: absolute;
	right:0px;
	width: 50%;
	height: 100%;
}
div#projectLeftDiv {
	position: absolute;
	left: 0px;
	right: 5px;
	top: 50px;
	bottom: 0px;
}
div#projectRightDiv {
	position: absolute;
	left: 5px;
	right: 0px;
	height: 100%;
}

textarea#prettyLatexEditor {
	position: absolute;
	border: 1px solid black;
	overflow: auto;
	/* Disable resize for safari */
	resize: none;
}

/**
*** Header
**/ 
div#headerDiv {
	position:absolute;
	left:140px;
	top:10px;
	right:0px;
}
a#homeButton {
	position:absolute;
	left:0px;
	top:0px;
	width:80px;
}
a#contactButton {
	position:absolute;
	left:100px;
	top:0px;
	width:80px;
}
a#helpButton {
	position:absolute;
	left:200px;
	top:0px;
	width:80px;
}
a#changeLoginRegisterButton {
	position:absolute;
	left:300px;
	top:0px;
	width:80px;
}
/*
** Login
*/
div#usernameDiv {
	position:absolute;
	left:420px;
	top:2px;
}
strong#usernameTextStrong {
	position:absolute;
	left:490px;
	top:0px;
}
div#passwordDiv {
	position:absolute;
	left:420px;
	top:27px;
}
strong#passwordTextStrong {
	position:absolute;
	left:490px;
	top:25px;
}
a#loginButton {
	position:absolute;
	left:630px;
	top:0px;
}
a#forgotPasswordHref {
	position:absolute;
	left:630px;
	top:27px;
	font-size:10px;
}


/*
** During login until logout
*/
a#projectBtn {
	position:absolute;
	left:300px;
	top:0px;
	width:80px;
	visibility:hidden;
}
a#preferencesBtn {
	position:absolute;
	left:400px;
	top:0px;
	width:80px;
	visibility:hidden;
}
a#logoutBtn {
	position:absolute;
	left:500px;
	top:0px;
	width:80px;
	visibility:hidden;
}

/*
** Templates
*/
.template {
	position: absolute;
	top:30px;
	width:20px;
	height:20px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
div#addImageBtn {
	position:absolute;
	left:0px;
}
div#addTableBtn {
	position:absolute;
	left:21px;
}
div#addItemizeBtn {
	position:absolute;
	left:42px;
}
div#addEnumerateBtn {
	position:absolute;
	left:63px;
}
div#addDescriptionBtn {
	position:absolute;
	left:84px;
}
div#addFootnoteBtn {
	position:absolute;
	left:105px;
}
div#addCiteBtn {
	position:absolute;
	left:126px;
}
div#addCustom1Btn {
	position:absolute;
	left:147px;
}
div#addCustom2Btn {
	position:absolute;
	left:168px;
}
div#addCustom3Btn {
	position:absolute;
	left:189px;
}
div#fullscreenBtn {
	position:absolute;
	right:3px;
}

/*
 * Button section for project: Show/Hide Bibliography, Save Project, Generate PDF, Toggle Fullscreen
 */
div.pnlButtonsDiv {
	position: absolute;
	top: 464px;
	left: 0px;
	right: 0px;
}
div.pnlButtonsDivFullscreen {
	position: absolute;
	bottom: 32px;
	left: 0px;
	right: 4px;
} 

/*
** Edit bibliography
*/
a#editBibBtn {
	position: absolute;
	left:10px;
	width:150px;
}
/*
** Save
*/
a#saveButton {
	position: absolute;
	right:118px;
	width:100px;
}
/*
** Generate
*/
a#generateButton {
	position:absolute;
	right:0px;
	width:100px;
}

/*
** The general style for the headings of the boxes: 'Projects', 'Documents (.tex)', etc.
*/
div.pnlResourcesDiv {
	display: inline;
}
div.pnlResourcesDivFullscreen {
	display: none;
}

.manageHeaderDiv {
	position:absolute;
	top:0px;
	font-weight: bold;
	/*border-left: 1px solid black;
	border-right: 1px solid black;*/
	border-bottom: 1px solid black;
	/*padding-left: 2px;
	padding-right: 2px;*/
}
.manageCreateDiv {
	position:absolute;
	top:26px;
	left:10px;
}
.manageCreateTextStrong {
	position:absolute;
	top:23px;
	left:54px;
}
.manageCreateText {
	width: 240px;
}
.manageSelStrong {
	position:absolute;
	top:48px;
	left:10px;
}
.manageSel {
	width: 286px;
}
.limitHeader {
	position:absolute;
	top:3px;
	left:284px;
	font-size:10px;
	visibility: hidden;
}
.uploadProcess {
	position:absolute;
	top:25px;
	left:204px;
	visibility:hidden;
}

/*
** Handle projects
*/
div#projectDiv {
	position:absolute;
	top:490px;
	left:10px;
	width:390px;
	height:140px;
	border:1px solid black;
}
div#projectHeaderDiv {
	left:10px;
}
a#createProjectBtn {
	position:absolute;
	top:23px;
	right:0px;
	width:60px;
}
a#changeProjectBtn {
	position:absolute;
	top:48px;
	right:0px;
	width:60px;
}
a#removeProjectBtn {
	position:absolute;
	top:73px;
	right:0px;
	width:60px;
}

/*
** Handle documents
*/
div#documentDiv {
	position:absolute;
	top:490px;
	left:410px;
	width:390px;
	height:140px;
	border:1px solid black;
}
div#documentHeaderDiv {
	left:10px;
}
a#createDocumentBtn {
	position:absolute;
	top:23px;
	right:0px;
	width:60px;
}
a#changeDocumentBtn {
	position:absolute;
	top:48px;
	right:0px;
	width:60px;
}
a#removeDocumentBtn {
	position:absolute;
	top:73px;
	right:0px;
	width:60px;
}

/*
** Handle images
*/
div#imageDiv {
	position:absolute;
	top:640px;
	left:10px;
	width:390px;
	height:140px;
	border:1px solid black;
}
div#imageHeaderDiv {
	left:10px;
}
a#removeImageBtn {
	position:absolute;
	top:48px;
	right: 0px;
	width:60px;
}

/*
** Handle other
*/
div#otherDiv {
	position:absolute;
	top:640px;
	left:410px;
	width:390px;
	height:140px;
	border:1px solid black;
}
div#otherHeaderDiv {
	left:10px;
}
a#removeOtherBtn {
	position:absolute;
	top:48px;
	right: 0px;
	width:60px;
}

/*
** Handle log
*/
div#logContainerDiv {
	position:absolute;
	top:490px;
	left:810px;
	width:440px;
	height:290px;
	border:1px solid black;
	overflow: auto;
}
div#logHeaderDiv {
	left:10px;
}
div#logDiv {
	position:absolute;
	left:10px;
	top:20px;
}

strong {background: url('input-bottom-left.png') no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong em {background: url('input-top-right.png') no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong em span {background: url('input-bottom-right.png') no-repeat 100% 100%; display: block; float: left;}
strong em span span {background: url('input-top-left.png') no-repeat; display: block; float: left;}
input, select {margin: 1px 4px; border: 1px solid #fff; font-size: 12px;}

strong#usernameTextStrong {background: url('input-bottom-left_header.png') no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong#usernameTextStrong em {background: url('input-top-right_header.png') no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong#usernameTextStrong em span {background: url('input-bottom-right_header.png') no-repeat 100% 100%; display: block; float: left;}
strong#usernameTextStrong em span span {background: url('input-top-left_header.png') no-repeat; display: block; float: left;}

strong#passwordTextStrong {background: url('input-bottom-left_header.png') no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong#passwordTextStrong em {background: url('input-top-right_header.png') no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong#passwordTextStrong em span {background: url('input-bottom-right_header.png') no-repeat 100% 100%; display: block; float: left;}
strong#passwordTextStrong em span span {background: url('input-top-left_header.png') no-repeat; display: block; float: left;}