/* ====================================================================== */
/* ==| AUTHOR  : Madara Ranawake                                      |== */
/* ==| PROJECT : PROXIMITY WORLDWIDE WEBSITE                          |== */
/* ==| URL     : http://www.proximity.ca 							  |== */
/* ==| DATE    : 2009 APRIL 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: Helvetica, Arial, sans-serif; color:#000000; font-size:8.5pt; 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:10000;  }
#divTopBar { position:absolute; left:0px; top:0px; }
body > div#divTopBar { position:fixed; }

#divNav { width:845px; height:inherit; float:left; font-size:12pt; font-weight:bold; /*font-family: Helvetica, Arial, sans-serif;*/ 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 { /*color:#757575;*/ text-decoration:none; }
/*#divNav ul li a:hover { color:#FFF; text-decoration:none; background-color:#000; }*/

#divDirection { width:70px; height:71px; position:fixed; top:580px; left:30px; }
#divDirection { position:absolute; left:30px; top:580px; }
body > div#divDirection { position:fixed; }

#divLogo { width:75px; height:inherit; float:right; margin-right:15px; }

#divVertical { width:10000px; 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:18pt; /*20*/ }
#divAbout p a { color:#ED1C24; text-decoration:none; }
#divAbout p a:hover { color:#000; }

#divBrandBubbles { width:950px; 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:30px 20px; }
#divBrandBubblesR h2 { width:300px; font-size:13pt; }
#divBrandBubblesR p { font-size:13pt; }

#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; }
/*#divWorkCategory ul { list-style:none; margin:0; padding:0; }
#divWorkCategory ul li { display:inline; }
#divWorkCategory ul li a { width:57px; height:46px; display:block; float:left; padding-top:11px; margin-right:5px; background:url(/img/bg/57x57_black_circle.gif) no-repeat; color:#FFFFFF; font-weight:bold; text-decoration:none; text-align:center; }
#divWorkCategory ul li a:hover { background-image:url(/img/bg/57x57_red_circle.gif); }*/
#divWorkContent { width:500px; height:332px; clear:both; }
#divWorkContentL { width:443px; 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 { float:left; color:#000; margin:0; padding:0; margin-right:10px; }
#divWorkContentL ul li a { text-decoration:none; outline:none; font-weight:normal; }
/*#divWorkContentL ul li a:hover { color:#ED1B24; text-decoration:none; }*/
#divWorkContentR { width:37px; height:332px; float:left; overflow:auto; margin-right:3px; }
#divWorkContentR ul { list-style:none; margin:0; padding:0; }
#divWorkContentR ul li a { width:37px; height:25px; display:block; padding-top:12px; margin-bottom:5px; background-repeat:no-repeat; /*background:url(/img/bg/37x37_red_circle.gif) no-repeat;*/ color:#FFFFFF; font-weight:bold; text-decoration:none; text-align:center; outline:none; }
#divWorkContentR ul li a:hover { /*background-image:url(/img/bg/37x37_black_circle.gif);*/ }


#divTheWorkR { width:430px; height:444px; float:left; }
#divYTInfo { width:430px; height:auto; clear:both; margin-top:10px; }
#divYTInfoL { width:410px; height:inherit; float:left; font-size:10pt; }
/*#divYTInfoL { width:333px; height:inherit; float:left; font-size:10pt; }
#divYTInfoR { width:77px; height:inherit; padding-right:20px; float:left; }*/

#divFace { width:306px; height:444px; float:left; margin:0 50px; }
#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 { /*color:#000000;*/ font-size:15pt; /*font-weight:bold;*/ text-decoration:none; outline:none; }
/*#divOfficeList ul li a:hover { color:#FF0000; }*/
#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; }
/*#divOfficePersonL { width:165px; height:auto; margin-right:5px; float:left; }
#divOfficePersonR { width:165px; height:auto; float:left; }*/

#divBulbs { 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; 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; /*font-size:10pt; font-weight:bold;*/ text-decoration:none; }
#divNewsRList ul li a:hover { text-decoration:underline; }

#divContact { width:950px; height:444px; float:left; }
#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 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; }

#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:/*#6A6A6A*/#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, a.aOfficeBubble2, a.aOfficeBubble3, a.aOfficeBubble4 { background:url('/img/bg/office_bubbles.jpg') no-repeat; }*/
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; } /*127*/
a.aOfficeBubble3 { display:block; position:absolute; top:110px; left:59px; height:181px; width:182px; outline:none; } /*180*/
a.aOfficeBubble4 { display:block; position:absolute; top:261px; left:158px; height:182px; width:182px; outline:none; } /*181*/

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 { /*color:#757575;*/ }
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; }

/* ---------------------------------------------------------------------- */
/* = Definitions for any element begins                                 = */
/* ---------------------------------------------------------------------- */

.grayText { color:#CACACA; }