@import "base.css";

html,body{
	height:100%;
}

body{
	font-size: 0.9em;
	font-family: Tahoma,'bitstream vera sans', Helvetica, Geneva, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	background-color:#eaeaea;
	text-align: left
}
/* ----- IDS :: Layout ----- */

#wrap{
background-color:#f6f6f6;
position: relative;
overflow:hidden
}
#header{
margin: 0;
padding:0 0 10px;
position:relative;
text-align: center;
}

#content{
padding:10px 20px 20px;
background:url(img/white_bg.gif);
background:url()
}
#footer{
clear:both;
padding:4px 20px 10px;
font-size: 0.67em;
min-height:30px;
height:30px;
text-align: left;
background:#eaeaea;
color:#999;
position:relative
}
#footer #logo{
text-indent:100em;
text-decoration: none;
background-image:url(img/omnibase.gif);
background-repeat: no-repeat;
background-position: left center;
display: block;
width:170px;
height:42px;
overflow: hidden;
float: right;
border:0
}

#user{
position:absolute;
top:6px;
right:20px;
font-size:.88em;
}
#user a{
color: white;
text-decoration: none
}
#user a strong, #user a:hover{
color: black
}

#styles{
position: absolute;
top:7px;
right:80px
}
#styles a{
display:block;
width:16px;
height:16px;
float: left;
margin:0 3px;
border:1px outset #999;
cursor: pointer;
}
#styles a:active{
border-style: inset
}
#cpicker{
background:url(img/colors_icon.jpg) no-repeat center
}
/* ----- CLASSES ----- */
.bgcolor{
background-color:#ccc;
/*background-image:url(img/bg_texture.png);*/
}
.edit{
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
text-decoration: none;
text-indent:-1000px;
overflow: hidden;
display: block;
width:18px;
height:18px;
float: left;
cursor: pointer;
margin:2px;
border:0
}
.edit{
background-image:url(img/edit.gif);
}
.del{
background-image:url(img/del.gif);
}
.edit:hover{
background-position:left top;
}
.edit:active{
background-position: center;
}
.resizer{
color:black;
margin:0 0 3px -3px;
font-size:16px;
}

.message{
font-style: italic;
color:#7B7B7B;
background:url(img/white_bg.gif);
padding:5px 3px;
font-size:12px
}
.actions{
float: right;
clear: both	
}
.loading{
background-image:url(img/loading.gif);
background-repeat: no-repeat;
}
form.loading{
background-position:95% 95%;
}
.link{
background-image:url(img/link.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:23px
}
.mail{
background-image:url(img/mail.gif);
background-position:right;
background-repeat: no-repeat;
padding-right:23px
}
.service{
font-style: normal;
font-weight:normal;
color: black;
text-transform: uppercase;
font-size: 18px;
font-family: Tahoma,'bitstream vera sans', 'Trebuchet MS',sans-serif;
letter-spacing:0.2em;
border:0;
background-position:center;
background-repeat: no-repeat;
}

.selectMult{
min-height:20px
}
.shadow{
box-shadow:-2px 2px 5px rgba(0,0,0,.25);
-moz-box-shadow:-2px 2px 5px rgba(0,0,0,.25);
-webkit-box-shadow:-2px 2px 5px rgba(0,0,0,.25);
-o-box-shadow:-2px 2px 5px rgba(0,0,0,.25);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=270, Strength=2);
border:1px solid #aaa;
}
.title{
text-transform:uppercase;
font-size: 1.5em;
letter-spacing:0.2em;
font-weight: bolder;
color:#000;
}
/* ----- OBJECTS :: Components ----- */
#dialog {
	position: fixed !important;
	position: absolute;
	z-index:100;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	min-height:100%;
	background:url(img/white_bg.gif);
	/*background-color:#fff;
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;*/
}

#dialog-window {
	position: fixed !important;
	position: absolute;
