/**********************************************************************************************
	Main Sections in CSS:
	
	1.	BASIC ELEMENTS
		Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
	
	2.	LAYOUT
		Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
		
	3.	PAGE COMMON STYLES
		Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
	
	4.	PAGE SPECIFIC STYLES
		Define content styles that are specific to a particular page
	
***********************************************************************************************/


/* import core styles */
@import url(base.css);


/*------------------------------------------
// 1.BASIC ELEMENTS
//	 Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
//------------------------------------------*/
body { color:#000; font-family: Arial, Helvetica, sans-serif; background:#fafafa;}
h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; }


/*------------------------------------------
// 2.LAYOUT
//   Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
//------------------------------------------*/
	
/*---- Container ----*/
div#container { width:100%; margin:0 auto;}

/*---- Header ----*/
div#header { padding:3px 0px 7px 0px; border-bottom:1px dashed #d8d8d8;}

/*---- Main Navigation ----*/
div#main-navigation {padding:0px; margin-left:-6px; position:relative;}

/*---- Content ----*/
div#content { padding:50px 0px 34px 0px;}

/*---- Main ----*/
div#main { float:left; width:780px;}

/*---- Sidebar ----*/
div#sidebar { float:left; width:150px; padding-top:23px}

/*---- Footer ----*/
div#footer {padding:26px 10px; border-top:1px dashed #d8d8d8;}


/*------------------------------------------
// 3. PAGE COMMON STYLES
//	  Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
//------------------------------------------*/

/*---- Header - Logo ----*/
div#header div.logo{ float:left; padding-top:15px;}
div#header div.logo h1 a { position:relative; width:265px; height:0px; display:block; background:url(../images/theme/header/logo.jpg) 0 0 no-repeat; padding-top:120px; overflow:hidden;}


/*---- Main Navigation ----*/
div#main-navigation { width:120px;}
div#main-navigation ul li{list-style:none; margin-bottom:1px;}
div#main-navigation ul li a {text-decoration:none; font-size:130%; color:#333333; padding:0px 0px 0px 15px; margin-right:5px; display:block; height:36px; line-height:36px; text-transform:uppercase; }
div#main-navigation ul li a:hover{ color:#FFF; background:url(../images/theme/navigation/navigation-menu-hover.png) no-repeat left top;}
div#main-navigation ul li a span{ position:relative; padding:8px 14px 8px 0px; line-height:20px; display:block;}
div#main-navigation ul li a:hover span{background:url(../images/theme/navigation/navigation-menu-hover.png) no-repeat right bottom;}

div#main-navigation ul li.active a{ color:#FFF; background:url(../images/theme/navigation/navigation-menu-hover.png) no-repeat left top;}
div#main-navigation ul li.active a span{background:url(../images/theme/navigation/navigation-menu-hover.png) no-repeat right bottom; line-height:20px;}

div#main-navigation ul li ul.child{margin-left:10px; display:block; padding-top:5px;}
div#main-navigation ul li ul.child li{margin-bottom:0px; list-style:none; font-size:100%; line-height:24px;}
div#main-navigation ul li ul.child li a{color:#a7a9ac; text-decoration:none; background:none; height:25px; line-height:25px; font-size:110%;}
div#main-navigation ul li ul.child li a:hover, div#main-navigation ul li ul.child li.active a{color:#5c03c0; background:none;}

