/* ====================================================================== */
/* ==| AUTHOR  : Madara Ranawake                                      |== */
/* ==| PROJECT : PROXIMITY WORLDWIDE WEBSITE                          |== */
/* ==| URL     : http://www.proximity.ca 							  |== */
/* ==| DATE    : 2009 MAY 23 	    	                              |== */
/* ==| NOTE    : All the attributes are editable,                     |== */
/* ==|           do NOT change the class names or IDs                 |== */
/* ====================================================================== */

/* ---------------------------------------------------------------------- */
/* = Rules defined for apply GLOBALLY begins from this point forward    = */
/* ---------------------------------------------------------------------- */

body { font-family:  Arial, Helvetica,sans-serif; color:#000000; font-size:14px; background:#ED1C24 url(/img/bg/main.jpg) repeat-x; margin:0; }
h1, h2, p { margin:0 0 15px 0; padding:0; }
a { color:#000; }

/* ---------------------------------------------------------------------- */
/* = The style rules defined for HTML element IDs begins here           = */
/* ---------------------------------------------------------------------- */

#divTopBar { width:100%; height:75px; clear:both; margin:15px 0 16px 0; position:fixed; background-color:#FFF; z-index:50; }
#divTopBar { position:absolute; left:0px; top:0px; }
body > div#divTopBar { position:fixed; }

div#divTopBar {
  left: expression( document.body.scrollLeft + 'px' );
  left: expression( document.body.scrollLeft + 'px' );
  top: expression( document.body.scrollTop + 'px' );
}
body > div#divTopBar { position: fixed; left: 0px; top: 0px; }

#divNav { width:1145px; height:inherit; float:left; font-size:12pt; font-weight:bold; letter-spacing:-1px; }
#divNav ul { margin:0; padding:0; margin-top:30px; margin-left:15px; }
#divNav ul li { display:inline; margin-right:15px; list-style:none; }
#divNav ul li a { text-decoration:none; padding:0 3px; }

#divBottomBar{width:100%; height:100px; position:fixed; top:580px; left:30px;}
body > div#divBottomBar { position:fixed; }
#divDirection {width:70px; height:71px; float:left; }
/*#divDirection { position:absolute; left:30px; top:580px; }*/
#divSocialMedia{width:200px; height:100px; float:right;}
#divSocialMedia p{color:#fff; margin:0px; padding:0px; padding-bottom:5px;}
#divSocialMedia ul{list-style:none; margin:0px; padding:0px;}
#divSocialMedia ul li{list-style:none; width:40px; float:left; display:block; margin:0px; padding:0px;}

#divLogo { width:75px; height:inherit; float:right; margin-right:15px; }

#divVertical { width:13740px; height:444px; margin-top:106px; position:absolute; top:0; left:0; }

#divIntro { width:950px; height:444px; float:left; }

#divAbout { width:910px; height:404px; color:#ED1C24; float:left; padding:20px; }
#divAbout h2 { font-size:35pt; }
#divAbout p { font-size:17pt; }

#divBrandBubbles { width:517px; height:444px; float:left; }
/*#divBrandBubblesL { width:517px; height:inherit; float:left; padding:0 20px; background-color:#ED1B24; }
#divBrandBubblesR { width:333px; height:404px; float:right; color:#ED1C24; padding:10px 20px; }
#divBrandBubblesR h2 { width:300px; font-size:13pt; }
#divBrandBubblesR p { font-size:10.5pt; }*/

#divTheServices { width:950px; height:444px; float:left; }
#divTheServicesL { width:270px; height:414px; float:left; padding:30px 0 0 30px; }
#divTheServicesL h2 { color:#ED1C24; font-size:50px; margin:0; }
#divTheServicesR { width:620px; height:404px; float:left; padding:15px; margin-top:10px; font-size:10.5pt; }
#divTheServicesR p{margin:0px; padding:0px; padding-bottom:10px; width:80%;}

#divP { width:870px; height:444px; float:left; padding-left:70px; background:url(/img/bg/p.jpg) no-repeat; }

#divTheWork { width:950px; height:444px; float:left; }
#divTheWorkL { width:500px; height:424px; float:left; padding:20px 0 0 20px; }
#divWorkCategory { width:500px; height:57px; margin-bottom:15px; clear:both; }
#divWorkCategory h2 { color:#ED1B24; font-size:35pt; margin:0; }
#divWorkContent { width:500px; height:332px; clear:both; }
#divWorkContentL { width:442px; height:332px; float:left; overflow:auto; margin-right:14px; font-size:15pt; font-weight:bold; }
#divWorkContentL ul { list-style:none; margin:0; padding:0; float:left; }
#divWorkContentL ul li {color:#000; margin:0; padding:0; margin-right:10px; }
#divWorkContentL ul li a { text-decoration:none; outline:none; font-weight:normal; }
#divWorkContentR { width:37px; height:332px; float:left; overflow:none; margin-right:7px; }
#divWorkContentR ul { list-style:none; margin:0px; padding:0px; }
#divWorkContentR ul li{ list-style:none; margin:0px; padding:0px; }
#divWorkContentR ul li a { width:37px; height:25px; display:block; padding-top:12px; margin-bottom:5px; background-repeat:no-repeat; color:#FFFFFF; font-weight:bold; text-decoration:none; text-align:center; outline:none; }

#divTheWorkR { width:430px; height:444px; float:left; }
#divYTSWF { width:430px; height:344px; margin-bottom:10px; }
#divYTInfo { width:430px; height:80px; clear:both; margin-top:10px; position:relative; }
#divYTInfoL { width:353px; height:80px; font-size:10pt; float:left; overflow:auto; }
#divYTInfoLALT { width:430px; height:70px; font-size:10pt; float:left; overflow:auto; }

#divYTInfoR { width:67px; height:80px; text-align:center; float:left; }

#divYTInfo ul { list-style:none; margin:0; padding:0; position:absolute; top:10px; left:365px; }
#divYTInfo ul li {  }
#divYTInfo ul li a { width:57px; height:36px; display:block; padding-top:21px; background:url(/img/bg/57x57_red_circle.gif) no-repeat; color:#FFFFFF; font-weight:bold; text-decoration:none; text-align:center; }
#divYTInfo ul li a:hover { background-image:url(/img/bg/57x57_black_circle.gif); }

#divFace { width:306px; height:444px; float:left; margin:0 50px; }

#divPeople { width:980px; height:444px; float:left; } 
#divPeople h2 { color:#ED1B24; font-size:35pt; margin:0; margin-top:20px; }
#divPeopleL { width:155px; height:inherit; float:left; margin-right:15px; }
#divPeopleM { width:497px; height:424px; float:left; margin-right:15px; padding:10px 0; }
#divPeopleMContent { width:497px; height:424px; overflow:auto; }
#divPeopleM ul, #divPeopleM ul li { padding:0; margin:0; list-style:none; }
#divPeopleM ul li { display:inline; font-size:11pt; }
#divPeopleM ul li a { width:139px; height:49px; display:block; float:left; padding-top:140px; padding-bottom: 40px; margin:0 20px 20px 0;  background-repeat:no-repeat; /*background-position:-139px 0;*/ outline:none; /*color:#0000;*/ text-decoration:none; } /* agregue padding-bottom */
#divPeopleM ul li a:hover {  background-repeat:no-repeat; }
#divPeopleM ul li a span { font-size:8pt; }
#divPeopleR { width:280px; height:424px; float:left; padding:10px 10px 10px 0; }
#divPeopleRContent { width:280px; height:424px; overflow:auto; font-size:10pt; }

#divDigitalLab { width:950px; height:444px; margin-right:10px; float:left; background:url(/img/bg/digitalLab.png) no-repeat right top;}
#divDigitalLabL { width:200px; height:414px; float:left; padding:30px 0 0 30px; }
#divDigitalLabR { width:670px; height:279px; float:left; padding:15px; padding-top:150px; font-size:12px; }
#divDigitalLabR #introDL {width:526px;}
#divDigitalLabR hr{width:526px;margin:15px 0px 15px; height:1px; border:none;border-top:1px dotted #000000;}
#divDigitalLabR #btnMasInfo{margin:25px 0px 10px;}
#divDigitalLabR #logos {width:180px; margin-left:500px; font-size:11px;}
#divDigitalLabR #logos img{padding-top:10px;}

#divWorldMap { width:1266px; height:444px; float:left; }

#divOffices { width:950px; height:444px; float:left; }
#divOfficesL { width:370px; height:444px; float:left; position:relative; background:url('/img/bg/office_bubbles.jpg') no-repeat; }
#divOfficesM { width:200px; height:424px; float:left; padding:10px 15px 10px 15px; }
#divOfficeList { width:200px; height:424px; overflow:auto; }
#divOfficeList ul { list-style:none; margin:0; padding:0; }
#divOfficeList ul li a { font-size:15pt; text-decoration:none; outline:none; }
#divOfficesR { width:335px; height:444px; float:left; margin-left:15px; }
#divOfficePerson { width:335px; height:auto; margin:15px 0 0 0; clear:both; font-size:10.5pt; color:/*#6A6A6A*/#000; font-weight:bold; }
#divOfficePerson strong { color:#000000; }
#divOfficePerson a { color:#ED1C24; text-decoration:none; }
#divOfficePerson a:hover { text-decoration:underline; }

#divBulbs, #divBulbsServices, #divBulbsDL, #divBulbsDL2 { width:234px; height:444px; float:left; }

#divNews { width:950px; height:444px; float:left; }
#divNewsL { width:270px; height:414px; float:left; padding:30px 0 0 30px; }
#divNewsL h2 { color:#ED1C24; font-size:35pt; margin:0; }
#divNewsL div { margin-top:250px; margin-right:10px; }
#divNewsL div a { width:150px; height:35px; display:block; color:#000; font-size:11pt; text-decoration:none; }
#divNewsL div a.twitter { background:url(/img/bg/twitter.jpg) bottom center no-repeat; color:#000; font-size:11pt; text-decoration:none; }
#divNewsL div a:hover { color:#ED1C24; text-decoration:none; }
#divNewsR { width:620px; height:414px; float:left; padding:15px; font-size:10pt; }
#divNewsRList { width:620px; height:414px; overflow:auto; }
#divNewsRList ul { list-style:none; margin:0; padding:0; }
#divNewsRList ul li { margin-bottom:15px; }
#divNewsRList ul li a { color:#ED1C24; text-decoration:none; }
#divNewsRList ul li a:hover { text-decoration:underline; }

#divWhitePapers { width:950px; height:444px; float:left; }
#divWhiteL { width:270px; height:414px; float:left; padding:30px 0 0 30px; }
#divWhiteL h2 { color:#ED1C24; font-size:50px; margin:0; width:90%; }

#divWhiteR { width:620px; height:414px; float:left; padding:15px; font-size:10pt; }
#divWhiteRList { width:620px; height:414px; overflow:auto; }
#divWhiteRList ul { list-style:none; margin:0; padding:0; }
#divWhiteRList ul li { margin-bottom:25px; width:580px; float:left;}
#divWhiteRList ul li a { color:#ED1C24; text-decoration:none; font-weight:bold;}
#divWhiteRList ul li a:hover { text-decoration:underline; }

#divContact { width:950px; height:444px; float:left; position:relative; }
#divContactL { width:550px; height:424px; float:left; background:#ED1C24 url(/img/transitions/contact_bulbs.jpg) bottom no-repeat; color:#FFFFFF; padding:20px 0 0 20px; }
#divContactL div { width:275px; height:100px; float:left; }
#divContactL h2 { font-size:35pt; margin:0; }
#divContactL p { font-size:10pt; margin-bottom:15px; }
#divContactL a { color:#FFF; text-decoration:none; }
#divContactL a:hover { color:#FFF; text-decoration:underline; }
#divContactR { width:380px; height:inherit; float:left; }

#divMapButton { width:130px; height:57px; position:absolute; top:300px; left:400px; z-index:30000; }
#divMapButton ul { list-style:none; margin:0; padding:0; }
#divMapButton ul li a { width:57px; height:36px; display:block; float:left; padding-top:21px; background:url(/img/bg/57x57_white_circle.gif) no-repeat; color:#ED1C24; font-size:11px; font-weight:bold; text-decoration:none; text-align:center; }
#divMapButton ul li a:hover { background-image:url(/img/bg/57x57_black_circle_2.gif); color:#FFF; }

#divContactEnd { width:72px; height:444px; float:left; }

/* ---------------------------------------------------------------------- */
/* = Definitions for classes begins which must be called separately     = */
/* ---------------------------------------------------------------------- */

p.pOfficeName { font-size:20pt; color:#000; margin:0; margin:15px 0 10px 0; }
p.pOfficeAddress { font-size:13pt; color:#000; font-weight:bold; }
ul.ulOfficeMapWWW { list-style:none; margin:0; padding:0; margin-top:15px; }
ul.ulOfficeMapWWW li { display:inline; }
ul.ulOfficeMapWWW li a { width:57px; height:36px; display:block; float:left; padding-top:21px; margin-right:5px; background:url(/img/bg/57x57_red_circle.gif) no-repeat; color:#FFFFFF; font-weight:bold; text-decoration:none; text-align:center; }
ul.ulOfficeMapWWW li a:hover { background-image:url(/img/bg/57x57_black_circle.gif); }

span.spnVideoOwner { color:#ED1C24; font-size:10pt; font-weight:bold; }
span.spnVideoTitle { color:#6A6A6A; font-size:10pt;  font-weight:bold; }

a.aOfficeBubble1 { display:block; position:absolute; top:0px; left:89px; height:110px; width:132px; outline:none; }
a.aOfficeBubble2 { display:block; position:absolute; top:37px; left:206px; height:129px; width:130px; outline:none; }
a.aOfficeBubble3 { display:block; position:absolute; top:110px; left:59px; height:181px; width:182px; outline:none; }
a.aOfficeBubble4 { display:block; position:absolute; top:261px; left:158px; height:182px; width:182px; outline:none; }

a.aOfficeBubble1:hover, a.aOfficeBubble1-JQ-ON { background:url('/img/bg/office_bubbles.gif') -1569px 0 no-repeat; }
a.aOfficeBubble2:hover, a.aOfficeBubble2-JQ-ON { background:url('/img/bg/office_bubbles.gif') -1316px -37px no-repeat; }
a.aOfficeBubble3:hover, a.aOfficeBubble3-JQ-ON { background:url('/img/bg/office_bubbles.gif') -799px -110px no-repeat; }
a.aOfficeBubble4:hover, a.aOfficeBubble4-JQ-ON { background:url('/img/bg/office_bubbles.gif') -528px -261px no-repeat; }

a.aWorkContentR-JQ-OFF { background-image:url(/img/bg/37x37_red_circle.gif); }
a.aWorkContentR-JQ-OFF:hover { background-image:url(/img/bg/37x37_black_circle.gif); }
a.aWorkContentR-JQ-ON { background-image:url(/img/bg/37x37_black_circle.gif); }

a.aWorkContentL-JQ-OFF { color:#000000; }
a.aWorkContentL-JQ-OFF:hover { color:#ED1B24; }
a.aWorkContentL-JQ-ON { color:#ED1B24; }

a.aNav-JQ-OFF { }
a.aNav-JQ-OFF:hover, a.aNav-JQ-ON { color:#FFF; background-color:#000; }

a.aOfficeList-JQ-OFF { color:#000000; }
a.aOfficeList-JQ-OFF:hover, a.aOfficeList-JQ-ON { color:#ED1C24; }

a.aPeopleM-JQ-OFF { color:#000000; background-position:-139px 0; }
a.aPeopleM-JQ-OFF:hover, a.aPeopleM-JQ-ON { color:#ED1C24; background-position:0 0; }

#divAbout p a { color:#ED1C24; text-decoration:none; }
/* ---------------------------------------------------------------------- */
/* = Definitions for any element begins                                 = */
/* ---------------------------------------------------------------------- */

.grayText { color:#CACACA; }
.rojoCP {color:#ED1C24;}
