/*
Theme Name: I am Brom
Theme URI: http://www.iambrom.com/
Description: The original I am Brom theme.
Version: 1.1
Author: Brom Sulaiman
*/

body{margin:0;background-color:#393939;padding:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:1.2em;color:#222222;}

/* Layout */
#wrapper{background-color:#FFF;padding:10px 0 0 0;}
#header-padding{width:660px;margin:auto;padding:10px 0 0 0;}
#logo{float:left;}
#logo h1{text-indent: -9999px;margin:0;}
#logo a{display:block;width:157px;height:70px;background:url(images/logo.png) no-repeat top;}
#logo a:hover{background:url(images/logo.png) no-repeat bottom;}
#navigation{float:right;letter-spacing:-0.09em;line-height:1.05em;font-size:16px;padding:10px 0 0 0;}
#navigation a{float:left;display:block;color:#393939;text-align:center;text-decoration:none;padding:8px 10px;margin-left:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;-khtml-border-radius:5px;}
#navigation a:hover, #navigation ul .current_page_item a, #navigation ul .current_page_ancestor a, #navigation ul .current_page_parent a{float:left;display:block;color:#FFF;background-color:#d43c3c;text-decoration:none;padding:8px 10px;}
#navigation ul{margin:0;list-style:none;}
#navigation ul li{padding:0;display:inline;}
#content-wrap{width:660px;margin:auto;color:#393939;padding-bottom:20px;background:url(images/content-bg.png) no-repeat bottom center;}
#footer-wrap{width:660px;margin:auto;padding:30px;color:#FFF;}
#top-grey-bar{height:10px;background-color:#393939;}
.clear{clear:both;}

/* Style */
h1, h2, h3, h4, h5{letter-spacing:-0.09em;line-height:0.9em;}
a, a:link{color:#008bbd;text-decoration:none;}
a:hover{text-decoration:underline;}
.hr-spacer-top{width:543px;height:16px;margin:auto;background:url(images/hr-spacer-top.png) no-repeat;}
.hr-spacer-btm{width:543px;height:16px;margin:auto;background:url(images/hr-spacer-btm.png) no-repeat;}
.page-title{font-size:30px;text-align:center;}
.page-title h1{margin:25px 0;}
.blue-hlt{font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;font-weight:normal;color:#008bbd;}
#jump-menu{font-size:17px;text-align:center;background:url(images/jump-menu-bg.png) no-repeat;width:445px;height:28px;color:#FFF;letter-spacing:-0.09em;padding:12px 0 0 0;}
#jump-menu a{color:#FFF;}
#jump-menu ul{list-style:none;margin:0;padding:0;}
#jump-menu ul li{display:inline;}
hr{background:url(images/hr-spacer.png);border: none;height:20px;width:300px;margin:auto;margin-top:20px;margin-bottom:30px;}
.top-link{float:right;font-weight:bold;letter-spacing:-0.09em;}
.top-link a{text-align:center;color:#FFF;font-size:20px;display:block;width:80px;height:27px;text-decoration:none;padding:9px 0 0 0;background:url(images/top-button.png) top no-repeat;}
.top-link a:hover{background:url(images/top-button.png) bottom no-repeat;}
.red-text{color:red;}

/* Homepage */
.splash-buttons{width:380px;margin:auto;font-size:20px;margin-bottom:25px;}
.splash-buttons ul{margin:0;padding:0;list-style:none;}
.splash-buttons ul li{text-align:center;}
.splash-buttons a{display:block;float:left;width:180px;height:11px;background:url(images/large-btn.png) top no-repeat;color:#FFF;text-decoration:none;padding:14px 0;margin:0 5px;}
.splash-buttons a:hover{background:url(images/large-btn.png) bottom no-repeat;}
#photo-wrap{width:620px;margin:auto;margin-top:20px;}
#left-photo{width:288px;height:280px;background:url(images/photo-bg-left.jpg) no-repeat;float:left;}
#right-photo{width:288px;height:280px;background:url(images/photo-bg-right.jpg) no-repeat;float:right;}

/* About */
#left-about{width:330px;float:left;margin:20px 0;font-size:15px;}
#left-about p{margin-top:0;}
.left-about-pad{padding:0 10px;}
#content-about{width:300px;float:right;margin:20px 0;}
#left-about h2, #content-about h2{font-size:25px;margin-top:0;}
#blog-content h3{font-size:22px;}
.bluebullet {list-style-image:url(images/bluebullet.png);}
.redbullet {list-style-image:url(images/redbullet.png);}
.grey-text{color:#929292;}
#blue-bg{background:url(images/blu-bg-lg.png) no-repeat;width:613px;height:29px;margin:auto;color:#FFF;font-size:15px;font-weight:bold;padding:18px 20px;margin-bottom:30px;}
#blue-bg a{color:#FFF;text-decoration:underline;}

/* Work */
#work-wrap{margin:20px 0;}
#work-wrap img{border:none;}
.work-panel-left img:hover, .work-panel-right img:hover, #work-panel-featured img:hover{opacity: .8; 
/* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
#work-panel-featured{display:block;width:592px;height:179px;background:url(images/work-panel-wide.jpg) no-repeat;padding:34px 34px 0 34px;}
.work-panel-left{display:block;width:254px;height:253px;float:left;background:url(images/work-panel-bg.jpg) no-repeat;padding:34px 34px 0 34px;}
.work-panel-right{display:block;width:254px;height:253px;float:right;background:url(images/work-panel-bg.jpg) no-repeat;padding:34px 34px 0 34px;}
.work-project-title{font-weight:bold;color:#393939;letter-spacing:-0.09em;font-size:20px;padding-top:15px;clear:both;}
#left-work{width:381px;float:left;}
#left-work a{color:#FFF;}
#right-work{width:231px;float:right;font-size:13px;line-height:normal;}
#work-wrap h4{font-size:25px;margin:10px 0 0 0;}
#work-wrap h5{font-size:20px;margin-bottom:0;}
#right-work ul{font-size:15px; font-weight:bold;padding-left:20px;}
.work-visit-site{display:block;width:252px;height:19px;background:url(images/visit-site-bg.png) no-repeat;font-size:20px;font-weight:bold;text-align:center;letter-spacing:-0.09em;padding:11px 0;margin:auto;margin-top:20px;}
.work-other-projects{width:119px;height:99px;background:url(images/work-other-projects.png) no-repeat;float:left;margin-right:10px;}
.work-other-projects img{margin:18px 18px 18px 20px;}
#project-wrap{margin:10px 0 30px 0;}
#start-project{text-align:center;}
#start-project a{margin:auto;display:block;height:11px;width:308px;background:url(images/start-project-button.png) top no-repeat;color:#FFF;font-size:20px;padding:13px 0;margin-bottom:30px;}
#start-project a:hover{background:url(images/start-project-button.png) bottom no-repeat;text-decoration:none;}

/* Testimonials */
.quotebox{font-family:Georgia, "Times New Roman", Times, serif; color:#FFF;padding:20px;font-size:18px;line-height:normal;-moz-border-radius: 20px;-khtml-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background:url(images/quotemark-bg.png) #008bbd top left no-repeat;}
.quotebox-btm{height:38px;background:url(images/quotebox-btm.png) right no-repeat;margin-bottom:10px;}

/* Blog */
#blog-wrap{margin:30px 0;}
#blog-content{width:430px;float:left;}
#blog-content h2{font-size:40px;margin:0;}
#blog-sidebar{width:205px;float:right;}
.blog-date{color:#999999;margin:20px 0;letter-spacing:-0.09em;font:20px'helvetica neue',helvetica,arial,verdana,sans-serif;}
.blog-date a{color:#8d8d8d;}
.blog-content{font-size:15px;}
#search-box{width:205px;height:37px;background:url(images/search-holder.png) no-repeat;margin-bottom:10px;}
#feed-box{display:block;width:175px;height:17px;background:url(images/blog-feed-button.png) no-repeat;color:#FFF;font-size:17px;font-weight:bold;letter-spacing:-0.09em;padding:10px 15px;margin-bottom:10px;}
.blog-sidebar-box{margin-bottom:5px;}
.blog-box-top{width:205px;height:25px;background:url(images/blog-sidebox-top.png) no-repeat;}
.blog-box-content{background:url(images/blog-sidebox-bg.png) repeat-y;padding:5px 25px;}
.blog-box-content h2{margin:0;font-size:18px;}
.blog-box-content ul{list-style:none;padding:0;margin:5px 0 0 0;font-size:13px;}
.blog-box-content li{list-style:none;}
.blog-box-content ul li{padding:5px 0;border-bottom:1px solid #d4d4d4;}
.blog-box-btm{width:205px;height:23px;background:url(images/blog-sidebox-btm.png) no-repeat;}

/* Comments */
#commentform h5{margin-bottom:0;}
#commentform p{margin:0;}
#commentlist, #commentlist a{color:#FFF;}
#commentlist ul{list-style:none;padding:0;}
#commentlist p{margin-bottom:0;}
.comment-top{height:15px;width:430px;background:url(images/comment-top.png) no-repeat #008bbd;}
.comment-main{background-color:#008bbd;padding:5px 20px;}
.comment-btm{height:42px;width:430px;background:url(images/comment-bottom.png) no-repeat #008bbd;margin-bottom:10px;}
.avatar-wrap{margin-right:10px;float:left;}
.comment-name{font-size:15px;font-weight:bold;}
.comment-date{font-size:11px;font-weight:bold;margin-top:4px;}
.comment-content{font-size:13px;}
textarea#comment{width:430px;}
input#author, input#email, input#url, textarea#comment{border:none;background-color:#cecece;padding:10px;width:99%;}
input#author:hover, input#email:hover, input#url:hover, textarea#comment:hover{background-color:#dcdcdc;}
input#submit{height:41px;width:190px;background:url(images/post-comment-but.png) no-repeat;border:none;color:#FFF;font-size:16px;margin-top:10px;}

/* Search form */
form#searchform {height:37px;width: 205px;}
form#searchform input#s {font-size:12px;background-color:transparent; border:none; color: #b2b2b2;padding:8px 0 0 15px;width:120px;outline:0 !important;}
input#searchsubmit{padding:5px 0 0 10px;}

/* Contact */
#contact-wrap{margin:30px 0;}
#contact-wrap h3{margin-top:0;}
#contact-wrap h5{margin-bottom:0;}
#left-contact{width:425px;float:left;}
#left-contact p{margin-top:0;}
#right-contact{width:200px;float:right;line-height:normal;}
input.contact-input, textarea.contact-input{border:none;background-color:#cecece;padding:10px;width:99%;}
input.contact-input:hover, textarea.contact-input:hover, input.humanise:hover{background-color:#dcdcdc;}
input.humanise{border:none;background-color:#cecece;padding:10px;width:99%;}
input.contact-submit{border:none;font-size:16px;color:#FFF;background:url(images/nav-bg.png) no-repeat;text-decoration:none;width:80px;height:36px;letter-spacing:-0.09em;}
input.contact-submit:hover{opacity: .8; 
/* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.skype-button a{margin:10px 0;color:#FFF;display:block;width:180px;height:20px;background:url(images/skype-button.png) top no-repeat;font-size:20px;font-weight:bold;letter-spacing:-0.09em;padding:8px 10px;}
.skype-button a:hover{background:url(images/skype-button.png) bottom no-repeat;text-decoration:none;}
.submission-guide{font-size:13px;}
.submission-guide ul{padding-left:10px;}

/* Begin Images */
p img {padding: 0;max-width: 100%;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignright {padding: 4px;margin: 0 0 2px 7px;display: inline;}
img.alignleft {padding: 4px;margin: 0 7px 2px 0;display: inline;}
.alignright {float: right;}
.alignleft {float: left;}

/* Box grid */
.boxgrid{width:226px;height:221px;float:left; background:#161613;overflow: hidden; position: relative;margin:29px;}
.boxgrid h3{margin:0 0 10px 0;color:#FFF;font-size:25px;}
.boxgrid h3 a{color:#FFF;}
.boxgrid img{position: absolute; top: 0; left: 0; border: 0;}
.boxgrid p{padding: 0;color:#afafaf;font-size:10pt; }
.boxcaption{padding:10px;float: left;position: absolute;background: #000;height: 221px; width: 100%; opacity: .8; 
/* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.caption .boxcaption {top: 180px;left: 0;}

/* Footer */
#footer-wrap h4{margin:10px 0;}
#social-wrap{width:300px;float:left;}
#flickr-wrap{width:285px;float:right;}
#twitter-wrap{width:660px;height:48px;background:url(images/twitter-bg.png) no-repeat;margin-bottom:20px;font-size:12px;line-height:normal;}
#twitter-wrap ul{list-style:none;}
.tweet-date{font-size:10px;}
.tweet-text{padding:12px 120px 0 20px;}
#flickr-images img{border:1px solid #FFF;margin:0 10px 10px 0;padding:3px;}
#flickr-images img:hover{border:1px solid #999;opacity: .7; 
/* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
/* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}
#footer-links{letter-spacing:-0.09em;font-size:12px;margin-top:40px;}
#copyright{float:left;}
#links{font-size:17px;float:left;margin-left:120px;}
#links ul{list-style:none;padding:0;margin:0;}
#links ul li{display:inline;}
#top-page{float:right;text-indent:-9999px;}
#top-page a{display:block;height:27px;width:37px;background:url(images/arrow-top.png) no-repeat;}

/* Social links */
#social-wrap ul{list-style:none;margin:0;padding:0;letter-spacing:-0.09em;}
#social-wrap a{padding:13px 15px;color:#FFF;font-size:20px;font-weight:bold;}
#social-wrap a:hover{text-decoration:none;color:#CCC;}
.feed-link a{width:238px;height:18px;display:block;background:url(images/button-feed.png) no-repeat top;}
.feed-link a:hover{background:url(images/button-feed.png) no-repeat bottom;}
.facebook-link a{width:238px;height:18px;display:block;background:url(images/button-facebook.png) no-repeat top;}
.facebook-link a:hover{background:url(images/button-facebook.png) no-repeat bottom;}
.linkedin-link a{width:238px;height:18px;display:block;background:url(images/button-linkedin.png) no-repeat top;}
.linkedin-link a:hover{background:url(images/button-linkedin.png) no-repeat bottom;}
.vimeo-link a{width:238px;height:18px;display:block;background:url(images/button-vimeo.png) no-repeat top;}
.vimeo-link a:hover{background:url(images/button-vimeo.png) no-repeat bottom;}

/* Captions */
.aligncenter,
div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.wp-caption {border: 1px solid #ddd;text-align: center;background-color: #f3f3f3;padding-top: 4px;margin: 10px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 10px;padding: 5px;margin: 0;}

/* Hover tip */
.tipsy{margin-left:10px;padding:5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(images/tipsy.gif); line-height:normal;}
.tipsy-inner{padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner{-moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-west{background-position: left center; }

/*preload classes*/ 
.svw {width: 50px; height: 20px; background: #fff;} 
.svw ul {position: relative; left: -999em;} /*core classes*/ 
.stripViewer { position: relative; overflow: hidden; border: 5px solid #ff0000; margin: 0 0 1px 0; } 
.stripViewer ul { /* this is your UL of images */ margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; } .stripViewer ul li { float:left; } .stripTransmitter { overflow: auto; width: 1%; } 
.stripTransmitter ul { margin: 0; padding: 0; position: relative; list-style-type: none; } 
.stripTransmitter ul li{ width: 20px; float:left; margin: 0 1px 1px 0; } 
.stripTransmitter a{ font: bold 10px Verdana, Arial; text-align: center; line-height: 22px; background: #ff0000; color: #fff; text-decoration: none; display: block; } 
.stripTransmitter a:hover, a.current{ background: #fff; color: #ff0000; } /*tooltips formatting*/ 
.tooltip { padding: 0.5em; background: #fff; color: #000; border: 5px solid #dedede; }