/********************************************************************************************** Major Sections in CSS: 1. RESET Remove margin and padding from elements 2. GENERIC CLASSES Define styles for simple things like floating to the sides, text aligning, image-replacements, clearfix etc 3. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 4. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 5. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 6. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /*------------------------------------------ // 1.RESET // Remove margin and padding from elements and other resets //------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } acronym { cursor: help; } a { color:#5B747B} /*------------------------------------------ // 2.GENERIC CLASSES // Define styles for simple things like floating to the sides, text aligning, image-replacements, clearfix etc //------------------------------------------*/ html { font-size: 100.01%; } body { font-size: 62.5%; line-height:1em; } /*---- Input fields ----*/ input, select, textarea { font-size: 100%; } textarea { padding: 2px 3px; font-family: Verdana, sans-serif; } /*---- Floats ----*/ .flR { float: right; } .flL { float: left; } /*---- Horizontal Alignment ----*/ .alR { text-align: right; } .alC { text-align: center; } /*---- Vertical Alignment ----*/ .vlT {vertical-align:top;} .vlB {vertical-align:bottom;} /*---- Hide ----*/ .hide { display: none; } /*---- Float Clearing fixes ----*/ .clear { clear: both; height:1px; line-height:1px; } .clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*---- Image Replacement Technique ----*/ .ir { position: relative; overflow: hidden; } .ir span { position: absolute; top: 0; text-indent: -1000em;} /*---- Links ----*/ a:link, a:visited { text-decoration: none; cursor/**/: /**/pointer; } a:link:hover, a:visited:hover { text-decoration: underline; } /*------------------------------------------ // 3.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { background:#BFCED0 url(../images/bg.jpg) 0% 0% repeat-x; font-family: Arial, Helvetica, sans-serif; color:#5A737A;} /*------------------------------------------ // 4.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width: 980px; margin: 0 auto; min-width:980px;} /*---- Login ----*/ div#login{ background:url(../images/header/login_cloud.jpg) top right no-repeat; height:93px; width:211px; padding-top:14px; margin:0px 18px 57px 0px; float:right;} /*---- Header ----*/ div#header { width:100%; overflow:hidden;} /*---- Navigation ----*/ div#navigation { float:right; width:720px;} /*---- Content ----*/ div#content{clear:both;} /*---- Footer ----*/ div#footer { padding:34px 0px 100px 0px; clear:both; height:1%; } /*------------------------------------------ // 5. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Login ----*/ div#login ul {margin-right:27px;} div#login ul li{display:inline; font-size:120%; font-weight:bold; text-transform:uppercase; padding-right:6px;} div#login ul li a{color:#4B5F65; text-decoration:none; line-height:1.2em;} /*---- Header - Logo ----*/ div#header h1{padding:2px 0px 0px 59px;} div#header a.logo, div#header a.logo span { display: block; width: 147px; height: 160px; overflow: hidden; } div#header h1, div#header a.logo { position: relative; margin-top:11px; } div#header h1 span, div#header a.logo span { position: absolute; top: 0; left: 0; z-index: 10; background:url(../images/header/logo.jpg) no-repeat; } div#header a.logo span { cursor: pointer; } /*---- Navigation ----*/ div#navigation ul li{display:block; float:left; padding-right:2px;} div#navigation ul li.last{padding-right:0px;} div#navigation ul li a{text-decoration:none;} div#navigation ul li a span{ line-height:30px; font-size:150%; display:block; font-weight:bold; color:#DEE5E6;} div#navigation ul li a{ background:url(../images/navigation/tabs.gif) left top no-repeat; height:30px; display:block; float:left; padding-left:18px;} div#navigation ul li a span{background:url(../images/navigation/tabs.gif) right -60px no-repeat; height:30px; float:left; padding-right:18px;} div#navigation ul li a:hover, div#navigation ul li a.active{ background:url(../images/navigation/tabs.gif) left -30px no-repeat; height:30px; display:block; float:left; padding-left:18px;} div#navigation ul li a:hover span, div#navigation ul li a.active span{background:url(../images/navigation/tabs.gif) right -90px no-repeat; height:30px; float:left; padding-right:18px; color:#4B5F65;} /*---- Content ----*/ div#content h1{font-size:230%; color:#3A4A4E; font-weight:normal; line-height:1.2em; margin-bottom:10px;} div#content h1 span{ font-size:100%; color:#CE282A;} div#content h2{color:#3A4A4E; font-size:220%; line-height:1.2em; font-weight:normal; margin:0px 30px 0px 0px;} div#content h3{font-size:180%; font-weight:normal; line-height:1.2em; color:#3A4A4E; position:relative;} div#content h4{ font-size:110%; line-height:1.2em; color:#4B5F65; margin-bottom:5px;} div#content p{color:#5B747B; font-size:150%; line-height:1.2em; margin-bottom:12px;} /*---- Content - Box ----*/ div#content div.box{width:100%; overflow:hidden; margin-bottom:2px;} div#content div.box div.box_top{ background:#fff; float:left; width:948px; height:17px;} div#content div.box div.box_top_left{background:url(../images/content/box1.png) left top no-repeat; width:16px; height:17px; float:left;} div#content div.box div.box_top_right{ background:url(../images/content/box1.png) right top no-repeat; width:16px; height:17px; float:left;} div#content div.box div.box_middle{background:#fff url(../images/content/middle_right.gif) right top repeat-y; overflow:hidden; width:940px; padding:0px 20px 1px 20px;} div#content div.box div.box_otro{overflow:hidden; width:690px; padding:0px 20px 1px 50px;} div#content div.box div.box_bottom{ background:url(../images/content/bottom_middle.png) left bottom repeat-x; float:left; width:948px; height:17px;} div#content div.box div.box_bottom_left{background:url(../images/content/box1.png) left bottom no-repeat; width:16px; height:17px; float:left;} div#content div.box div.box_bottom_right{ background:url(../images/content/box1.png) -49px -44px no-repeat; width:15px; height:17px; float:left;} /*---- Content - Box - Half----*/ div#content div.box.half{ width:490px;} div#content div.box.half div.box_top{ background:#fff; float:left; width:458px; height:17px;} div#content div.box.half div.box_middle{background:#fff url(../images/content/middle_right.gif) right top repeat-y; overflow:hidden; width:450px; padding:0px 20px 1px 20px;} div#content div.box.half div.box_bottom{ background:url(../images/content/bottom_middle.png) left bottom repeat-x; float:left; width:458px; height:17px;} /*---- Content - Box1 ----*/ div#content div.box1 div.box1_top_left{ background:url(../images/content/box1.gif) left top no-repeat; width:9px; height:9px; line-height:9px; float:left;} div#content div.box1 div.box1_top_middle{ background-color:#ECEFF0; width:400px; height:9px; float:left; line-height:9px;} div#content div.box1 div.box1_top_right{ background:url(../images/content/box1.gif) right top no-repeat; width:9px; height:9px; line-height:9px; float:left;} div#content div.box1 div.box1_middle{ background-color:#ECEFF0; width:399px; padding:17px 20px 1px 24px; } div#content div.box1 div.box1_bottom_left{ background:url(../images/content/box1.gif) left bottom no-repeat; width:9px; height:9px; float:left; line-height:9px;} div#content div.box1 div.box1_bottom_middle{ background-color:#ECEFF0; width:425px; height:9px; float:left; line-height:9px;} div#content div.box1 div.box1_bottom_right{ background:url(../images/content/box1.gif) right bottom no-repeat; width:9px; height:9px; float:left; line-height:9px;} /*---- Content - Buttons ----*/ a.button1{background:url(../images/content/button1.gif) left top no-repeat; height:42px; float:left; padding-left:30px; } a.button1 span{background:url(../images/content/button1.gif) right bottom no-repeat; height:42px; float:left; padding-right:20px; line-height:40px; font-size:150%; color:#fff; } a.button1:hover{text-decoration:none;} a.button2 {background:url(../images/content/button2.gif) left top no-repeat; height:41px; float:left; padding-left:30px; text-decoration:none;} a.button2 span{background:url(../images/content/button2.gif) right bottom no-repeat; height:41px; float:left; padding-right:20px; line-height:40px; font-size:150%; color:#DDE2E4; } a.button2:hover{text-decoration:none;} /*---- Content - Tabs ----*/ div#content div.tabs ul li a{background:url(../images/content/tabs.gif) left top no-repeat; height:34px; padding-left:24px; float:left; text-decoration:none; } div#content div.tabs ul li a span{background:url(../images/content/tabs.gif) right bottom no-repeat; height:34px; padding-right:35px; float:left; ; color:#3A4A4E; line-height:30px; font-size:190%;} div#content div.tabs ul li a span span{float:none; background:none; color:#CF292A; padding:0px; margin:0px; font-size:100%} /*---- Content - Buttons ----*/ div#content a.cancel{background:url(../images/content/cancel.gif) right top no-repeat; height:32px; line-height:32px; display:block; float:right; width:31px;} /*---- Content - More - Link ----*/ a.more-link{ padding:6px; color:#4B5F65; font-size:110%; line-height:1.2em; text-decoration:underline; float:left;} /*---- Comment - Box ----*/ div#content div.comment{margin:0px 33px 5px 0px;} div#content div.comment div.photo{ position:relative; margin-top:16px; float:left;} div#content div.comment div.photo img{position:absolute; margin-bottom:0px; } div#content div.comment div.karma{position:absolute; background:url(../images/content/karma.png) top right no-repeat; height:41px; width:35px; z-index:10; top:-20px; left:40px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:150%; color:#fff; line-height:45px; text-align:center;} div#content div.box_top_middle{width:940px; overflow:hidden;} div#content div.entry{ background: url(../images/content/comment.gif) left bottom no-repeat; padding-left:12px; width:358px; margin-left:65px; overflow:hidden;} div#content div.entry div.box1_top_left{ background:url(../images/content/box1.gif) left top no-repeat; line-height:9px; width:9px; height:9px; float:left;} div#content div.entry div.box1_top_middle{ background-color:#ECEFF0; width:340px; height:9px; float:left; line-height:9px;} div#content div.entry div.box1_top_right{ background:url(../images/content/box1.gif) right top no-repeat; width:9px; height:9px; line-height:9px; float:left;} div#content div.entry div.box1_middle{ background-color:#ECEFF0; clear:both; width:314px; padding:20px 20px 1px 24px;} div#content div.entry div.box1_bottom_left{ background:url(../images/content/box1.gif) left bottom no-repeat; line-height:9px; width:9px; height:9px; float:left;} div#content div.entry div.box1_bottom_middle{ background-color:#ECEFF0; width:340px; height:9px; float:left; line-height:9px;} div#content div.entry div.box1_bottom_right{ background:url(../images/content/box1.gif) right bottom no-repeat; width:9px; line-height:9px; height:9px; float:left;} div#content div.entry div.box1_middle{padding-top:1px;} div#content div.entry h4{font-size:120%; color:#67838A;} div#content div.entry p{ color:#869EA5; font-size:110%; margin-bottom:10px;} div#content div.entry p.tagline{font-size:110%; margin-bottom:0px; color:#7A9299;} /*---- Footer ----*/ div#footer ul li{color:#546970; font-size:120%; line-height:1.2em; display:inline; padding-right:5px;} div#footer ul li a{text-transform:uppercase; text-decoration:none; color:#546970;} /*------------------------------------------ // 6. PAGE SPECIFIC CONTENT //------------------------------------------*/ /*------------------------------------------ // 7. INDEX PAGE CONTENT //------------------------------------------*/ /*---- Content ----*/ /*---- Weather Bar ----*/ div#content div.box div.box_right{ background:#fff url(../images/content/middle_right.gif) right top repeat-y; width:964px; height:17px; float:left; line-height:17px;} div#content div.box div.weather_bar{margin-bottom:15px;} div#content div.box div.weather_bar div.weather_bar_left{ background:url(../images/content/tab_bar.jpg) left top no-repeat; line-height:50px; padding-left:170px; width:760px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right{ background:url(../images/content/tab_bar.jpg) right bottom no-repeat; height:91px; margin-bottom:10px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul{position:relative; margin-left:-45px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li{color:#839194; font-size:230%; line-height:8px; float:left; padding:40px 10px 0px 5px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li span{font-size:60%;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.pipe{background:url(../images/content/pipe.gif) left top no-repeat; margin-top:25px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.sun_cloud{ background:url(../images/content/weather.png) left -240px no-repeat; padding:35px 8px 12px 60px; height:44px; line-height:15px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.cloud{ background:url(../images/content/weather.png) left -8px no-repeat; padding:35px 8px 12px 70px; height:44px; line-height:15px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.sun{ background:url(../images/content/weather.png) left -162px no-repeat; padding:35px 8px 12px 50px; height:44px; line-height:15px;} div#content div.box div.weather_bar2{margin-bottom:15px;} div#content div.box div.weather_bar2 div.weather_bar_left{ background:url(../images/content/tab_bar2.jpg) left top no-repeat; line-height:50px; padding-left:170px; width:760px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right{ background:url(../images/content/tab_bar.jpg) right bottom no-repeat; height:91px; margin-bottom:10px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul{position:relative; margin-left:-45px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li{color:#839194; font-size:230%; line-height:8px; float:left; padding:40px 10px 0px 5px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li span{font-size:60%;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li.pipe{background:url(../images/content/pipe.gif) left top no-repeat; margin-top:25px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li.sun_cloud{ background:url(../images/content/weather.png) left -240px no-repeat; padding:35px 8px 12px 60px; height:44px; line-height:15px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li.cloud{ background:url(../images/content/weather.png) left -8px no-repeat; padding:35px 8px 12px 70px; height:44px; line-height:15px;} div#content div.box div.weather_bar2 div.weather_bar_left div.weather_bar_right ul li.sun{ background:url(../images/content/weather.png) left -162px no-repeat; padding:35px 8px 12px 50px; height:44px; line-height:15px;} div#content div.box div.weather_bar3{margin-bottom:15px;} div#content div.box div.weather_bar3 div.weather_bar_left{ background:url(../images/content/tab_bar3.jpg) left top no-repeat; line-height:50px; padding-left:170px; width:195px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right{ background:url(../images/content/tab_bar.jpg) right bottom no-repeat; height:91px; margin-bottom:10px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul{position:relative; margin-left:-45px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li{color:#839194; font-size:230%; line-height:8px; float:left; padding:40px 10px 0px 5px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li span{font-size:60%;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li.pipe{background:url(../images/content/pipe.gif) left top no-repeat; margin-top:25px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li.sun_cloud{ background:url(../images/content/weather.png) left -240px no-repeat; padding:35px 8px 12px 60px; height:44px; line-height:15px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li.cloud{ background:url(../images/content/weather.png) left -8px no-repeat; padding:35px 8px 12px 70px; height:44px; line-height:15px;} div#content div.box div.weather_bar3 div.weather_bar_left div.weather_bar_right ul li.sun{ background:url(../images/content/weather.png) left -162px no-repeat; padding:35px 8px 12px 50px; height:44px; line-height:15px;} ul# li.sun_cloud{ background:url(../images/content/weather.png) left -240px no-repeat; padding:35px 8px 12px 60px; height:44px; line-height:15px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.cloud{ background:url(../images/content/weather.png) left -8px no-repeat; padding:35px 8px 12px 70px; height:44px; line-height:15px;} div#content div.box div.weather_bar div.weather_bar_left div.weather_bar_right ul li.sun{ background:url(../images/content/weather.png) left -162px no-repeat; padding:35px 8px 12px 50px; height:44px; line-height:15px;} /*---- Content Control ----*/ div#content div.control{padding-right:24px;} div#content div.control a.previous{ background:url(../images/content/arrows.gif) left -90px no-repeat; padding:0px 5px; } div#content div.control a.next{ background:url(../images/content/arrows.gif) right -90px no-repeat; padding:0px 5px; } /*---- Comunity ----*/ div#content div.community{width:430px; position:relative; margin:0px 55px 0px 0px;} div#content div.box1{clear:both; width:454px;} div#content div.box1 div.box1_top_middle{ background-color:#ECEFF0; width:434px; height:9px; float:left;} /*---- Twiter ----*/ div#content div.tab_box{width:447px; margin-top:25px; position:relative;} div#content div.tab_box img{ left:155px; top:5px; position:absolute;} div#content div.tab_box div.user{width:222px;} div#content div.tab_box div.user p.tagline{font-size:120%; color:#5F777E; line-height:1.2em; margin-bottom:12px;} div#content div.tab_box div.user p{font-size:130%; color:#869EA5; margin-bottom:15px;} div#content div.tab_box div.weather{ width:140px; margin-top:20px;} div#content div.tab_box div.weather p.raning_cloud{line-height:50px; background:url(../images/content/weather.png) left -100px no-repeat; height:60px; padding-left:60px; font-size:260%; color:#839195;} div#content div.tab_box div.weather p.sun_cloud{line-height:50px; background:url(../images/content/weather.png) left -256px no-repeat; height:60px; padding-left:60px; font-size:260%; color:#839195;} div#content div.tab_box div.weather p.cloud{line-height:50px; background:url(../images/content/weather.png) left -25px no-repeat; height:60px; padding-left:60px; font-size:260%; color:#839195;} div#content div.tab_box div.weather p.sun{line-height:50px; background:url(../images/content/weather.png) left -180px no-repeat; height:60px; padding-left:45px; font-size:260%; color:#839195;} div#content div.tab_box div.weather dl dd{font-size:120%; color:#597177; margin:0px 5px 6px 0px; float:left;} div#content div.tab_box div.weather dl dt{font-size:120%; color:#597177; margin-bottom:6px; float:left;} /*---- Tag - Clouds ----*/ div#content div.tag_cloud{background:url(../images/content/cloud_middle.jpg) left top repeat-y; float:left; } div#content div.tag_cloud div.tag_cloud_top{background:url(../images/content/cloud_top.jpg) left top no-repeat;} div#content div.tag_cloud div.tag_cloud_top div.tag_cloud_bottom{background:url(../images/content/cloud_bottom.jpg) left bottom no-repeat; padding:10px 34px 15px 30px; width:426px; } div#content div.tag_cloud ol{padding-top:113px;} div#content div.tag_cloud ol li{ display:inline; list-style:none; line-height:3em;} div#content div.tag_cloud ol li a{text-decoration:none;} div#content div.tag_cloud ol li a.size23{color:#869EA5; line-height:1em; font-size:230%; margin:0px 10px 0px 10px;} div#content div.tag_cloud ol li a.size23.first{ margin:0px 10px 0px 155px;} div#content div.tag_cloud ol li a.size25{color:#637B83; line-height:1em; font-size:250%; margin-right:5px;} div#content div.tag_cloud ol li a.size35{ color:#67838A; font-size:350%; line-height:1em;} div#content div.tag_cloud ol li a.size38{ color:#67838A; font-size:380%; line-height:1em; margin-right:40px;} div#content div.tag_cloud ol li a.color23{ color:#67838A; line-height:1.2em; font-size:230%; margin-right:20px;} div#content div.tag_cloud ol li a.size32{ color:#67838A; font-size:320%; line-height:1em; margin-right:15px;} div#content div.tag_cloud ol li a.size17{ color:#67838A; font-size:170%; line-height:1em; margin-right:30px;} div#content div.tag_cloud ol li a.size39{ color:#879EA5; font-size:390%; line-height:1em;} div#content div.tag_cloud ol li a.size28{ color:#67838A; font-size:280%; line-height:1em;} div#content div.tag_cloud ol li a.size22{ color:#67838A; font-size:220%; line-height:1em; margin:0 34px 0px 70px;} div#content div.tag_cloud ol li a.size37{ color:#67838A; font-size:370%; line-height:1em;} /*---- Predictions - Box ----*/ div#content div#predictions.box h3{margin-bottom:20px;} div#content div#predictions.box h3 a{background:url(../images/content/arrows.gif) -92px -182px no-repeat; color:#3A4A4E; text-decoration:none; padding-left:20px; } div#content div#predictions.box h3 a span{ color:#CF292A; font-size:90%; padding-left:20px;} div#content div#predictions.box a.more-link{ padding:6px; color:#4B5F65; font-size:110%; line-height:1.2em; text-decoration:underline; float:right; margin-top:18px;} div#content div#predictions.box div.comment{clear:both; margin-right:0px;} /*---- Countries Map Box ----*/ div#content div#map.box{clear:both;} div#content div.countries h2{margin-bottom:20px;} div#content div.countries img{margin:0px 30px 20px 20px;} div#content div.countries ul li{width:130px; float:left; margin-bottom:6px; background:none;} div#content div.countries ul li a{ font-size:120%; text-decoration:underline; color:#879EA5; line-height:1.2em;} /*---- Registered - Users ----*/ div#content div#registerd_users.box h2{margin-bottom:25px;} div#content div#registerd_users.box ul{clear:both;} div#content div#registerd_users.box ul li{ position:relative; float:left;} div#content div#registerd_users.box ul li img{margin-bottom:10px;} div#content div#registerd_users.box ul li div.photo{ position:absolute;} div#content div#registerd_users.box ul li div.photo img{position:relative;} div#content div#registerd_users.box ul li div.karma{position:absolute; background:url(../images/content/karma.png) top right no-repeat; height:41px; width:35px; z-index:10; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:150%; color:#fff; line-height:45px; text-align:center; top:-10px; right:-10px;} div#content div#registerd_users.box ul li p{font-size:130%; color:#999; line-height:1.2em;} div#content div#registerd_users.box ul li{background:none; padding:15px 12px 0px 12px; width:85px; margin:0px 0px 15px 0px;} div#content div#registerd_users.box ul li p{padding-top:90px; line-height:1.2em;} /*---- Active - Users ----*/ div#content div#active_users.box h2{margin-bottom:25px;} div#content div#active_users.box ul{clear:both;} div#content div#active_users.box ul li{ position:relative; float:left;} div#content div#active_users.box ul li img{margin-bottom:10px;} div#content div#active_users.box ul li div.photo{ position:absolute;} div#content div#active_users.box ul li div.photo img{position:relative;} div#content div.user_group ul li a img, div#content div#photos.box ul li a img, div#content div#registerd_users.box ul li div.photo a img, div#content div#active_users.box ul li div.photo a img {filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: .5;opacity:0.5;} div#content div.user_group ul li a:hover img,div#content div#photos.box ul li a:hover img,div#content div#registerd_users.box ul li div.photo a:hover img,div#content div#active_users.box ul li div.photo a:hover img {filter: alpha(opacity=100);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity: 1;opacity:1;} div#content div#active_users.box ul li div.karma{position:absolute; background:url(../images/content/karma.png) top right no-repeat; height:41px; width:35px; z-index:10; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:150%; color:#fff; line-height:45px; text-align:center; top:-10px; right:-10px;} div#content div#active_users.box ul li p{font-size:130%; color:#999; line-height:1.2em;} div#content div#active_users.box ul li{background:none; padding:15px 12px 0px 12px; width:85px; margin:0px 0px 15px 0px;} div#content div#active_users.box ul li p{padding-top:90px; line-height:1.2em;} /*---- Users - Photos ----*/ div#content div#photos.box h2{margin-bottom:25px;} div#content div#photos.box ul{clear:both;} div#content div#photos.box ul li{background:url(../images/content/image_bg.gif) left top no-repeat; padding:10px; width:114px; height:89px; float:left; margin-right:16px; position:relative;} div#content div#photos.box ul li img{margin-bottom:10px;} div#content div#photos.box ul li div.karma{position:absolute; background:url(../images/content/karma.png) top right no-repeat; height:41px; width:35px; z-index:10; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:150%; color:#fff; line-height:45px; text-align:center; top:-10px; right:-10px;} div#content div#photos.box ul li p{font-size:130%; color:#999; line-height:1.2em;} div#content div#photos.box ul li p{line-height:1.2em;} /*---- Users - Videos ----*/ div#content div#videos.box h2{margin-bottom:25px;} div#content div#videos.box ul{clear:both;} div#content div#videos.box ul li{background:url(../images/content/image_bg.gif) left top no-repeat; padding:10px; width:114px; height:89px; float:left; margin-right:16px; position:relative;} div#content div#videos.box ul li img{margin-bottom:10px;} div#content div#videos.box ul li div.photo{ position:absolute;} div#content div#videos.box ul li div.photo img{position:relative;} div#content div#videos.box ul li div.karma{position:absolute; background:url(../images/content/karma.png) top right no-repeat; height:41px; width:35px; z-index:10; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:150%; color:#fff; line-height:45px; text-align:center; top:-10px; right:-10px;} div#content div#videos.box ul li p{font-size:130%; color:#999; line-height:1.2em;} div#content div#videos.box ul li p{line-height:1.2em;} /*---- Comments Box ----*/ div#content div#comments.box{clear:both; overflow:hidden; width:100%;} div#content div#comments.box a.more-link{float:right; text-decoration:underline;} div#content div#comments.box div.comments{clear:both; overflow:hidden; width:100%; padding-top:15px;} /*------------------------------------------ // 8. USERS PAGE CONTENT //------------------------------------------*/ /*---- User Tab Box ----*/ div#content div.user_tab{background:url(../images/content/image_bg1.gif) left top no-repeat; position:relative; width:233px; height:178px; padding:7px; margin:15px 35px 0px 0px ;} div#content div.user_tab img{position:absolute;} div#content div.user_tab div.karma{background:url(../images/content/karma1.png) 0 0 no-repeat; width:58px; height:67px; position:absolute; right:-14px; top:-25px; text-align:center; font-size:250%; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; line-height:75px;} div#content div.info h2{color:#5b5b5b; font-size:220%; line-height:1.2em; font-weight:normal; margin-right:0px;} div#content div.info p.tagline{font-size:130%; color:#999; margin-bottom:15px;} div#content div.info p{color:#999; font-size:120%; margin-bottom:10px;} div#content div.info div.user_name{width:340px; border-right:1px solid #C8D2D5; padding-right:20px; margin-right:40px;} div#content div.info div.recreation h2{margin-bottom:16px;} div#content div.info div.recreation ul li{ color:#999; font-size:130%; line-height:1.3em;} /*---- Knowledge Box ----*/ div#content div.knowledge{padding-bottom:51px;} div#content div.knowledge h2{margin:0px 0px 26px 15px;} div#content div.knowledge ul li{font-size:130%; color:#999; line-height:1.4em; background:url(../images/content/circle.gif) left center no-repeat; padding-left:15px;} /*---- Curriculum Box ----*/ div#content div.curriculum{ padding:0px 30px;} div#content div.curriculum h2{margin:0px 0px 15px 0px;} div#content div.curriculum p{ font-size:120%; color:#999; margin-bottom:12px;} /*---- Weather - Karma Box ----*/ div#content div.weather_karma h2{margin-bottom:20px;} div#content div.weather_karma img{margin-right:20px;} div#content div.weather_karma div.left{ width:428px; padding:30px 20px; margin-right:40px; border-right:1px solid #C8D2D5; overflow:hidden;} div#content div.weather_karma div.left dl{margin-top:12px; } div#content div.weather_karma div.left dl dt{font-size:130%; color:#546B71; font-weight:bold; float:left; line-height:1.2em; margin:5px 2px 0px 0px; width:170px;} div#content div.weather_karma div.left dl dd{font-size:230%; color:#546B71; float:left; line-height:1.2em; } div#content div.weather_karma div.right h2{font-size:180%; color:#5B5B5B; font-weight:normal; margin:0px 0px 15px 0px;} div#content div.weather_karma div.right p{ color:#999;} /*---- Activitie Box ----*/ div#content div.activities h2{margin-bottom:20px;} div#content div.activities ul {clear:both;} div#content div.activities ul li{margin-bottom:5px; width:100%; overflow:hidden;} div#content div.activities ul li div.photo{ background:url(../images/content/image_bg.gif) left top no-repeat; width:124px; height:89px; padding:10px;} div#content div.activities ul li div.description{float:left; padding:10px; width:730px;} div#content div.activities ul li div.description p{font-size:120%; color:#869EA5;} /*---- Weather - Equipment Box ----*/ div#content div.weather_equipment{padding-bottom:55px;} div#content div.weather_equipment h2{margin:0px 0px 26px 15px;} div#content div.weather_equipment ul li{background:url(../images/content/circle1.gif) left center no-repeat; padding-left:15px; line-height:1.4em; font-size:130%; color:#999;} /*---- Travel Box ----*/ div#content div.travel{ padding:0px 30px;} div#content div.travel h2{margin:0px 0px 15px 0px;} div#content div.travel ul li{margin-bottom:16px;} div#content h4{ font-size:130%; color:#556B71; line-height:1.2em;} div#content div.travel p{ font-size:120%; color:#999; margin-bottom:12px;} div#content p.metadata{ font-size:110%; font-weight:bold; color:#7B9399; margin-bottom:12px;} /*---- User Group Box ----*/ div#content div.user_group {width:100%; overflow:hidden;} div#content div.user_group h2{margin-bottom:43px;} div#content div.user_group ul{clear:both;} div#content div.user_group ul li{float:left; width:86px; margin:0px 26px 20px 0px;}