/* 	height:40%; */
	bottom:35%;
	left: 50%;
	z-index: 102;
	text-align:left;
	border:3px solid white;
	border-top-width:18px;
}
#dialog-title{
	white-space: nowrap;
	position: absolute;
	top:-22px;
	left:-1px;
	font-size:22px;
	float: left;
	width:100%
}
#dialog-content{
	padding:0 10px;
	border-width: 5px;
	border-style: solid ;
	background-color: #eee;
	overflow:hidden;
	height:auto !important;
	height:1%;
	
}

#dialog-bar{
	margin:0;
	text-align: right;
	padding:0 4px 3px;
	overflow: hidden
}
#dialog-content form{
position: relative;
display: block;
background:none;
border:0;
width:auto;
}
#dialog-content label{
	width: auto;
	text-align: left
}
#dialog-content input{
	float:none;
	font-size: x-small;
	width:auto;
}

#firefox{
	margin:0 0 0 25px;
	position: absolute;
	bottom:2px;
	left:-5px;
	font-size: x-small;
	color:#999;
/* 	width:10em */
}
#firefox a{
/* 	border:2px solid #ddd */
}
/* ----- HEADINGS ----- */

#h1 {
margin:0;
padding:2px 20px 4px;
color: white;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.7em;
font-weight:normal;
text-align: left;
background:url(img/transparent.png) !important;
background:rgba(0,0,0,.1) !important;
/*background-image:url(img/semi_transp.gif)*/
background:none
}
#h1 a{
border:0;
z-index:1;
}
#h1 a strong{
color: white;
font-weight:normal;
padding-left:31px ;
background-position:0 4px;
background-repeat:no-repeat
}
.lists #h1 a strong{background-image:url(img/small_lists.png) }
.contacts #h1 a strong{background-image:url(img/small_contacts.png) }
.calendar #h1 a strong{background-image:url(img/small_calendar.png) }
.finance #h1 a strong{background-image:url(img/small_finance.png) }
.fonts #h1 a strong{background-image:url(img/small_fonts.png) }
.mailer #h1 a strong{background-image:url(img/small_mailer.png) }

#more-lists{background-position:2px -64px; }
#more-contacts{background-position:2px 3px;}
#more-calendar{background-position:2px -40px;}
#more-finance{background-position:2px -19px;}
#more-fonts{background-position:2px -85px;}
#more-mailer{background-position:2px -107px;}

#h1 ins{

}
#quickswitch{
position:absolute;
z-index:22;
border:1px solid #666;
border-top-width:2px;
margin:0;
top:9px;
display:none;
border-radius:3px;
-moz-border-radius:3px;
background:#fff;
width:auto !important;
width:9.45em;
}
#quickswitch.show{display:block}
#quickswitch li{
margin:0;
display:block;
padding:0
}
#quickswitch a{
padding:2px 3px 2px 22px;
background-image:url(img/services_16x16.png);
background-color:#fff;
background-repeat:no-repeat;
border:1px solid #e6e6e6;
display:block;
font-size:.9em;
position:relative;
margin:-1px 0 0 ;
letter-spacing:1px;
width:8.4em;
}
#quickswitch a:hover{
background-color:#fffca0;
color:#000
}
#h1 #more{
padding:0;
background:none;
position:relative;
}
#h1 em{cursor:default}
#more img{width:17px;height:17px;vertical-align:middle}
#more:hover img{border:1px solid #111;background:#ddd}


#message{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.7em;
font-weight:normal;
text-align: left;
padding:10px 20px;
}
#header #message a{
	color:#cd600f;
	border-bottom:1px solid #ccc
}
h1, h2, h3, h4, h5, h6{
cursor: default
}
h2{
margin:0 10px 0 0;
font-size:large;
}
h3{margin:0;
}
h4{margin:0;
}
input.h2{
font-size:large;
font-weight:bold;
padding:0 2px;
}
/* ----- HTML ----- */
table, td{
border:0;
vertical-align:top
}
li{
list-style:none;
}


/* ----- LINKS ----- */

a{
text-decoration: none;
border-bottom:1px dotted #ccc;
cursor: pointer;
color:#525bb2
}
a:visited{
border-bottom-style: dashed
}
a:hover{
border-bottom-style: solid;
color:black
}
a:active, a:focus{
border:0
}

