@import "../colorbox/colorbox.css";

/*

	Rock & Load Studio

/*****Reset*****/
body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td 
								{margin:0;padding:0;}
table 							{border-collapse:collapse;border-spacing:0;}
fieldset,img 					{border:0;}
address,caption,cite,code,dfn,
th,var 				{font-style:normal;font-weight:normal;}
ol,ul 							{list-style:none;}
caption,th 						{text-align:left;}
h1,h2,h3,h4,h5,h6 				{font-size:100%;}
q:before,q:after 				{content:'';}
abbr,acronym 					{border:0;}






/*****Global*****/
body			{font-family: Arial, Helvetica, sans-serif; background:url(../images/bg.png) repeat-x 0 0; color: #666; position: relative;}
#wrap			{width: 946px; margin: 0 auto;}
h1, h2, h3, h4	{font-weight: normal; color: #6B6B6B; font-size: 26px;}
input			{color: #6B6B6B;}
.red			{color: #CC3300;}
a				{color: #00446C; text-decoration: none;}
a:hover			{text-decoration: underline;}
a:focus			{text-decoration: underline;}
label			{font-size: 14px; color: #6B6B6B;}
#submit			{color: #00446C; font-size: 12px; font-family: Arial, Helvetica, sans-serif; clear: both;}
.clear			{clear: both; display: block;}
.rounded, 
.rounded-bottom	{border: 1px solid #d9d9d9; background: #fff; position: relative;}
.success		{color: #006633;}
.warning		{color: #CC0000;}


/*****Page Global*****/
#page-header	{background: url(../images/header-holder.jpg) 0 0 no-repeat; width:946px; height:78px; position: relative; margin-bottom: 30px;}
#page-header h2	{font-size: 12px; color: #6B6B6B; position: absolute; top: 20px; left: 20px;}
#page-header p	{font-size: 24px; color: #00446C; position: absolute; top: 33px; left: 20px;}

/*****Template*****/
#logo			{background: url(../images/logo2.png) 0 0 no-repeat; width:350px; height: 89px; display: block; text-indent: -9999px; position: absolute; top: 40px; left: 0;}
#header			{background: url(../images/sprite2.png) no-repeat 0 0; width: 946px; height: 123px; position: relative; margin-bottom: 30px;}
#header a		{font-size: 12px;}
#header label	{color: #6B6B6B; font-size: 12px;}
#nav			{position: absolute; bottom: 6px; right: 0; }
#nav li			{float: left; margin: 0 22px; height: 25px; position: relative;  padding-top: 10px;}
#nav .nav_last		{margin-right: 0px;}
#nav li:hover	{background: url(../images/nav_arrow.gif) 50% 0 no-repeat;}
#nav li a:hover	{text-decoration: none;}


#client-area	{position: absolute; top: 5px; left: 786px;}
#client-area li	{display: block; float: left; width: 75px; text-align: center;}
.first			{border-right: solid 1px #ccc;}


#in-touch		{position: relative; left: 421px; top: 9px; background: url(../images/arrow_right.gif) no-repeat 100% 50%; width: 76px; display: block; text-align: center; padding-right: 17px}

/*****Homepage*****/
#slide-show-title{width: 926px; height: 20px; background: url(../images/sprite2.png) no-repeat 0 -419px; color: #484848; text-transform: uppercase; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; padding: 9px 0 0 20px; position: relative;}
#slide-show-title ul{position: absolute; right: 20px; top: 2px;}
#slide-show-title li{float: left; margin-left: 10px;}
.slide-button	{width: 16px; height: 19px; display: block; background:url(../images/circle.png) no-repeat 0 0; padding: 6px 0 0 9px;}
#slide-show		{width: 940px; height:290px; overflow: hidden; border: 1px solid #D9D9D9; position: relative; left: 2px;}
#intro			{width: 946px; height: 164px; background: url(../images/sprite2.png) no-repeat 0 -448px; margin-bottom: 20px;}
#intro h1		{color: #00446D; font-size: 24px; width: 900px; margin: 0 auto; margin-bottom: 20px; padding-top: 30px; }
#intro p		{color: #6B6B6B; font-size: 18px; width: 900px; margin: 0 auto;}

/* Login */
#login				{background: url(../images/login_box.gif) no-repeat 0 0; width: 357px; height: 236px; margin: 0 auto; padding: 0px 50px; margin-top: 150px; position: relative;}
#login form			{padding-top: 30px;}
#remember_p			{float: left; font-size: 11px;}
#login_form_submit	{float: right;}
#remember			{margin-right: 5px; float: left;}
#loginForm #password,
#loginForm #email 	{width: 260px; margin-bottom: 10px;}
#password			{margin-bottom: 42px;}
#login form label	{display: block; width: 92px;  float:left;}
#login form legend	{font-size: 26px; margin-bottom: 22px; position: relative;}
#goback_link		{position: absolute; left: 2px; top: -18px; font-size: 12px;}
#lostpw_link		{position: absolute;  font-size: 12px; bottom: -18px; right: 0px;}


/*****About*****/
#about				{margin-bottom: 30px; position:relative; padding-top: 25px;}
#about p			{padding: 0 20px 20px; font-size: 16px;}
#about p a			{font-style: italic;}
#about img			{float: left; margin: 0 15px 12px 0; margin-left: 20px;}
#about span			{font-size: 14px; color: #ccc; margin-bottom: 20px; display: block;}
#newsletter-box		{background: url(../images/holder.png) no-repeat 0 0; width: 336px; height: 346px; position: absolute; right: 20px;}
.about-p			{width: 545px; font-size: 14px;}
#newsletter-box img	{margin: 1px 20px 20px; float: left;}
#newsletter-box h2	{padding:20px 0 20px 20px;}
#newsletter-box p	{font-size: 12px; clear: both; line-height: 16px;}

#newsletterForm		{position: relative; padding: 0 20px; height: 187px;}
#newsletterForm p	{padding: 0px;}
#newsletterForm label{display: block; width: 95px; float: left;}
#newsletterForm #name,
#newsletterForm #email{width: 192px; float: right; margin-bottom: 10px;}
#newsletterForm #submit{float: right; position: absolute; bottom: 20px; right: 20px;}
.input-group label	{display: inline; width:30px; float: none;}
.input-group ul		{text-align: center; margin-bottom: 20px;}
.input-group li		{display: inline; margin: 0 8px;}



#about-content		{width: 563px; line-height: 25px;}

#rss-text			{position: absolute; bottom: -50px; right: -50px; width:390px; text-align:center;}
#rss-text img		{float: none; margin: 0;}


/*****Portfolio*****/
.portfolio-entry	{width: 460px; border-top: 1px solid #ccc; float: left; padding-top: 30px; position: relative;}
.portfolio-entry ul	{font-size: 12px; color: #333; line-height: 24px;}
.portfolio-entry span{color: #999;}
.portfolio-entry h3	{color: #00446C;}
.portfolio-entry small{margin-bottom: 300px; display: block;}
.port-img			{width: 483px; height:282px; background: url(../images/portfolio-holder.png) no-repeat 0 0; position: absolute; top: 90px; left: -11px;}
.port-img img		{position: relative; top: 24px; left: 41px; }
.bottom-link		{text-align: right; display: block; font-size:12px; text-decoration: underline; margin: 40px 0;background: url(../images/arrow_up.gif) no-repeat 100% 50%; padding-right: 24px;}

#testimonial		{background: url(../images/sprite2.png) 0 -123px; width:946px; height: 296px; margin-bottom: 40px; clear: both;}
#testimonial h4		{padding: 20px;}
#testimonial img	{float: left; margin: 0 20px;}
#testimonial blockquote{clear: both; font-size:24px; padding: 0 20px; padding-top: 10px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif}
#quote				{font-size: 18px; color: #999; font-style: italic; display: block; text-align: right; padding: 0 20px;}


/* Services */
#accordion			{margin-bottom: 40px;}
#accordion h3		{background: url(../images/toggle_var.png) no-repeat 0 0; width: 944px; height: 37px; cursor: pointer;}
#accordion h3:hover	{background-position: 0 -37px;}
#accordion a		{font-size: 18px; padding: 4px 0 0 10px;}
#accordion div		{padding: 0 20px;}

#accordion img		{float: left; margin: 50px;}
#accordion div h1	{color: #00446C; font-size: 36px; margin: 50px 0 20px 0;}
#accordion div p	{font-size: 18px; margin-bottom: 20px; color: #999}
#accordion div a	{padding: 0;}


/* Resume */
#resume				{margin-bottom: 30px; position:relative; width: 920px; height: 500px;}


/*****Contact*****/
#contact			{margin-bottom: 30px; position:relative; width: 920px; height: 500px;}
.contact-p			{width: 200px; padding: 0 20px; font-size: 12px;}
#contact-box		{margin: 40px 0 0 20px; width: 210px;}
#contact-box li		{height: 60px; border-top: 1px solid #ccc; font-size: 12px; padding-top: 20px;}
#contact-box li:hover{background: #E8F7FF}
.lastcontact-box	{border-bottom: 1px solid #ccc;}

#contact-box span	{text-indent: -9999px; display: block; width: 44px; height: 44px; float: left; margin-right: 10px;}
#s-contact			{background: url(../images/social-icons.png) no-repeat 0 0;}
#s-skype			{background: url(../images/social-icons.png) no-repeat 0 -44px;}
#s-linkedin			{background: url(../images/social-icons.png) no-repeat 0 -88px;}
#s-twitter			{background: url(../images/social-icons.png) no-repeat 0 -132px;}
#s-facebook			{background: url(../images/social-icons.png) no-repeat 0 -176px;}		

#contact-form		{background: url(../images/big_holder.png) no-repeat 0 0; width: 923px; height: 493px; position: absolute; left: 254px; top: -14px;}
#contact-form img	{margin: 0 20px; float: left;}
#contact-form form	{padding: 0 20px;  clear: both; position: relative;  width: 700px; height: 430px;}
#contact-form h2	{padding: 15px 15px;}
#contact-form p		{padding: 15px;}
#contact-form fieldset	{width: 280px; border: 1px solid #ccc; padding: 15px; float: left; margin-right: 21px;}
#contact-form label	{width: 120px; float: left;}
#contact-form input, #contact-form select{margin-bottom: 10px; width: 150px;}
#enquiry-box		{clear: both; padding: 10px 0; width: 647px;}
#enquiry			{width: 611px; height: 164px;}
#error-message		{background: #ffcccc; border:1px solid #cc3300; font-size: 12px; color: #CC3300; position:relative; top: -15px; margin-bottom: 15px; padding: 10px 30px; font-weight: bold;}
#success-message	{background: #99CC99; border:1px solid #006633; font-size: 12px; color: #006633; position:relative; top: -15px; margin-bottom: 15px; padding: 10px 30px; font-weight: bold;}
.error				{font-size: 12px; color: #CC3300;}
#contact-submit		{position: absolute; bottom: 1px; left: 516px;}


/*****Pre-Footer*****/
#pre-footer		{background: url(../images/sprite2.png) 0 -123px; width:946px; height: 296px; margin-bottom: 40px; position: relative;}
#pre-footer img	{float: left; margin: 0 5px 10px 0;}
#pre-footer h4	{position: relative; top: 21px; font-size:24px; letter-spacing: -1px;}
#pre-footer p	{clear: left; margin-bottom: 10px;}
#pre-footer a	{font-size: 14px; display: block; background: url(../images/arrow_right.gif) 100% 50% no-repeat; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 20px; padding-top: 5px;  position: absolute; bottom: 2px; width: 281px;}
#pre-footer a:hover	{text-decoration: none; background-color: #dde6e8; }
.pre-foot-box		{width: 200px; float: left; width: 275px; padding: 0 20px; height: 286px; position: relative;}
.pre-foot-box p		{font-size: 12px; margin-bottom: 20px;}

/*****Footer*****/
.foot-box					{float: left; width: 275px; padding: 0 20px; margin-bottom: 20px; position: relative;}
.foot-box h4				{margin-bottom: 20px;}
.foot-box p					{font-size: 12px; margin-bottom: 20px;}

#testimonials 				{position: relative; text-indent: 30px; font-size: 14px; line-height: 18px; margin: 20px 0 30px 0;font-family: Georgia,"Times New Roman",Times,serif; font-style: italic; line-height: 25px; display: block;}
#testimonials div			{position: absolute; color: #ccc; font-size: 36px; font-family: "Trebuchet MS"; display: block;}
#testimonials .left			{top: 0px; left: -32px;}
#testimonials .right		{bottom: -13px; right: 0px;}
#testimon_owner				{text-align: right; font-style: italic; padding: 10px 0; color: #b5b5b5;  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

#service-links a			{border-top: 1px solid #ccc; height: 25px; display: block;  background: url(../images/arrow_right.gif) 100% 50% no-repeat; padding-top: 5px;}
#service-links a:hover		{background-color: #E8F7FF; text-decoration: none;}



.foot-last		{border-bottom: 1px solid #ccc;}


#footer			{clear: both; border-top: 1px solid #ccc; padding-top: 10px; position: relative; height: 150px; font-size: 10px}
#footer-nav1	{margin-bottom: 104px;}
#footer-nav1 li	{display: inline; margin-right: 30px;}
#footer-nav2	{position: absolute; top: 10px; right: 0;}
#footer-nav2 li {width: 100px; display: inline; padding: 0 12px;}
#footer-contact	{position: absolute; bottom: 22px; right: 0; text-align: right;}


/*****Market*****/
.market				{border: 2px solid #ccc; padding: 20px 40px; margin: 40px 0; position: relative;}
.market ul			{font-size: 12px;}
.market-services	{float: right; width: 250px;}
.edit-link			{color: #CC0000; font-size: 12px;}
.market label		{display: block; margin-top: 20px;}

.market-strength	{width: 300px; margin-top: 20px;}
.market-weekness	{width: 300px; margin-top: 20px;}