@charset "utf-8";


/*//////////////////////////////////////////////////

Title   : base.css
For     : Setting base styles

Author  : siewna.kooy@notionage.com (http://nana4design.net)
Created : 2010-10-05
Modified: yyyy-mm-dd

----------------------------------------

Content : 1. Main frame
               1. Container
               2. Header
               3. Content
               4. Footer

          2. Header
               1. Logo
               2. Login box and search
			   3. Navi

          3. Footer
               1. Links
               2. Copyright
			   3. Footer nav
			   
          4. Sub content
			   
          5. Classes
               1. Hidden nav
               2. Others
			   3. Media (Flash)

----------------------------------------

//////////////////////////////////////////////////*/


/* ----------------------------------------(=0)
    0. Body
   ---------------------------------------- */
body {
	min-width: 980px;
	background: #efefef;
	text-align: center;
}


/* ----------------------------------------(=1)
    1. Main frame
   ---------------------------------------- */

/*  1-1. Container
   ------------------------------- */
#container-outer {
	background: #fff;
}
#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

/*  1-2. Header
   ------------------------------- */
#header-outer {
	background: #fff url(../images/common/nav-bg.gif) repeat-x left bottom;
}
#header {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

/*  1-3. Content
   ------------------------------- */
#content {
	padding: 0 0 40px;
}

/* ----- div#main ----- */
#main {
	float: right;
	width: 680px;
	margin: 0 10px 0 0;
	padding: 20px 0 0;
}

/* ----- div#sub ----- */
#sub {
	position: relative;
	float: left;
	width: 236px;
	min-height: 570px;
	margin: 20px 0 0;
	padding: 0 13px 0 0;
	background: url(../images/common/sub-separator.gif) no-repeat right top;
}

/*  1-4. Footer
   ------------------------------- */
#footer {
	position: relative;
	float: left;
	width: 100%;
	overflow: hidden;
}
#footer-nav-outer {
	background: #f7f7f7;
}
#footer-nav {
	width: 960px;
	margin: 0 auto;
	padding: 15px 0 0;
	text-align: left;
	font-size: 11px;
}


/* ----------------------------------------(=2)
    2. Header
   ---------------------------------------- */
/*  2-1. Logo
   ------------------------------- */
#header h1 {
	float: left;
	width: 300px;
	margin: 0;
}

/*  2-2. Login box and search
   ------------------------------- */
#header #uti-panel {
	float: right;
	width: 311px;
	padding: 10px 5px 8px 5px;
	background: #d9d9d9 url(../images/common/login-bg.gif) no-repeat left bottom;
}
#header #uti-panel ul {
	float: left;
	width: 110px;
	margin: 0;
	font-size: 11px;
}
#header #uti-panel ul li {
	float: left;
	margin: 0 0 0 5px;
	padding: 0 0 0 7px;
	background: url(../images/common/icon-green-line.gif) no-repeat left center;
}
#header #uti-panel ul li.first-child {
	margin: 0;
	padding: 0;
	background: none;
}
#header #uti-panel ul li a {
	color: #333;
}

/* ----- search ----- */
#header #uti-panel #search-box {
	position: relative;
	float: right;
	width: 190px;
	background: #efefef;
}
#header #uti-panel #search-box p {
	margin: 0;
}
#header #uti-panel #search-box input {
	width: 160px;
	border: 0;
	background-color: transparent;
}
#header #uti-panel #search-box input.buttonsearch-box {
	width: 18px;
	height: 17px;
	position:absolute;
	top: 2px;
	padding: 0 0 0 2px;
}
#header #uti-panel #search-box p span {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 18px;
	height: 17px;
	background: url(../images/common/icon-search.gif) no-repeat;
	text-indent: -9999px;
}

/*  2-3. Navi
   ------------------------------- */
#header #nav {
	clear: both;
	font-size: 12px;
	font-weight: bold;
}
#header #nav ul#gnav {
	margin: 0;
	background: url(../images/common/nav-separator.gif) no-repeat right bottom;
}
#header #nav ul#gnav li {
	position: relative;
	float: left;
	width: 120px;
	background: url(../images/common/nav-separator.gif) no-repeat left bottom;
	text-align: center;
	z-index: 100;
}
#header #nav ul#gnav li a {
	display: block;
	line-height: 37px;
	height: 37px;
	color: #fff;
}
#header #nav ul#gnav li#current a, #header #nav ul#gnav li.active a {
	color: #003300;
}
#header #nav ul#gnav li.active li a {
	color: #fff;
}

