structure.less

/*
	The main CSS for Paathshaala
	Author : Jaseem Abid <jaseemabid@gmail.com>
*/

/* Custom font embedding */
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: local('Droid Sans'), local('DroidSans'), url('../fonts/DroidSans.woff') format('woff');
}

@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: normal;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url('../fonts/Pacifico.woff') format('woff');
}

.droidSans {
font-family: 'Droid Sans';
}

.pacifico {
font-family: 'Pacifico';
}

/* Templates and color schemes */

@blue		: #3A75AF;
@letters	: #555555;
@offWhite	: #F9F9F9;
@gray1		: #EFEFEF;
@gray2		: #F1F2F2;

/* Change selected text color */
::-moz-selection {
color:white;
background:@blue ;
}
::selection {
color:white;
background:@blue ;
}


/* HTML5 good practice */
header, footer, section, aside, nav, article {
display: block;
}

img#loading {
position:fixed;
top:300px;
left:45%;
z-index:1000;
}

html {
font-size: 100.01%;
min-height: 100%;
margin: 0;
}

body {
.droidSans;
background:@offWhite;
margin: 0;
color: @letters;
line-height: 1.4;
}

a {
	color: @letters;
	text-decoration:none;
	border:0px;
	&:hover {
	text-decoration: underline;
	}

}

div.dropDown a:hover {
text-decoration: none;
}


#container{
margin:0 auto -30px; /* -30px is needed because #bottom is moved down relatively and it adds a gap */
width: 920px;
min-height:600px;
padding: 0px;
}

/* TOP BAR */

#topbar {
background: none repeat scroll 0 0 @gray1;
border-bottom: 1px solid #D4D4D4;
box-shadow: 0 0 10px rgba(212, 212, 212, 0.9);
height: 32px;
position: absolute;
width: 100%;
margin: 0;
}

#top {
	height: 100px; /* min logo size */
	position: relative;

	#logo1, #logo2{
		background :@offWhite;
		border-color: #D2D2D2;
		border-right: 1px solid #DDDDDD;
		border-style: none solid solid;
		border-width: 0 1px 1px;
		background: -webkit-gradient(linear, left top, left bottom, from(white), to(@gray1));
		background: -moz-linear-gradient(top,white,@gray1);
		float: left;
		padding: 5px 12px 10px;
		position: relative;

		&:hover {
			background:#f7f7f7;
			text-decoration: none;
		}

		h1 {
			background: url("../pics/paathshaala.png") no-repeat scroll center bottom transparent;
			border-color: #D2D2D2;
			margin: 7px 0 0;
			height: 60px;
			width: 183px;
		
			&:hover { background: url("../pics/paathshaala_black.png") no-repeat scroll center bottom transparent; }
		
		}
	}

	.topbarLeft {
		margin: 0;
		padding: 0;
		left: 220px;
		position: absolute;
		top: 3px;
	}

	ul.userBar, ul.topbarLeft {
		float: right;
		margin: 0;
		padding: 0;
		li {
			position:relative;
			display: inline;
			top:5px;
			cursor: pointer;
			list-style-type: none;
			margin-left: 3px;
			margin-right: 3px;

			&:first-child {
			margin-left: 0;
			}

			&:last-child {
			margin-right: 0;
			}
		}
		a, button {
			color :@letters;
			font-size: 14px;
			font-weight: bold;
			text-shadow: 0 1px 0 white;
			&:hover {
				color: @letters;
				text-decoration: none;
			}
		}
	}
}



/* BOTTOM BAR */

#bottombar {
background: none repeat scroll 0 0 @gray1;
border-top: 1px solid #D4D4D4;
height: 40px;
width: 100%;
margin: 0;
z-index:-2;
}