a:active{
}
a:focus{
}

/* ----- FORMS ----- */

label{
font-size:x-small;
display:block;
padding:0 0 3px
}
input, textarea{
margin:1px 3px 0 0;
font-size: 1em;
font-family: Tahoma, "bitstream vera sans",Geneva, Verdana, sans-serif;
/*border:1px solid #999;
border-width:2px 1px 1px 2px;
padding:3px;
background:#fff;
background-image:url(img/input.gif);
background-repeat: repeat-x;
background-position: top*/
}
textarea{
min-height:2.2em;
max-height:30em
}

input:focus, textarea:focus{
outline-color: black;
}
input.pass{
font-weight: bold;
font-size: medium;
font-family: Verdana, sans-serif;
color:#c25b0e;
}

fieldset input, input[type=checkbox], input[type=radio]{
background:none;
border:0;
padding:0
}

button, .button{
cursor:pointer;
overflow: visible;
}
button img, .button img{ 
vertical-align:middle
}

hr{
display:none;
}


/* ----- PRINT ----- */

@media print{

#sidebar, #footer, #styles, #user{
display:none;
}

}


/* Mobile CSS */
@media screen and (max-width: 500px) {
	
	/* HOME */
	#pg_login #content,#pg_login .screen{padding:0 2px}
	#pg_home #header #user{top:0}
	
	/* COMMON */
	body{font-size: 1em}
	#wrap{min-width:200px !important;}
	#quickswitch{
	top:30px;
	left:30% !important
	}
	#header #user{
	position:absolute;
	right:3px;
	top:0px;
	line-height:1
	}
	#user a{border:0}
	#user span,#styles,.resizer{display:none}
	#h1{padding:2px 15px 4px}
	

	/* CONTACTS */
	.contacts #q{
	width:80%
	}
	.contacts #content{padding:20px 0 0}
	
	
	/* LISTS */
	.lists #wrap, .lists #content{
	min-width:200px;
	}
	.lists #reorderBtn{display:none}
	.lists #content{
	margin:0;
	top:0;
	width:auto;
	border-width:1px 0;
	background:#fff;
	padding:10px 8px 10px;
	}
	.lists #sidebar{
	float:none;
	width:auto
	}
	.lists #newItemField{width:277px}
	.lists #list form .actions{
	float:none;
	width:auto;
	height:auto;
	}
	.lists #list form .button,#list form button{
	width:auto !important;
	}
	.lists #doneList{
	width:auto;
	margin:30px 0;
	}
	
	/* MAILER */
	.mailer #content{
	padding:0 8px 0 7px;
	margin-bottom:-30px;
	}
	.mailer .m{
	width:100%;
	margin:0 0px 20px 0
	}
	.mailer .m p{margin: 15px }
	.mailer#pg_compose td,.mailer#pg_compose th{
	display:block ;
	width:auto 
	}
	.mailer#pg_compose #content{
	min-width:200px ;
	}
	.mailer #send-btn{
	position:absolute;
	bottom:-38px;
	}

	/* CALENDAR */
	.calendar #content{
		margin:0;
		top:20px;
		width:87%
	}
	.calendar #calendar-tb{position:relative;width:100%}
	.calendar #sidebar{float:none;width:auto;display:block}
	.calendar .monthNav{margin:15px 0 66px 0;width:100%}
	.calendar #header h2{bottom:-26px;}
	
	/* FINANCE */
	.finance #content{
		margin:0 0 25px;
		top:0px;
		width:87%
	}
	.finance #sidebar{float:none;display:block;position:relative}
	.finance .monthNav{margin:15px 0 66px 0;width:100%}
	.finance #header h2{bottom:-25px;font-size:100px}
	.finance td, .finance th{display:block;width:100%}
	
	/* FONTS */
	.fonts #content{margin:0;top:32px;border-width:1px 0;clear:left}
	.fonts #sidebar{float:none;width:auto;display:block}
	.fonts #header form {width:82.2%}
	.fonts .ff{width:96%}
	
}/* end @media */