/* ----- sub nav ----- */
#header #nav ul#gnav li ul { /* second-level lists */
	position: absolute;
	width: 200px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	padding: 7px 0 0;
	background: #0069aa url(../images/common/nav-sub-bg.gif) no-repeat left top;
	font-size: 11px;
	z-index: 120;
}
#header #nav ul#gnav li.last-child ul {
	margin-left: -80px;
	background: #0069aa url(../images/common/nav-sub-bg2.gif) no-repeat left top;
}
#header #nav ul#gnav li ul li {
	width: 167px;
	padding: 5px 10px 5px 23px;
	background: #0069aa url(../images/common/icon-arrow-blue.gif) no-repeat 13px 9px;
	border-bottom: 1px dotted #003f66;
	text-align: left;
}
#header #nav ul#gnav li ul li a {
	width: 167px;
	height: auto;
	line-height: 18px;
}
#header #nav ul#gnav li ul li a:hover {
	color: #a4deff;
}
#header #nav ul#gnav li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 200px;
}
#header #nav ul#gnav li:hover ul ul,
#header #nav ul#gnav li:hover ul ul ul,
#header #nav ul#gnav li.sfhover ul ul,
#header #nav ul#gnav li.sfhover ul ul ul {
	left: -999em;
}
#header #nav ul#gnav li:hover ul,
#header #nav ul#gnav li li:hover ul,
#header #nav ul#gnav li li li:hover ul,
#header #nav ul#gnav li.sfhover ul,
#header #nav ul#gnav li li.sfhover ul,
#header #nav ul#gnav li li li.sfhover ul { /* lists nested under hovered list items */
	left: 0;
}

   
/* ----------------------------------------(=3)
    3. Footer
   ---------------------------------------- */
/*  3-1. Links
   ------------------------------- */
#footer  {
	line-height: 16px;
	padding: 20px 0 0;
	color: #666;
	font-size: 11px;
}
#footer a {
	color: #666;
}
#footer img {
	vertical-align: middle;
}
#footer .misc {
	width: 450px;
	margin: 0 auto;
}
#footer ul {
	float: left;
	margin: 0;
	/*position: relative;
	left: 50%;
	clear: left;
	float: left;
	margin: 0;
	text-align: center;*/
}
#footer ul li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	color: #666;
	border-right: 1px solid #8b8b8b;
	/*display: block;
	position: relative;
	right: 50%;
   	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	color: #666;
	border-right: 1px solid #8b8b8b;*/
}
#footer ul li a {
	display: block;
}
#footer ul.share-box li.last-child {
	border: 0;
}

/*  3-2. Copyright
   ------------------------------- */
#footer #copy {
	position: relative;
	left: 50%;
	clear: both;
	float: left;
	padding: 20px 0;
	text-align: center;
}
#footer #copy p {
	position: relative;
	right: 50%;
   	float: left;
	margin: 0;
}
#footer #copy p.company {
	margin: 0 0 0 5px;
	padding: 0 0 0 5px;
	border-left: 1px solid #8b8b8b;
}

/*  3-3. Footer nav
   ------------------------------- */
#footer-nav .col-right, #footer-nav .col-middle {
	float: left;
	width: 230px;
	margin: 0 0 0 15px;
}
#footer-nav .col-left {
	float: left;
	width: 230px;
}
#footer-nav .col-last {
	float: right;
	width: 230px;
}
#footer-nav dl {
	margin: 0;
	padding: 0 0 15px;
}
#footer-nav dl dt a {
	color: #666;
	font-weight: bold;
}
#footer-nav dl dd ul {
	margin: 0;
}
#footer-nav dl dd ul li {
	padding: 0 0 0 12px;
	background: url(../images/common/icon-link-arrow.gif) no-repeat left 7px;
}


/* ----------------------------------------(=4)
    4. Sub content
   ---------------------------------------- */