#bottom {
	margin: 0 auto;
	width: 920px;
	height:100px;
	padding: 0px;
	position:relative;
	top:40px; /* Height of bottom bar */

	#logo1, #logo2{
		border-color: #D2D2D2;
		background:#f5f5f5;
		background: -webkit-gradient(linear, left top, left bottom, from(@gray1), to(white));
		background: -moz-linear-gradient(top,@gray1,white);
		border: 1px #D2D2D2 solid;
		float: right;
		padding: 4px 12px 10px;
		position: relative;
	
		&:hover {
			background:#f7f7f7;
			text-decoration: none;
		}

		h1 {
			background: url("../pics/tuw60.png") no-repeat scroll center bottom transparent;
			border-color: #D2D2D2;
			margin: 7px 0 0;
			height: 80px;
			width: 183px;
		}
	}
}



/* BOTTOM BAR links */
.bottomLinks { 
	li {
		position:relative;
		display: inline;
		list-style-type: none;
		margin:0px 1px;
		left:-10px;
		top:70px;

		&:first-child { margin-left: 0; }
		&:last-child { margin-right: 0; }
	}

	a {
		color: #777777;
		font-size: 13px;
		font-weight: bold;
		text-shadow: 0 1px 0 white;
		&:hover {
			color: @letters;
			text-decoration: none;
		}
	}

}




/* Search button & bar */

input.searchBox {
font-size:16px;
background: #fefefe;
width: 270px;
border: 1px #D2D2D2 solid;
padding-left:30px;
border-radius: 13px 13px 13px 13px;
height:25px;
}

img.searchButton {
position: absolute;
left: 10px;
top: 6px;
}

button.tickButton{
background:transparent;
position:relative;
top:2px;
border:0px solid #c2e1ef;
color: @letters;
float:right;
}

/* Login form */
form.login , form.join , .dashBoard {
	display:none;
	position:absolute;
	top:34px; right:0px;
	width:235px; height:90px;
	z-index:12;
	border-color: #D2D2D2;
	background:#f5f5f5;
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(@gray1));
	background: -moz-linear-gradient(top,white,@gray1);
	border-right: 1px solid #DDDDDD;
	border-style: none solid solid;
	border-width: 0 1px 1px;
	padding: 10px 10px 10px 10px;
	box-shadow:5px 4px 5px rgba(2, 2, 2, 0.5);
	border-radius:0px 0px 5px 5px;

	a {
		text-decoration:none;
	}

	input {
		-moz-transition: all 0.3s ease-in-out 0s;
		font-size:16px;
		background: #fefefe;
		width: 200px;
		border: 1px #D2D2D2 solid;
		padding-left:10px;
		border-radius: 13px 13px 13px 13px;
		height:25px;
		padding-left:10px;
		margin-bottom:2px;
		outline: medium none;
		text-shadow: 0 1px 0 white;
		.error {
			border: 1px solid #ff8c8c;
			box-shadow: 0 0 5px #ff8c8c;
		}
		.valid {
			border: 1px solid #609a3b;
			box-shadow: 0 0 5px #609a3b;
		}
	}

	div.joinMessage {
		text-align:center;
		font-size:14px;
		margin:0 0 5px 0;
		padding:5px;
		border:1px solid #cccccc;
		border-radius:15px;
	}

	div.error {
		border-color:#d02323;
	}

	span.check {
		display:none;
		
	}

	button {
		background: -moz-linear-gradient(center top , #F0F0EA, #D5D7CE) repeat scroll 0 0 transparent;
		color: #333333;
		text-shadow: 0 1px 0 white;
		border: 1px solid #BBBBBB;
		border-radius: 4px 4px 4px 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		display: inline-block;
		font-size: 12px;
		outline: medium none;
		padding: 3px 10px 4px;
		text-align: center;
		text-decoration: none;
		
		position:relative;
		top:5px;
		left:180px;
	}
}

form.join {
	height: 255px;
	width: 260px;
}

.dashBoard {
	width:135px;
	height:60px;
	z-index:1200;
	
}

.loggedUser {
float:right;
display: inline;
padding: 0;
}

.loggedImage {
height:30px;
margin-top:2px;
padding:0px;
}

.loggedName {
display:inline;
font-size:16px;
padding-left:5px;
padding-right:5px;
position:relative;
top:-9px;
}