/*---- Post ---*/
div.post h1 { font-size:280%; margin-bottom:10px;}
div.post h2 { font-size:320%; margin-bottom:18px; color:#5c03c0; line-height:20px; text-transform:uppercase; font-weight:700;}
div.post h3 { font-size:260%; margin-bottom:11px; line-height:18px; text-transform:uppercase;}
div.post h4 { font-size:200%; margin-bottom:12px; line-height:18px; text-transform:uppercase;}
div.post h5 { font-size:120%; margin-bottom:10px; color:#5c03c0; line-height:20px; font-weight:normal; text-transform:uppercase;}
div.post h6 { font-size:180%; margin-bottom:10px;}

div.post p { color:#717171; line-height:20px; font-size:120%; margin-bottom:12px; display:block; text-transform:uppercase; }
div.post p a { color:#000; }

div.post blockquote { margin-bottom:20px; }
div.post blockquote p{ margin-bottom:18px;}
div.post blockquote p cite{text-align:right; display:block; font-style:normal;}

div.post div.frame { text-align:center;}
div.post div.frame p { color:#000;}

div.post img { max-width:100%; }
div.post img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;}
div.post img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;}
div.post img.aligncenter{ display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;}

div.post ul { margin:0 0 20px 14px; list-style:disc; }
div.post ol { margin:0 0 20px 18px; list-style:decimal; }
div.post li { line-height:1.2em; font-size:120%;}
div.post li ul, div.post li ol { margin-bottom:0px; } 
div.post li li, div.post li p { font-size:100%; margin-bottom:0px; }

/*---- Post - Custom Lists ---*/
div.post ul.list1 { margin:0; padding-left:20px; }
div.post ul.list1 li { margin:0; padding:0; background:url(../images/theme/icons/arrow1.gif) top left no-repeat; padding-left:20px; color:#5b4199; line-height:16px; list-style:none; margin-bottom:10px; text-transform:uppercase; }

div.post ul.list2 {margin:0; padding:0; }
div.post ul.list2 li { padding:0px 0px 5px 20px; background:url(../images/theme/icons/arrow1.gif) no-repeat center left; border-bottom:1px dashed #d8d8d8; list-style:none; line-height:25px; text-align:left;}
div.post ul.list2 li.outermost{ border:none;}

div.post ul.list3{ margin:0px; padding:0px;}
div.post ul.list3 li{ list-style:none; margin-bottom:5px;}
div.post ul.list3 li img{margin:0px 5px 5px 0px;}

div.post ul.list4{ margin:0px; padding:0px;}
div.post ul.list4 li{ list-style:none; margin-bottom:20px;}
div.post ul.list4 li h5{color:#717171; line-height:20px; font-size:120%; text-decoration:underline; margin-bottom:0px;}

/*---- Footer - Navigation ---*/
div#footer div#footer-navigation { text-align:center; }
div#footer p{ text-align:right; color:#a7a9ac; margin:0px; font-size:120%; line-height:24px;}
div#footer p a{color:#a7a9ac; margin-left:5px; }
div#footer p span { color:#333333; margin-right:5px; }

/*---- wrapper ----*/
div.wrapper { width:940px; margin:0px auto;}


/*---- Form ---*/
div.form ul{ margin:0px; padding:0px;}
div.form ul li { margin-bottom:5px; color:#717171; font-size:120%; display:block; list-style:none;}
div.form ul li label{ display:block; margin-bottom:5px;}
div.form ul li input.textbox{ display:block; color:#717171; font-size:100%; border:1px solid #a7a9ac; padding:1px; position:relative; background:#fefefe; width:100%; height:20px; line-height:21px;}
div.form ul li input.submit-btn{ background:#e2e2e2; border:1px solid #d9d8d8; font-size:100%; line-height:20px; color:#333333; width:40px; cursor:pointer;}
div.form ul li textarea.textarea { overflow:auto; border:0px; color:#717171; font-size:120%; border:1px solid #a7a9ac; position:relative; background:#fefefe; width:98%; padding:3px; height:88px; width:171px; max-height:88px; max-width:171px;}


/*---- Box ----*/
div.box1{ background:url(../images/theme/content/main/box1-middle-bg.jpg) repeat-y;}
div.box1 div.box1-top{ background:url(../images/theme/content/main/box1-top-bg.jpg) no-repeat left top;}
div.box1 div.box1-top div.box1-bottom{ background:url(../images/theme/content/main/box1-bottom-bg.jpg) no-repeat left bottom;}
div.box1 div.box1-top div.box1-bottom div.column1{ width:427px; padding:12px 16px; float:left}
div.box1 div.box1-top div.box1-bottom div.column2{ width:279px; padding:12px 22px 16px 0; float:right;}

div.box2{ background:url(../images/theme/content/main/box2-middle-bg.jpg) repeat-y;}
div.box2 div.box2-top{ background:url(../images/theme/content/main/box2-top-bg.jpg) no-repeat left top;}
div.box2 div.box2-top div.box2-bottom{ background:url(../images/theme/content/main/box2-bottom-bg.jpg) no-repeat left bottom;}
div.box2 div.box2-top div.box2-bottom div.column1{ width:355px; padding:12px 16px; float:left}
div.box2 div.box2-top div.box2-bottom div.column2{ width:355px; padding:12px 16px; float:right;}

div.box3{ background:url(../images/theme/content/main/box3-middle-bg.jpg) repeat-y;}
div.box3 div.box3-top{ background:url(../images/theme/content/main/box3-top-bg.jpg) no-repeat left top;}
div.box3 div.box3-top div.box3-bottom{ background:url(../images/theme/content/main/box3-bottom-bg.jpg) no-repeat left bottom;}
div.box3 div.box3-top div.box3-bottom div.column1{ width:290px; padding:12px 16px; float:left}
div.box3 div.box3-top div.box3-bottom div.column2{ width:420px; padding:12px 16px; float:right;}


div.box4{ background:url(../images/theme/content/main/box4-middle-bg.jpg) repeat-y;}
div.box4 div.box4-top{ background:url(../images/theme/content/main/box4-top-bg.jpg) no-repeat left top;}
div.box4 div.box4-top div.box4-bottom{ background:url(../images/theme/content/main/box4-bottom-bg.jpg) no-repeat left bottom; padding:30px 20px;}


/*---- sociable ----*/
div.sociable{ float:right; padding-top:112px;}
div.sociable p.twitter {background:url(../images/theme/icons/twitter-icon.jpg) no-repeat center left; color:#d8d8d8; font-size:120%; line-height:20px; padding-left:36px;}
div.sociable p a{ color:#333333; text-decoration:none;}
div.sociable p a:hover{color:#5c03c0; text-decoration:none;}

/*---- Buttons ----*/
a.more-lnk1 { background:url(../images/theme/icons/arrow1.gif) no-repeat center left; padding-left:20px; margin:0px 0px 10px 60px; color:#5c03c0; line-height:20px; display:block; font-size:120%;}
a.more-lnk1:hover{text-decoration:none;color:#000; }

a.more-lnk2 { background:url(../images/theme/icons/arrow1.gif) no-repeat center left; padding-left:20px; margin:0px 0px 10px 150px; color:#000; line-height:20px; display:block; font-size:120%;}
a.more-lnk2:hover{color:#5c03c0; text-decoration:none;}


/*------------------------------------------
// 4.1  INDEX PAGE SPECIFIC STYLES
//------------------------------------------*/
div#content div.flash-area {padding:196px 0px 235px 0px;}
div#content div.flash-area p { text-align:center; padding-left:38px;  font-size:360%;  color:#5c03c0;  }
div#content div.flash-area p a{ line-height:20px; color:#5c03c0; text-decoration:none;}

/*------------------------------------------
// 4.2  CONTACT PAGE SPECIFIC STYLES
//------------------------------------------*/

/*---- Location-Map ----*/
div#location-map{ margin-bottom:64px; padding-top:30px;}
div#location-map p { padding-top:16px; margin-bottom:0px;}
div#location-map p a{ color:#717171; text-decoration:none;}
div#location-map p a:hover{text-decoration:underline;}
div#location-map img{ float:right; margin:0px 0px 0px 10px;}

/*---- Contact-form ----*/
div#contact-form {padding-top:5px;}
div#contact-form ul li {width:175px;}

/*------------------------------------------
// 4.3  SOLUTIONS PAGE SPECIFIC STYLES
//------------------------------------------*/

div#solution div.post{ margin-bottom:30px;}
div#solution div.post h3{ text-align:center;}
div#solution div.post h3 a{color:#000; text-decoration:none; font-size:100%;}
div#solution div.post h3 a:hover {color:#5c03c0;}

/*------------------------------------------
// 4.4  AGENCES PAGE SPECIFIC STYLES
//------------------------------------------*/
div.presentation img{ margin-bottom:30px;}
div.post ul.list2 li a{ color:#5c03c0; text-decoration:none; font-size:100%; padding-top:5px; display:block; text-transform:uppercase;}
div.post ul.list2 li a:hover{ color:#000;}

/*------------------------------------------
// 4.5  CLIENT PAGE SPECIFIC STYLES
//------------------------------------------*/
div.clients{ padding-top:20px;}
div.clients img{ margin:0 auto 30px; display:block;}


/*------------------------------------------
// 4.6  NEWS AND EVENTS PAGE SPECIFIC STYLES
//------------------------------------------*/
div.post ul.list3 div.description{ float:right; width:265px;}
div.post ul.list3 div.description h5 { font-size:100%;}
div.post ul.list3 div.description p{ margin-bottom:10px;}