#sub ul#sub-nav {
	width: 216px;
	padding: 0 10px;
}
#sub ul#sub-nav li {
	margin: 0 0 10px;
	padding: 3px 0 3px 22px;
	border-bottom: 1px dotted #999;
	background: url(../images/common/icon-circle-arrow.gif) no-repeat left 4px;
	font-weight: bold;
}
#sub ul#sub-nav li ul {
	margin:0;
}
#sub ul#sub-nav li li {
	margin: 0;
	border-bottom: none;
}
#sub ul#sub-nav li a {
	display: block;
	color: #003399;
}
#sub ul#sub-nav li#current a {
	color: #666;	
}
#sub ul#sub-nav li#current li a {
	color: #003399;
}
#sub h5 {
	padding: 205px 0 10px 10px;
}
#sub h5.sub-title-events { background: url(../images/common/sub-events-bg.jpg) no-repeat left top; }
#sub h5.sub-title-newsroom { background: url(../images/common/sub-newsroom-bg.jpg) no-repeat left top; }
#sub h5.sub-title-our-work { background: url(../images/common/sub-our-work-bg.jpg) no-repeat left top; }
#sub h5.sub-title-about-us { background: url(../images/common/sub-about-us-bg.jpg) no-repeat left top; }
#sub h5.sub-title-our-membership { background: url(../images/common/sub-our-membership-bg.jpg) no-repeat left top; }
#sub h5.sub-title-login { background: url(../images/common/sub-login-bg.jpg) no-repeat left top; }
#sub h5.sub-title-contact-us { background: url(../images/common/sub-contact-bg.jpg) no-repeat left top; }
#sub h5.sub-title-template { background: url(../images/common/sub-general-bg.jpg) no-repeat left top; }
#sub h5.sub-title-poll { background: url(../images/common/sub-general-bg.jpg) no-repeat left top; }
#sub h5.sub-title-operator { background: url(../images/common/sub-our-membership-bg.jpg) no-repeat left top; }
#sub h5.sub-title-resource-centre { background: url(../images/common/sub-resource-centre-bg.jpg) no-repeat left top; }

/* ----------------------------------------(=5)
    5. Classes
   ---------------------------------------- */
   
/*  5-1. Hidden nav
   ------------------------------- */
.hidden-nav {
	position: absolute;
    left: -9999px;
    font-size: 1%;
}

/*  5-2. Others
   ------------------------------- */
/* ----- float ----- */
.float-left  { float: left; }
.float-right { float: right; }
.float-left-img  {
	float: left;
	margin: 0 15px 15px 0;
}
.float-right-img {
	float: right;
	margin: 0 0 15px 15px;
}

/* ----- float clear ----- */
.clear-left  { clear: left; }
.clear-right { clear: right; }
.clear-both  { clear: both; }

/* ----- borders ----- */
p.border-bolder {
	height: 1px;
	margin: 0 0 30px;
	padding: 0 0 15px;
	border-bottom: 2px solid #ccc;
}
p.border-bold {
	height: 1px;
	margin: 0 0 30px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ccc;
}
p.border-shadow {
	height: 1px;
	margin: 0 0 20px;
	padding: 0 0 10px;
	background: url(../images/common/separator-670x7.gif) no-repeat left bottom;
}

/* ----- icons ----- */
a.pdf {
	padding-top: 3px;
	padding-right: 20px;
	padding-bottom: 3px;
	background: url(../images/common/icon-pdf.gif) no-repeat right top;	
}

/* ----- list ----- */
ul.list-disc li {
	list-style: disc;
	margin: 0 0 0 18px;
}
dl.list dt {
	font-weight: bold;
}
dl.list dd {
	margin: 0 0 15px;
}
dl.list dd.last-child {
	margin: 0;
}
dl.list dd ul {
	margin: 0
}
dl.list dd ul li {
	list-style: disc;
	margin: 0 0 0 18px;
}

/*  5-3. Media (Flash)
   ------------------------------- */
#flash-hero-box {
	padding: 0 10px 35px;
	background: url(../images/common/hero-home-bg.gif) no-repeat center bottom;
}
#flash-hero-box #flash-hero { vertical-align: bottom; }