/* Coloumn Structure */
/*-------------------------- */
.mainLeft, /* Wide normal left coloumn , like the one in faq */
.mainRight /* Normal side bar in the right side */ { 
display:table-cell;
padding:0px;
}

.mainLeft {
width:570px;
margin-right:10px;
}

.mainRight {
width:330px;
margin:0px;
}

/* General styling */

.q {
color:@blue;
font-size: 16px;
}

.ans {
color:@letters;
font-size: 14px;
}

img.feedbackDock {
	cursor:pointer;
	position:fixed;
	left:-2px;
	top:30%;
	&:hover { margin-left:2px; }
}

#indexMesssage {
	span#cross {
		margin-left:10px;
		cursor:pointer;
	}
	background: none repeat scroll 0 0 @gray1;
	border: 1px solid #D4D4D4;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 10px rgba(212, 212, 212, 0.898);
	color: #464646;
	font-size: 16px;
	height: 20px;
	left: 215px;
	margin: 0;
	padding: 10px;
	position: relative;
	width: 685px;
}

/* Popup stuff */
div#feedback, div#editProfile {
display:none;
position:fixed;
top:100px;
left:35%;
width : 400px;
height : 275px;
z-index:100;
border-color: #D2D2D2;
background:#f5f5f5;
border-right: 1px solid #DDDDDD;
border-style: none solid solid;
border-width:1px;
padding: 10px 10px 10px 10px;
box-shadow:5px 4px 5px rgba(2, 2, 2, 0.5);
border-radius:5px;
}

div#feedback {

	form.feedbackForm {
	border:0px solid #80afdf;
	position:relative;
	top:-20px;
	}

	span.fbTitle {
	.pacifico;
	font-size:20px;
	background:transparent;
	color:#6480a5;
	}

	span#cross {
	cursor:pointer;
	position:absolute;
	top:10px;
	right:10px;
	font-family:Arial;
	z-index: 10;
	}

	div#blueLine {
	height:40px;
	width:100%;
	margin:10px 0px;
	background:transparent;
	border-bottom:1px solid #b5d2f0;
	border-top:1px dotted #d1d1d1;
	}

	ul.links li {
		z-index:55;
		cursor:pointer;
		position:relative;
		top:-45px;
		display:inline-block;
		background: -moz-linear-gradient(center top , #F0F0EA, #D5D7CE) repeat scroll 0 0 transparent;
		color: #333333;
		text-shadow: 0 1px 0 white;
		border: 1px solid #BBBBBB;
		border-radius: 4px 4px 4px 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		display: inline-block;
		outline: medium none;
		text-align: center;
		text-decoration: none;
		height:20px;
		padding:2px 3px;
		margin:-10px 1px 1px 1px;

		&:hover {
			background: #fefefe;
			border-radius:4px;
		}
		.hilite {
			background: #fefefe;
			border-radius:4px;
		}
	}

	.content div.panel {
	padding-top:10px;
	z-index:52;
	position:relative;
	top:-60px;
	display:none;
	width:400px;
	height:100px;
	}
}

form.feedbackForm input , form.feedbackForm textarea {
-moz-transition: all 0.3s ease-in-out 0s;
font-size:14px;
color: @letters;
background: @gray1;
width:390px;
border: 1px #D2D2D2 solid;
padding-left:10px;
border-radius: 5px;
height:25px;
padding-left:10px;
margin-bottom:2px;
outline: medium none;
text-shadow: 0 1px 0 white;
}

form.feedbackForm textarea {
height:100px;
}

.grayButton {
	background: -moz-linear-gradient(center top , #F0F0EA, #D5D7CE) repeat scroll 0 0 transparent;
	color: #333333;
	text-shadow: 0 1px 0 white;
	border: 1px solid #BBBBBB;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	display: inline-block;
	font-size: 12px;
	outline: medium none;
	padding: 3px 10px 4px;
	text-align: center;
	text-decoration: none;
	position:relative;
	top:10px;
	float:right;

	&:hover {
	background: -moz-linear-gradient(center top ,#D5D7CE,#F0F0EA) repeat scroll 0 0 transparent;
	color: @letters;
	}
}