/* ----- Master Style Sheet for OPS Partnership ----- */
/* ----- Author: Mang Creative - 0845 33 12 987  ----- */
/* ----- Year : 2011 ----------------- */
/* ----- Comment : All rights reserved by Mang Creative ----------------- */
/* ----- CSS Document -----*/

body { background: #fff; font: 70%/140% Arial, Helvetica, Verdana, Tahoma, sans-serif; margin: 0px auto; text-align: center; overflow-y: scroll; }
#wrapper { position: relative; margin-right: auto; margin-left: auto; width: 980px; text-align: left; }
#container { position:relative; margin-bottom: 1.5em; height: auto; }
img { border: 0; }

/************** header styles *****************/

#header { width: 100%; height: 110px; margin: 5px 0 0 0; }
#header-left {width: 320px; float: left; }
#header-right { width: 580px; float: right; margin: 25px 20px 0 0; right: 5px; text-align: right;  }
.header-table { float: right; }
.header-logo { margin: 0 auto; }
.header-text { color: #000; font-size: 110%; }

#header-images { width: 100%; }
.header-images-left { margin: 20px 0 20px 15px; float: left; }
.header-images-right { margin: 10px 0; float: right; }

/************** breadcrumb styles *****************/

div#breadcrumb { width: 100%; height: 20px; color:#999; margin: 2px 0; font-size: 9px; margin-left: -35px; }
div#breadcrumb li a { font-size: 11px; color:#999; text-decoration:none; margin: 0 5px 0 5px; }

#breadcrumb { width: 100%; list-style: none; padding: 0; margin: 0; }
#breadcrumb li { display: inline; padding: 0; margin: 0; }
#breadcrumb li:before { content: "> "; }
#breadcrumb li:first-child:before { content: ""; }

* html #breadcrumb li { background-image: url("images/gt.gif"); background-repeat: no-repeat; background-position: 0 50%; padding: 0 0.5em 0 1em; margin: 0 1em 0 -1em; }
* html #breadcrumb { height: 1%; }
* html #breadcrumb li { display: block; float: left; }
* html #breadcrumb li:first-child { background-image: none; }

/************** menu styles *****************/

#menu-holder { background: url(../Images/Background/menu.png) top left no-repeat; width: 980px; padding: 0 0 0 5px; height: 55px; }
#menu-holder a span { display: none; }

a.menu-home { margin: 0; cursor:hand; float: left; display: block; width: 80px; height: 49px; background: url("../Images/Menu/site-home.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-home { cursor:hand; background-position: -80px 0; }
a.menu-storage-consultancy { margin: 0; cursor:hand; float: left; display: block; width: 220px; height: 49px; background: url("../Images/Menu/site-storage.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-storage-consultancy { cursor:hand; background-position: -220px 0; }
a.menu-operations-consultancy { margin: 0; cursor:hand; float: left; display: block; width: 240px; height: 49px; background: url("../Images/Menu/site-operations.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-operations-consultancy { cursor:hand; background-position: -240px 0; }
a.menu-products { margin: 0; cursor:hand; float: left; display: block; width: 140px; height: 49px; background: url("../Images/Menu/site-products.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-products { cursor:hand; background-position: -140px 0; }
a.menu-rack-inspection { margin: 0; cursor:hand; float: left; display: block; width: 180px; height: 49px; background: url("../Images/Menu/site-rack.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-rack-inspection { cursor:hand; background-position: -180px 0; }
a.menu-contact { margin: 0; cursor:hand; float: left; display: block; width: 110px; height: 49px; background: url("../Images/Menu/site-contact.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.menu-contact { cursor:hand; background-position: -110px 0; }

/************** home slider styles *****************/

#feature { width: 980px; height: 300px; margin: 0; padding: 0; position:relative; }
#feature a {color:#ccc;}
#feature h1 {color: #fff;display: none;}
.subpage #feature {width: 940px; height: 100px;	margin: 0;padding: 0;}	
#home #feature { background: url(../Images/Slider/Slide-1.jpg) no-repeat; width: 940px; height:340px; 	}

#slides p { float: left; padding: 35px 15px 5px 15px; width: 450px; color: #555; position:absolute; top: 130px; left: 20px;	}
#slide1 p {width: 400px!important; top: 60px; left: 15px; font-size: 12px; font-family: 'Arial'; line-height: 1.7em;}
#slide1 p.title {width: 400px!important; top: 1px; left: 13px; font-size: 25px; font-family: 'Arial'; color: #042F7D; line-height: 1.7em;}
#slide2 p {width: 400px!important; top: 60px; left: 15px; font-size: 12px; font-family: 'Arial'; line-height: 1.7em;}
#slide2 p.title {width: 400px!important; top: 1px; left: 13px; font-size: 25px; font-family: 'Arial'; color: #042F7D; line-height: 1.7em;}
#slide3 p {width: 400px!important; top: 60px; left: 15px; font-size: 12px; font-family: 'Arial'; line-height: 1.7em;}
#slide3 p.title {width: 400px!important; top: 1px; left: 13px; font-size: 25px; font-family: 'Arial'; color: #042F7D; line-height: 1.7em;}
#slide4 p {width: 400px!important; top: 60px; left: 15px; font-size: 12px; font-family: 'Arial'; line-height: 1.7em;}
#slide4 p.title {width: 400px!important; top: 1px; left: 13px; font-size: 25px; font-family: 'Arial'; color: #042F7D; line-height: 1.7em;}
.get-started {display: block; width: 245px; height: 45px;  position: absolute; top: 240px; left: 15px;}

#slides #slide1 { background: url(../Images/Slider/Slide-1.jpg) no-repeat; width: 980px; height:300px; position: relative; }
#slides #slide2 { background: url(../Images/Slider/Slide-2.jpg) no-repeat; width: 980px; height:300px; position: relative; }
#slides #slide3 { background: url(../Images/Slider/Slide-3.jpg) no-repeat; width: 980px; height:300px; position: relative; }
#slides #slide4 { background: url(../Images/Slider/Slide-4.jpg) no-repeat; width: 980px; height:300px; position: relative; }

/************** content styles *****************/

#content { width: 100%; }
#content #col-2, #content #col-3, #content #col-4 { float: left; text-align: left; margin: 20px 0 20px 0; width: 160px; margin: 0 0 0 10px; padding: 20px; border-left: 1px dotted #cecece; }
#content #col-2 img, #content #col-3 img, #content #col-4 img { padding: 0 0 10px 0;}
#content #col-1 { margin: 20px 10px 20px 10px; float: left; width: 310px; }
#content #col-1 h1 { font-size: 16px; color: #042F7D; margin: 0; padding: 0; }
#content #col-1 p, #content #col-2 p, #content #col-3 p, #content #col-4 p { font-size: 12px; color: #666; line-height: 20px; }

#content ul { margin: 0; padding: 10px 0; border-top: 1px dotted #cecece; }
#content ul li { display:block; list-style-type: none; font-size: 12px; line-height: 25px; margin-left: 0; }
#content ul li a { color: #123092; text-decoration: none; }
#content ul li a:hover { text-decoration: underline; }

#content #left .bulleted ul { margin: 0; padding: 10px 0; border-top: 1px dotted #cecece; }
#content #left .bulleted ul li { color: #666; display:block; list-style-type: square; font-size: 12px; line-height: 25px; margin-left: 0; }
#content #left .bulleted ul li a { color: #123092; text-decoration: none; }
#content #left .bulleted ul li a:hover { text-decoration: underline; }

#content #left { float: left; width: 650px; padding: 15px 0; margin: 10px 30px 0 0; border-top: 1px dotted #cecece;  }
#content #right { float: right; width: 275px; padding: 15px 0; margin: 10px 0; border-top: 1px dotted #cecece;  }

#content #left h1 { font-size: 25px; color: #042F7D; margin: 15px 0; padding: 0; font-weight: normal; }
#content #left p { font-size: 12px; color: #666; line-height: 20px; }
#content #left a { color: #123092; text-decoration: none; }
#content #left a:hover { text-decoration: underline; }
#content #right h2 { font-size: 25px; color: #cecece; margin: 0; padding: 0; font-weight: normal; }
#content #right p { font-size: 12px; color: #999; line-height: 20px; }
#content #right a { color: #123092; text-decoration: none; }
#content #right a:hover { text-decoration: underline; }
#content #right .seperator { width: 100%; height: 15px; border-top: 1px dotted #cecece; }

/************** form styles *****************/

.text-field { width: 240px; font-size: 100%; font-family: 'Tahoma'; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; border-top: 1px solid #999; height: 20px; border-left: 1px solid #999; margin: 10px 0;  }
.text-select { width: 240px; font-size: 100%; font-family: 'Tahoma'; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; border-top: 1px solid #999;  border-left: 1px solid #999;   }
.text-area { width: 238px; height: 100px; font-size: 100%; font-family: 'Tahoma'; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; border-top: 1px solid #999;  border-left: 1px solid #999;   }

.error { margin: 0 0 0 15px; color: #ff0000; font-weight: bold; }

/************** footer styles *****************/

.clear { clear: both; }

#footer-container { background: #f3f3f3; width: 100%; padding: 10px 0; }
#footer-wrapper { background: url(../Images/Misc/footer.png) bottom left no-repeat; margin: 15px 0; width: 960px; text-align: left; padding: 10px; border-top: 30px solid #042F7D; }

#footer { width: 980px; margin: 5px 0; min-height: 125px; }
.footer { color: #444; line-height: 15px; font-size: 12px; color: #666; }
#footer h4 { color: #AAAAA7; font-size: 12px; font-weight: bold; margin: 0 auto; padding: 0; margin-bottom: 5px; text-transform: uppercase; }
#footer #col-1, #col-2, #col-3 { float: left; text-align: left;  width: 220px; margin: 0 0 0 20px; }
#footer #col-4 { float: left; width: 220px; }

#footer ul { margin: 0; padding: 0; }
#footer ul li { display:block; list-style-type: none; font-size: 12px; line-height: 25px; margin-left: 0; }
#footer ul li a { color: #123092; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }

/************* social styles ******************/
div#socials { width: 120px; margin: 20px 50px; }
div#socials a { display: block; width: 20px; height: 20px; float: left; margin-right: 20px; }
div#socials a span { display: none; }
a.social-facebook { background: url('../Images/Social/facebook.png') left top no-repeat; }
a.social-facebook:hover { background: url('../Images/Social/facebook.png') right top no-repeat; }
a.social-twitter { background: url('../Images/Social/twitter.png') left top no-repeat; }
a.social-twitter:hover { background: url('../Images/Social/twitter.png') right top no-repeat; }
a.social-linkedin { background: url('../Images/Social/linkedin.png') left top no-repeat; }
a.social-linkedin:hover { background: url('../Images/Social/linkedin.png') right top no-repeat; }