/* 
    Document   : directory
    Created on : 29/01/2009, 05:40:14 AM
    Author     : UBN
    Description:
        Global style for directory
*/
/**************************************\
|------------COLOR SCHEME--------------|
|--------------------------------------|
- black		#000
- white		#fff
\**************************************/


/**************************************/
/*              GLOBALS               */
/**************************************/
body { background:url(../images/body_bg.jpg) repeat-x #DDDDDD; margin-top:0px; color:#555; }

/**************************************/
/*              HEADER                */
/**************************************/

.header {
	background:url(../images/header_bg.gif) repeat-x;
	height:72px;
}
.header .left, .header .right {
	background:url(../images/header-border.jpg) no-repeat;
	width:50px;	height:72px;
}
.header .left  { float:left; background-position:top left; }
.header .right { float:right; background-position:top right; }
.header .site-name-en, .header .site-name-es {
	background:url(../images/infolit-resources-directory.gif) no-repeat; height:40px; margin-top:20px;
}
.header .site-name-en { background-position:0px 0px; }
.header .site-name-es { background-position:0px -40px }

/**************************************/
/*             NAVIGATION             */
/**************************************/
.nav {
	background:url(../images/nav-bg-y1.gif) top left repeat-y #F2F7F3;
	margin-top:10px; float:left; width:100%;
}
.nav .top {
	height:16px; width:100%; float:left;
	background:url(../images/nav-bg-x.gif) top left repeat-x;
}
.nav .bot {
	height:16px; width:100%; float:left;
	background:url(../images/nav-bg-x.gif) bottom left repeat-x;
}
.nav .corner {
	background:url(../images/nav-corners.gif) no-repeat;
	width:16px; height:16px;
}
.nav .tl { background-position:top left; float:left; }
.nav .tr { background-position:top right; float:right; }
.nav .bl { background-position:bottom left; float:left; }
.nav .br { background-position:bottom right; float:right; }

.nav .mid {
	height:auto; width:100%;
	background:url(../images/nav-bg-y2.gif) right repeat-y;
}
.ops { padding: 0; margin: 20px 10px 0 0; list-style: none; float:left; width:180px; }
.ops li { text-align:right; margin:5px 0; }
.ops li a, .ops li a:visited {
	background:none; font-size:1.5em; padding-right:0px; text-decoration:none;
	color:#438756;
}
.ops li a:hover { color:#000; }

/**************************************/
/*            MAIN CONTENT            */
/**************************************/

a:link { color: #36c; }
a:visited { color: #99c; }
a:hover { color: #c75; }
a:active, a:focus { color: #000; }

.content {
	margin-top:30px;
	background:url(../images/content-bg-y1.gif) top left repeat-y #fff;
}
.left-box { float:left; width:190px; margin-top:30px; padding:0;
		    background:url(../images/left-bg-y1.gif) top left repeat-y #ffffff; }
.left-box .top { float:left; height:16px; width:190px; padding:0;
	background:url(../images/content-bg-x.gif) top left repeat-x;
}

.content .top {
	height:16px; width:100%; float:left;
	background:url(../images/content-bg-x.gif) top left repeat-x;
}
.content .bot, .left-box .bot {
	height:16px; width:100%; float:left;
	background:url(../images/content-bg-x.gif) bottom left repeat-x;
}
.content .corner {
	background:url(../images/content-corners.gif) no-repeat;
	width:16px; height:16px;
}
.left-box .corner {
	background:url(../images/left-corners.gif) no-repeat;
	width:16px; height:16px;
}
.content span.tl, .left-box span.tl { background-position:top left; float:left; }
.content span.tr, .left-box span.tr { background-position:top right; float:right; }
.content span.bl, .left-box span.bl { background-position:bottom left; float:left; }
.content span.br, .left-box span.br { background-position:bottom right; float:right; }

.content .mid { min-height:500px; background:url(../images/content-bg-y2.gif) right repeat-y; }

.left-box .top { width:190px; }
.left-box .mid { float:left; width:190px; background:url(../images/left-bg-y2.gif) right repeat-y; }
.left-box .mid form { padding:0; margin: 0; }
.left-box .mid form input:hover { border:#CCC solid 1px; }
.left-box .mid form p { margin:5px 15px; }

.login .mid form label {
	font-weight:normal; font-size:92%; margin-right:10px;
	width:60px; text-align:right; float:left;
}
.login .mid form input { width:70px; margin:0px 0px 5px 0px; float:left; }
.login .mid form a { font-size:8pt; margin:0 5px 0 10px }
.login .mid form a.submit {
	font-size:92%; margin:0px 10px 0px 70px; padding:1px 8px; text-decoration:none;
	background-color:#77AA77; color:#FFF; float: left; }
.login .mid form a.submit:hover { background-color:#338844; }
.login .mid form a.loading 
	{ background:#FFFFFF url(/media/img/loading.gif) center no-repeat; padding:8px 0; overflow:auto; float:right; width:40px; height:auto;}

.login .mid .login-options { float:left; margin:10px 0 0; width: 190px; text-align: center; }
.login .mid .login-options a { color:#338844; margin: 0 10px; font-size: 8pt; }
.login .mid .login-options a:hover { color:#AAA; }

.login .mid .user-info .username {
	font-size:120%; color:#000; font-weight:bold; margin:0px 20px; text-align:center;
	background:url(/media/img/icons/im.png) top left no-repeat; border-bottom:#338844 dotted 1px; }
.login .mid .user-info ul { list-style:none; margin:10px 20px 0 20px; padding:0; }
.login .mid .user-info ul li { float:left; width:100%; height:auto; margin:2px 0px; }
.login .mid .user-info ul li a {
	font-size:110%; text-decoration:none; border:#DDD solid 1px; padding:1px 5px; color:#999;
	padding-left:20px; background:url(/media/img/icons/bullet_green.png) 2px 1px no-repeat;}
.login .mid .user-info ul li .logout { color:#666; padding-left:20px;
	background:url(/media/img/icons/bullet_red.png) 2px 1px no-repeat; }
.login .mid .user-info ul li a:hover { color:#000; }

#response { text-align:center; font-size:8pt; color:#CC0000; margin:0; overflow:auto; height:0px; }
.loading { background:url(/media/img/loading.gif) center no-repeat; padding:8px 0 }

.search { margin-top:20px; width:190px; }
.search .top { width:190px; }
.search .mid form input.query
	{ float:left; width:130px; background:url(/media/img/icons/search.png) right bottom no-repeat; 
	  padding:3px 18px 2px 5px; margin:0; }

#search-submit {
	float:left; width:auto; font-size:92%; margin:5px 0 0 0; padding:2px 8px; text-decoration:none;
	background:#77AA77 none; color:#FFF; border:none; font-family:"Liberation Sans",Helvetica,Arial,sans-serif }
#search-submit:hover { background-color:#338844; }
#search-response { text-align:center; font-size:8pt; color:#CC0000; margin:0; overflow:auto; margin:5px 0 0 20px; }

.content .mid input[type='text'], .content .mid input[type='password'], .content .mid textarea, select
{ font-family: "Liberation Sans", Helvetica, Arial, sans-serif; font-size:11pt; color:#333; }

h1 { color:#338844; border-bottom:#338844 dotted 1px; margin:4px 0px 10px 0px; padding-bottom:10px;
	 height:auto; line-height:20px; font-size:14pt; letter-spacing:1px; font-weight:normal; }
/*h1 span { background-color:#338844; color:#FFF; padding:2px 8px; }*/

h2 { font-size: 12pt; }

.coordinators { background-color: #EEFFDD; border: 1px dotted #338844; padding: 10px 20px 0px; }
.coordinators table, .coordinators td, .country_contacts table, .country_contacts td { border: none; }
.coordinators td { padding-top: 2px; padding-bottom: 2px; }
.coordinators h2 { margin: 0 0 5px 0; }
.coordinators .region, .country_contacts .region 
	{ font-size: 10pt; font-weight: normal; font-style: italic; text-align: right; border-right: 1px dotted #338844; margin: 5px 0; }
.coordinators .contact, .country_contacts .contact { font-size: 12pt; font-weight: normal; margin: 5px 0; }
.coordinators .contact span, .country_contacts .contact span { font-size: 9pt; }
.country_contacts td { padding-top: 4px; padding-bottom: 4px; }
.country_contacts .contact p { font-size: 9pt; line-height: 14px; margin: 2px 0 0; color: #777; }

.container .left-col .feed { float:right; width: auto; height: auto; margin: 88px 10px 0 0; }
.container .left-col .feed a { padding: 1px 20px 1px 0; color:#555; text-decoration: none;
	background: url(/media/img/icons/feed.png) no-repeat right top; }
.container .left-col .feed a:hover { color: #AAA }

.success, .error { text-align: center; }

/**************************************/
/*               FOOTER               */
/**************************************/