/* ====================================
CSS Credit: http://www.whynot.net.au/
==================================== */

body {
	margin:0px;
	padding:0px;
	color:#555;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:1.5em; 
	background-color:#ffffff;
	background-image: url(images/whynot_body.jpg);
	background-position:top;
	background-repeat:repeat-x;
}


a, a:link, a:visited { color: #0074c5; text-decoration: none; }
a:hover              { color: #0000FF; text-decoration: underline; font-weight: bold; }
p                    { margin: 0px; padding: 0 0 10px 0; }
img                  { border: none; }


h1, h2, h3, h4, h5   { font-weight: normal; }
h1 { font-size: 38px; font-weight:bold; color: #800000; margin: 0 0 30px 0; padding: 0; }
h2 { font-size: 24px; color: #800000; margin: 0 0 20px 0; padding: 0; }
h3 { font-size: 21px; color: #CCC; margin: 0 0 20px 0; padding: 0; }
h4 { font-size: 18px; color: #800000; margin: 0 0 10px 0; padding: 0; }
h5 { font-size: 16px; color: #000; margin: 0 0 10px 0; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0;}


.cleaner     { clear:both; width:100%; height:0px; font-size:0px;  }
.cleaner_h10 { clear:both; width:100%; height:10px; }
.cleaner_h20 { clear:both; width:100%; height:20px; }
.cleaner_h30 { clear:both; width:100%; height:30px; }
.cleaner_h40 { clear:both; width:100%; height:40px; }
.cleaner_h50 { clear:both; width:100%; height:50px; }
.cleaner_h60 { clear:both; width:100%; height:60px; }


.float_l { float: left; }
.float_r { float: right; }


blockquote { font-style: italic; }
cite       { font-weight: bold; }
cite span  { color: #000; } 


.button a { clear: both; display: block; width: 103px; height: 23px; padding: 4px 0 0 0; background: url(images/whynot_button.png) no-repeat;
        	color: #fff; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; }
.button a:hover { background: url(images/whynot_button_hover.png) no-repeat; }


#whynot_header_wrapper                { width: 980px; margin: 0 auto; padding: 0 5px; }
#whynot_header_wrapper_contact_us     { width: 980px; margin: 0 auto; padding: 0 5px; background-image: url(images/whynot_body_contact_us.jpg); }
#whynot_header                        { width: 920px; height: 100px; padding: 0 30px; }
#whynot_header  #site_title           { float: left; width: 400px; padding: 30px 0 0 0; }
#whynot_header  #site_title h1        { margin: 0; padding: 0; }
#whynot_header  #site_title h1 a      { margin: 0px; padding: 0px; font-size: 30px; color: #ffffff; font-weight: bold; text-decoration: none; }
#whynot_header  #site_title h1 a span { display: block; text-align: right; font-size: 18px; color: #CCC; font-weight: bold;	letter-spacing: 3px; line-height:1.5em; }
#whynot_header  #site_title h1 img    { margin: 0; padding: 0; height: 50px; }
#whynot_header #search_box            { float: right; width: 280px; height: 30px; margin-top: 30px; background: url(images/whynot_search.png) no-repeat; }
#search_box form                      { width: 280px; height: 30px; margin: 0; padding: 0; }
#searchfield                          { height: 15px; width: 180px; padding: 5px 5px 5px 5px; margin-right: 0px; color: #bcbcbc; font-size: 12px; 
                                        font-variant: normal; line-height: normal; background: #161b1f; border: 1px solid #0b0e10; }
#searchbutton                         { height: 28px; width: 80px; padding-bottom: 3px; cursor: pointer; font-size: 13px; text-align: 
                                        center; vertical-align: bottom; white-space: pre; color: #333; }



/* =========================================================
      MENU 
============================================================ */
#whynot_menu             { clear: both; height: 39px; padding: 11px 0 0 0; }
#whynot_menu ul          { margin: 0; padding: 0 0 0 30px; list-style: none; }
#whynot_menu ul li       { padding: 0px; margin: 0px; display: inline; }
#whynot_menu ul li a     { position: relative; float: left; width: 103px; display: block; height: 23px; padding: 4px 0 0 0; margin-right: 10px;
                           text-align: center; font-size: 12px; text-decoration: none; color: #21272d; font-weight: bold; outline: none; }
#whynot_menu li a:hover  { color: #fff; background: url(images/whynot_button_hover.png); }
#whynot_menu li .current { color: #fff; background: url(images/whynot_menu_hover.png); }


/* =========================================================
              BANNER - under horizontal menu 
============================================================ */
#whynot_banner       { clear: both; width: 920px; height: 200px; padding: 50px 30px; background: url(images/whynot_banner.jpg) no-repeat; overflow: hidden; }
#whynot_banner h3    { color: #99CCFF; font-size: 35px; padding: 20px 0 0 0; }
#whynot_banner p     { color: #FFFFFF; font-size: 16px; }



/* Content */
#whynot_content_wrapper_outer   { width: 100%; background: url(images/whynot_content_top.jpg) top repeat-x; border-top: 1px solid #004e85; }
#whynot_content_wrapper_inner   { width: 100%; background: url(images/whynot_content_bottom.jpg) bottom repeat-x; border-top: 1px solid #004e85; }
#whynot_content_wrapper         { width: 920px; margin: 0 auto; padding: 30px; }
#whynot_content_wrapper_other   { width: 950px; margin: 0 auto; padding: 0px; }
#whynot_content                 { width: 620px; float: left; }
#whynot_content span            { font-weight:bold; color: #000000; }
#whynot_content_other           { width: 950px; float: left; }


/* Service */
.service_box                             { width: 280px; }
.service_image                           { float: left; width: 64px; margin: 3px 0 0 0; }
.service_box .service_text               { float: right; width: 200px; text-align: justify; }
.services_section                        { clear: both; padding: 15px 0 20px 0; border-top: 1px solid #CCC; background:
                                           url(images/whynot_divider.jpg) bottom repeat-x; }
.services_section h4                     { margin-bottom: 20px; }
.services_section .right                 { float: right; width: 200px; }
.services_section .right img             { }
.services_section .services_content      { clear: both; margin: 0px 0; }
.services_section .services_content span { font-weight:bold; color: #000000; }
.services_section .left                  { float: left; width: 400px; }
.services_section .left img              { float: left; height: 40px; }
.services_section a.hover .left img      { float: left; height: 40px; text-decoration:underline; }
.services_section .left p                { text-align: left; }


/* POST */
.post_section               { clear: both; padding-bottom: 20px; margin-bottom: 0px; border-top: 1px solid #CCC; background: url(images/whynot_divider.jpg) bottom repeat-x; }
.post_section h2            { margin: 0 0 5px 0; padding: 10px 0 5px 0; background: url(images/whynot_header.png) no-repeat bottom left; }
.post_section .post_content { clear: both; margin: 10px 0; }
.post_content .left         { float: left; width: 130px; }
.post_content .left img     { border: 1px solid #CCC; padding: 5px; background: #fff; }
.post_content .right        { float: right; width: 450px; }
.post_section p             { padding-bottom: 5px; margin-bottom: 8px; }
.post_section .comment_tab  { padding: 10px 0; margin: 40px 0 20px 0; border-bottom: 1px dashed #666; font-size: 20px; font-weight: bold; }


/* Affiliate */
#affiliate_content           { width: 820px; float: left; }
.affiliate_section           { clear: both; padding-bottom: 30px; margin-bottom: 0px; border-top: 1px solid #CCC; }
.affiliate_section h2        { margin: 0 0 5px 0; padding: 10px 0 5px 0; }
.affiliate_content .left     { float: left; width: 130px; }
.affiliate_content .left img { padding: 15px 0 0 30px; }
.affiliate_content .right    { float: right; width: 550px; }
.affiliate_section p         { padding-bottom: 5px; margin-bottom: 8px; }



#recent_project {
		width: 620px;
}

#recent_project ul {
        list-style: none;
        margin: 0;
        padding: 0; 
}

#recent_project ul li {
		float: left;
		display: inline; 
		width: 270px;
		padding: 6px;
		margin: 0 25px 25px 0;
		background: #f1f2ea;
		border: 1px solid #d5d7ca;
}

#recent_project ul img {
		width: 270px;
		height: 130px;
		border: none;
		margin-bottom: 5px;
}


/* gallery */
#gallery               { width: 620px; }
#gallery ul            { list-style: none; margin: 0; padding: 0; }
#gallery ul li         { float: left; display: inline; width: 270px; padding: 6px; 
                          margin: 0 20px 20px 0; background: #f1f2ea; border: 1px solid #d5d7ca; }
#gallery ul img        { width: 270px; height: 130px; border: none; margin-bottom: 5px; }


/* GALLERY OTHER WHYNOTs ======================================== */
#gallery_other_whynots         { width: 920px; }
#gallery_other_whynots ul      { list-style: none; margin: 0; padding: 0; }
#gallery_other_whynots ul li   { float: left; display: inline; width: 270px; padding: 6px; margin: 0 15px 20px 0; background: #e0e0e0; border: 1px solid #c9c9c9; }
#gallery_other_whynots ul li p { padding: 0 0 0px 0; }
#gallery_other_whynots ul img  { width: 270px; height: 200px; border: none; margin-bottom: 5px; }


/* CONTACT FORM ================================================*/
#contact_form                   { float: left; width: 500px; padding: 0px 0 0 0; }
#contact_form form              { margin: 0px; border:1px solid #e2d1be; padding: 10px 15px 40px 15px; }
#contact_form form label        { display: block; margin-left: 0px; font-size: 13px; color: #800818; }
#contact_form form .input_field { height: 16px; width: 250px; font-weight:bold; }
#contact_form form textarea     { width: 220px; height: 100px; margin: 0 0 15px 0; font-weight:bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
#contact_form form .submit_btn  { float: left; margin-right: 50px; width: 103px; height: 27px; padding: 0px 0 0 0; text-align: center; cursor: pointer;
                                  border: none; color: #fff; background: url(images/whynot_button.png) no-repeat; }
#contact_form form .submit_btn:hover  { float: left; margin-right: 50px; width: 103px; height: 27px; padding: 0px 0 0 0; text-align: center; cursor: pointer;
                                  border: none; color: #fff; background: url(images/whynot_button_hover.png) no-repeat; }
                                  
                                  
/* sidebar */
#whynot_sidebar                  { float: right; width: 240px; }
.section_rss_twitter             { width: 240px; margin-top: 20px; 	margin-bottom: 120px; }
#sidebar_featured_project        { margin: 0 0 40px 0; padding: 0; }
#sidebar_featured_project .left  { float: left; width: 64px; }
#sidebar_featured_project .right { float: right; width: 170px; }
#sidebar_featured_project h6 a   { color: #fff; }
#news_section                    { margin: 0 0 40px 0; padding: 0; }
.news_section h2                 { font-weight: bold; color:#000000; }
.news_box a                      { font-weight: normal; text-decoration: underline; }
.news_box                        { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #CCC; }

.rss_twitter a       { display:block; width:240px;  color:#333; padding:20px 0 0 0; margin-bottom:40px; font-size:24px; font-weight:bold; text-decoration: none; }
.rss_twitter a:hover { text-decoration: none; }
.rss_twitter a span  { font-size: 15px; margin-top: 5px; display: block; letter-spacing: 5px; }
.rss a               { background: url(images/rss.png) right bottom no-repeat; }
.twitter a           { background: url(images/twitter.png) right bottom no-repeat; }
.linkedin a          { background: url(images/linkedin.png) right bottom no-repeat; }
.aboutme a           { background: url(images/aboutme.png) right bottom no-repeat; }



/* footer */
#whynot_footer_wrapper      { clear: both; width: 100%; background: #005590 url(images/whynot_footer.jpg) repeat-x top; }
#whynot_footer              { clear: both; width: 940px; padding: 20px 30px; margin: 0 auto; text-align: center; color: #FFFFFF; }
#whynot_footer a            { color: #dddddd; font-weight: normal; text-decoration: underline; }
#whynot_footer p            { color: #a0a0a0; font-weight: normal; }
#whynot_footer a:hover      { color: #33CCFF; }
#whynot_footer .footer_menu { margin: 0 0 10px 0; padding: 0px; list-style: none; }
.footer_menu li             { margin: 0px; padding: 0 20px 0 0; display: inline; }
.footer_menu li a           { color: #ffffff; }
.footer_menu .last_menu     { border: none; }


/* breadcrumbs
#Whynot_breadcrumbs_wrapper { width: 100%; height: 0px; background-color: inherit; }
#Whynot_breadcrumbs_content { width: 930px; margin: 0px auto; background-color: inherit; padding: 50px 0 0 490px; }
#breadcrumbs ul, li         { list-style-type:none; padding: 0; margin: 0; }
#breadcrumbs                { background-color: inherit; line-height: 25px; overflow:auto; font-size:10px; }
#breadcrumbs li             { float:left; color: #d8d3bd;}
#breadcrumbs li a           { padding: 0 10px 0px 0; }
#breadcrumbs li a:link, #breadcrumbs li a:visited { text-decoration:none; color:#999999; }
#breadcrumbs li a:hover, #breadcrumbs li a:focus  { color:#1371E7; font-weight:bold; text-decoration:underline; }
*/

/* top row */
#Whynot_top_row_wrapper          { width: 100%; height: 300px; clear: both; background: url(images/whynot_content_bottom.jpg) bottom repeat-x; }
/******* 23-Aug-2017 ... changed WHYNOT_TOP_ROW from width=930px to accomodate 2x2 rol/col instead of 1x3 row/co *******/
/******* 9 May-2018  ... changed WHYNOT_TOP_ROW back to width=930px to accomodate 1x3 row/col for StrataWorX, Media, PerfectDiagram *******/
#Whynot_top_row                  { width: 930px; margin: 0 auto; padding: 0 0px 0 0px; }
#Whynot_top_row p                { color: #777270; }
#Whynot_top_row .top_row_box     { width: 260px; height: 250px; overflow: hidden; float: left; padding: 35px 20px 10px 30px; }
#Whynot_top_row .last            { width: 260px; height: 140px; overflow: hidden; float: left; padding: 35px 20px 10px 30px; background: none; }
/* turned off to enable various image heights
#Whynot_top_row .top_row_box img { height: 35px; }
*/