/* ====================================================================== */
/* ==| 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: 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; 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; }

#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:11200px; 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: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:10px 20px; }
#divBrandBubblesR h2 { width:300px; font-size:13pt; /*10.5*/ /*13pt*/ }
#divBrandBubblesR p { font-size:10.5pt; /*13*/ }

#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: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; }
#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; 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; /*float:left;*/ 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:950px; 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; /*477*/ height:424px;/*434*/ float:left; margin-right:15px; /*15*/ /*padding-top:10px;*/ padding:10px 0; }
#divPeopleMContent { width:497px; /*477*/ height:424px; /*padding:10px;*/ overflow:auto; }
#divPeopleM ul, #divPeopleM ul li { padding:0; margin:0; list-style:none; }
#divPeopleM ul li { /*float:left;*/ display:inline; font-size:11pt; }
#divPeopleM ul li a { width:139px; height:49px; display:block; float:left; padding-top:140px; margin:0 20px 20px 0; background-repeat:no-repeat; /*background-position:-139px 0;*/ outline:none; /*color:#0000;*/ text-decoration:none; }
#divPeopleM ul li a:hover {  background-repeat:no-repeat; /*color:#ED1C24; background-position:0 0;*/ }
#divPeopleM ul li a span { font-size:8pt; }
#divPeopleR { width:258px; /*278*/ height:424px; float:left; padding:10px 10px 10px 0; }
#divPeopleRContent { width:258px; /*278*/ height:424px; overflow:auto; font-size:10pt; }

#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 { 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; text-decoration:none; }
#divNewsRList 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:160px; 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:57px; height:57px; position:absolute; top:300px; left:490px; 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-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; }

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

.grayText { color:#CACACA; }