├── css ├── images │ ├── bg.png │ ├── footer-bg.jpg │ ├── persevere.png │ ├── shadow-sep.png │ ├── footer-light.png │ ├── sidebar-line.png │ └── sliderButton.png └── layout.css ├── pages ├── License.md ├── End-to-end JavaScript.md ├── REST Ajax.md ├── Real-time Comet Applications.md ├── Persistent Data Modeling.md ├── Pluggable Storage.md ├── index.md ├── Installation.md ├── Tutorials.md └── Documentation.md ├── index.js └── template.html /css/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/bg.png -------------------------------------------------------------------------------- /css/images/footer-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/footer-bg.jpg -------------------------------------------------------------------------------- /css/images/persevere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/persevere.png -------------------------------------------------------------------------------- /css/images/shadow-sep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/shadow-sep.png -------------------------------------------------------------------------------- /css/images/footer-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/footer-light.png -------------------------------------------------------------------------------- /css/images/sidebar-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/sidebar-line.png -------------------------------------------------------------------------------- /css/images/sliderButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriszyp/persvr-org/master/css/images/sliderButton.png -------------------------------------------------------------------------------- /pages/License.md: -------------------------------------------------------------------------------- 1 | Persevere is available under either the terms of the modified BSD license or the Academic Free License version 2.1 (see below). -------------------------------------------------------------------------------- /pages/End-to-end JavaScript.md: -------------------------------------------------------------------------------- 1 | Share modules (AMD and CommonJS) and APIs across client and server for max code reuse and consistency with Persevere's module capabilities. 2 | 3 | Persevere's persistence framework is also based on the W3C Indexed DB API for browser databases that enable sharing of model code as and querying code. -------------------------------------------------------------------------------- /pages/REST Ajax.md: -------------------------------------------------------------------------------- 1 | Standards based, resource oriented, content negotiation for JSON, JS, HTML, and more, async middleware-based cross-site support, authentication, CSRF protection, and transaction management make up Persevere's Pintura framework. 2 | 3 | Pintura meticulously follows the HTTP specification to ensure standards-based client-server interoperability and maximum opportunity for component and web service reuse. Persevere is asynchronously based, so it is highly efficient and well-suited for comet-style applications -------------------------------------------------------------------------------- /pages/Real-time Comet Applications.md: -------------------------------------------------------------------------------- 1 | Pub-sub infrastructure, with clustering, comet-based real-time event delivery to browsers integrated with data change notifications allows you to build interactive but scalable push-style applications. Persevere's comet framework, Tunguska, provides a robust publish-subscribe hub designed for distribution across multiple machines. Persevere cohesively combines pub-sub message delegation with data stores for change notifications, making it easy to provide web-based real-time views of data (data retrieval + subscription to changes), as well as build other channels of message delivery like chat and ad-hoc notification that integrate with the data model. 2 | 3 | Persevere makes efficiently use of non-blocking IO to create scalable comet applications. Persevere includes options for various configurations including cross-domain communication and streaming or long-polling based interaction. -------------------------------------------------------------------------------- /pages/Persistent Data Modeling.md: -------------------------------------------------------------------------------- 1 |

JSON Schema-based validation, REST-style handlers, extensible URL-based and chainable querying, facet-based object capability model security provide a comprehensive set of tools for building flexible robust data models. Persevere's Perstore persistence framework is based on the W3C Indexed Database API for a pluggable data store architectures (MongoDB, CouchDB, JSON files, in-memory, SQL).

2 | 3 |

The Introduction to Pintura demonstrates some of the simple data models of Perstore, and this article on Perstore's object capability model and facets shows how to build secure data models with flexible access control and alternate views of data.

4 | 5 |

After getting started you can see the full reference documentation can be found on the project site.

6 | -------------------------------------------------------------------------------- /pages/Pluggable Storage.md: -------------------------------------------------------------------------------- 1 | With cross-platform promise-driven pluggable storage based on W3C's DB API, use MongoDB, CouchDB, in-memory, JSON-files, SQL, and more, layered with conflict resolution, inheritance, aggregation, and modification events. Persevere's persistence framework, Perstore, is built using a modular layered approach for data models to build on top of a pluggable storage system, so you can build applications on top of heterogeneous databases with a consistent API and the flexibility to choose and switch to the optimal storage solution for each situation. 2 | 3 | Perstore includes store layers that add various functionality to data stores like replication, subscriptions to data change events, pseudo inheritance, data types, and aggregation of stores. All stores are based on the W3C Indexed DB API. This means your model code is not based on a proprietary API, but is standards based and portable, the same API is being used in the new generation of browser based databases, making it very easy to share model code between the browser and server. The store API is object oriented, making it very natural to use and is also very simple to implement for custom storage systems (basically just implement get, put, and delete methods). -------------------------------------------------------------------------------- /pages/index.md: -------------------------------------------------------------------------------- 1 |
Learn more
2 |

Real REST for Ajax Applications

3 |

Standards based, resource oriented, content negotiation for JSON, JS, HTML, and more, async middleware-based cross-site support, authentication

4 | 5 |
Learn more
6 |

Persistent Data Modeling

7 |

JSON Schema-based validation, REST-style handlers, extensible URL-based and chainable querying, facet-based object capability model security (more...)

8 | 9 |
Learn more
10 |

Pluggable Storage

11 |

With cross-platform promise-driven pluggable storage based on W3C's DB API, use MongoDB, CouchDB, in-memory, JSON-files, SQL

12 | 13 |
Learn more
14 |

Real-time Comet Applications

15 |

Pub-sub infrastructure, with clustering, comet-based real-time event delivery to browsers integrated with data change notifications (more...)

16 | 17 |
Learn more
18 |

End-to-end JavaScript

19 |

Share modules (CommonJS) and APIs across client and server for max code reuse and consistency with Persevere's module capabilities....

20 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // helpful for debugging 2 | var Static = require("pintura/jsgi/static").Static, 3 | fs = require("fs"), 4 | template = fs.readFileSync("template.html", "utf8"), 5 | staticHandler = Static({urls:[""], root: "../", directoryListing: true}), 6 | Showdown = require("showdown").Showdown.converter; 7 | 8 | require("jsgi-node").start(function(request){ 9 | var path = request.pathInfo; 10 | if(path.indexOf('.') > 0){ 11 | return staticHandler(request); 12 | } 13 | if(path.substring(0,6) == '/Page/'){ 14 | // the old URL structure 15 | return { 16 | status: 302, 17 | headers: { 18 | Location: path.substring(5) 19 | }, 20 | body: [] 21 | } 22 | } 23 | var vars = {}; 24 | try{ 25 | var content = fs.readFileSync( 26 | path == '/' ? "pages/index.md" : 27 | path[path.length - 1] == '/' ? 28 | '..' + path + "/README.md": 29 | 'pages' + decodeURIComponent(path) + '.md', "utf8"); 30 | 31 | }catch(e){ 32 | return { 33 | status: 404, 34 | headers: {}, 35 | body: ["Not found"] 36 | }; 37 | } 38 | var showdown = new Showdown(); 39 | vars.content = showdown.makeHtml(content); 40 | vars.projectDocs = path.length > 1 && path[path.length - 1] == '/'; 41 | vars.path = decodeURIComponent(path).replace(/\//g, ' '); 42 | var body = template.replace(/\{\{([^}]+)\}\}/g, function(t, name){ 43 | return vars[name]; 44 | }); 45 | return { 46 | status: 200, 47 | body: [body], 48 | headers: { 49 | "content-type": "text/html", 50 | "content-length": body.length 51 | } 52 | } 53 | }, {port: require("perstore/util/settings").port}); 54 | -------------------------------------------------------------------------------- /pages/Installation.md: -------------------------------------------------------------------------------- 1 |

If you are using NodeJS, you can install Persevere with NPM. Simply add Persevere packages as dependencies to your application's package.json and run npm install. To install the example wiki, you can simply install the example wiki package: 2 | 

 3 | mkdir node_modules
 4 | cd node_modules
 5 | npm install persevere-example-wiki
 6 |
7 | And then to start it: 8 | 
cd persevere-example-wiki
 9 | node index.js
10 |
11 |

12 |

13 | If you want to run Persevere on Rhino, Persevere is built to work with RingoJS. Persevere packages can be installed with the ringo-admin package installation tool. Download RingoJS, and then install the packages: 14 | (note that errors about removing files are common with ringo-admin for some reason) 15 | 

bin\ringo-admin install kriszyp/perstore
16 | bin\ringo-admin install kriszyp/pintura
17 | bin\ringo-admin install kriszyp/promised-io
18 | bin\ringo-admin install kriszyp/templify
19 | bin\ringo-admin install kriszyp/patr
20 | bin\ringo-admin install kriszyp/rql
21 | bin\ringo-admin install kriszyp/tunguska
22 | bin\ringo-admin install kriszyp/json-schema
23 |
24 | And to install the example wiki: 25 | 
bin\ringo-admin install kriskowal/wiky
26 | bin\ringo-admin install kriszyp/persevere-example-wiki
27 |
28 | Download require.js to packages/requirejs/require.js (sorry, ringo-admin fails to install this package) 29 | 
cd packages/persevere-example-wiki
30 | ..\..\bin\ringo -l persevere-example-wiki/ringo-index.js
31 |
32 | (make sure to start ringo in legacy mode, Persevere uses advanced JavaScript features that are disabled by default in Ringo) -------------------------------------------------------------------------------- /pages/Tutorials.md: -------------------------------------------------------------------------------- 1 |

2 | Before writing code with Persevere it is helpful to understand the basic design goals. Persevere is designed to create applications with user interface implemented primarily on the client side and Persevere playing the role as an HTTP-based RESTful data provider.

Persevere is not an MVC framework, it is built to be the data model (the "M" in the MVC), such that the the viewer and controller can be cleanly implemented separately (typically on the client side). Persevere works beautifully as the server for Ajax-style JSON-based web applications, and can easily be complimented with other types of user interfaces such as an iPhone app, all using the same convenient server interface. One can certainly add viewer and controller technologies to Persevere, but that is not part of the core infrastructure. 3 |

4 | Persevere is a framework composed of several modular autononmous packages that provide different functionality, and cohesively come together to provide a complete RESTful server data storage solution. 5 |

6 | Because Persevere is focused on building data models and providing RESTful access to this data, the basic introductory "Hello World" application of Persevere consists of creating a simple data model and then exposing via the top level web framework within Persevere called Pintura. The getting started with Pintura article provides the essential first steps to creating your first Persevere application. Pintura is a based on a set of middleware components that provide various web interaction capabilities including authentication, multiple media type handling (serialization and deserialization), cross-site data access, conditional request handling, cross site request forgery protection, and data model delegation. 7 |

8 | The getting started article mentioned above also relies on Perstore, the persistence and data modeling library. Next, you can walk through how to leverage the data modeling functionality provided by Perstore including data validation (using JSON Schema), faceting (for fine grained security/access control), object mapping, link management, query normalization, and more. 9 |

10 | Persevere's Tunguska library supports Comet capabilities that integrate with the data model, allowing for monitoring of data for changes, making it easy to build real-time application with dynamically updated data views. Tunguska provides the pub/sub infrastructure designed for distribution across multiple processes and server to facilitate truly scalable real-time applications. 11 |

12 | These articles should get you started with Persevere. From here, it is recommended that you look at the documentation for each project to get more detailed information about the APIs that are available. 13 |

-------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Persevere - The Dojo Foundation 6 | 7 | 8 | {{path}} 9 | 10 | 11 | 14 | 39 | 40 | 41 | 42 |
43 |
44 | 60 |
61 |
62 |
63 |

{{path}}

64 |
65 | {{content}} 66 |
67 | 68 | 69 | 70 |
71 |
72 |
73 | 85 | 86 | -------------------------------------------------------------------------------- /pages/Documentation.md: -------------------------------------------------------------------------------- 1 | Persevere is a web framework for building HTTP/RESTful web applications, and is specifically 2 | designed for Ajax-style applications that benefit from a consistent end-to-end JSON/JavaScript 3 | data and coding. Persevere is composed of several different distinct packages that 4 | coherently combine to robust framework for quickly and easily building JSON-centric 5 | web applications. Persevere's framework allows you to focus on building well-organized 6 | data models, and exposing these to your client side user interface with a minimum of effort. 7 | 8 | See the installation page for installation instructions. 9 | 10 | The basic usage of Persevere is to create a data model with a Perstore data model and 11 | expose it through the Pintura web stack. For example, we could write an app: 12 | 13 | var Model = require("perstore/model").Model, 14 | DefaultStore = require("perstore/stores").DefaultStore 15 | // create a store 16 | store = new DefaultStore(); 17 | // create the data model 18 | Product = Model(store, { 19 | properties: { 20 | name: String 21 | } 22 | }); 23 | // expose the data model through Pintura's HTTP REST interface 24 | require("pintura/pintura").getDataModel = function(request){ 25 | return { 26 | Product: Product 27 | }; 28 | }; 29 | 30 | Using the example wiki as a template, we could edit the app.js with the code above. 31 | Then we could start the application (running node index.js). 32 | And then we could access the data in our database using standard HTTP methods: 33 | 34 | * GET /{model}/{id} - Gets the object with the given id from the model store. 35 | * PUT /{model}/{id} - Updates or creates object with the given id in the model store. 36 | * DELETE /{model}/{id} - Deletes the object with the given id from the model store. 37 | * POST /{model}/ - Creates or incrementally updates an object in model store. 38 | 39 | We could then go on to add logic to our data models or switch to a different backend 40 | database (like MongoDB) in our app.js. See the Perstore documentation for more on 41 | building data models. We could also add to or edit the web stack in the index.js using Pintura. 42 | 43 | This is a very simple condensed example of using Persevere. To get started, you may 44 | want to look at the tutorials. To learn more about the specific 45 | APIs and modules that are available, you can take a look at each of the packages that 46 | make up Persevere: 47 | 48 | ## Pintura 49 | The external interface of Persevere that provides the gateway to the web is Pintura. 50 | Pintura handles HTTP and WebSocket requests, processing these requests by querying and manipulating 51 | the underlying data model. Pintura is made up of a JSGI middleware stack providing 52 | authorization, content negotiation, sessions, cross-domain access and protection, and 53 | error handling in an HTTP standards compliant manner. This package allows you to automatically expose 54 | your data model through JSON and other media types with an out-of-the-box setup 55 | that can easily be customized for specific needs. 56 | 57 | ## Perstore 58 | Perstore provides a the data persistence and modeling layer of Persevere. Perstore 59 | provides several data stores that allow it connect with different backends like 60 | SQL DBs, MongoDB, CouchDB, in-memory, and others. Perstore then provides the 61 | facilities for layering data models on top of these stores that enforce data integrity 62 | constraints and adds model logic. 63 | 64 | ## RQL 65 | Resource Query Language (RQL) is the query language used by Persevere, and is designed specifically for use in 66 | querying JSON-oriented DBs through URLs. The documentationPromised-IO 74 | Promised-IO provides a promise-based library with cross-platform access to file, network, and other OS IO facilities 75 | through a consistent API. Promised-IO provides a promise module for working with 76 | promises with various convenience utility functions. Promised-IO normalizes the access to IO 77 | for Rhino and NodeJS, making it possible to build applications that run on both platforms. 78 | 79 | ## Tunguska 80 | Tunguska is a comet-based distributed publish/subscribe hub 81 | and enables building applications around a pubsub paradigm with real-time message delivery 82 | to browsers. This is used by Pintura to send data in real-time to clients. 83 | 84 | ## Patr 85 | Patr is a promise-based testing framework that is used by Persevere. 86 | 87 | ## JSGI-Node 88 | JSGI-Node is a JSGI container for Node, providing efficient 89 | asynchronous execution of Pintura's JSGI middleware stack. 90 | 91 | ## Templify 92 | Templify is a templating tool for generating HTML from data 93 | objects. 94 | 95 | The source code and bug trackers for these packages are available [here](https://github.com/persvr/). 96 | 97 | Documentation for Persevere 1.0 is available here. 98 | -------------------------------------------------------------------------------- /css/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font: 13px Arial, Helvetica, Garuda, sans-serif; 5 | } 6 | h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code { 7 | margin: 0; 8 | font-size: 100%; 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | table { 13 | font-size: inherit; 14 | } 15 | ul { 16 | } 17 | img { 18 | border: 0; 19 | } 20 | p { 21 | margin: .5em 0 1.2em 0; 22 | } 23 | /****************************************************************** 24 | END CSS RESET 25 | ******************************************************************/ 26 | a{ 27 | color: #196497; 28 | text-decoration: none; 29 | outline: none; 30 | } 31 | a:hover{ color: #0081c1;} 32 | .clear{ 33 | clear: both; 34 | overflow: hidden; 35 | } 36 | 37 | p{ 38 | font-size: 13px; 39 | line-height: 17px; 40 | color: #5f6060; 41 | } 42 | 43 | h1{ 44 | font-size: 28px; 45 | margin-bottom: .8em; 46 | color: #232323; 47 | font-weight: bold; 48 | } 49 | h2{ 50 | font-size: 18px; 51 | line-height:28px; 52 | margin-bottom: .4em; 53 | } 54 | 55 | h3{ 56 | font-size: 15px; 57 | font-weight: bold; 58 | color: #232323; 59 | } 60 | 61 | h4{ 62 | font-size: 16px; 63 | font-weight: bold; 64 | color: #4b4c4c; 65 | } 66 | 67 | strong{ 68 | font-weight: bold; 69 | color: #3a3a3a; 70 | } 71 | 72 | .shadow-sep{ 73 | background: transparent url(images/shadow-sep.png) no-repeat; 74 | width: 940px; 75 | height: 57px; 76 | } 77 | 78 | .margin0{ 79 | margin-bottom: -40px; 80 | } 81 | .left{ 82 | float: left; 83 | overflow: hidden; 84 | margin: 10px 12px 10px 0; 85 | } 86 | 87 | .right{ 88 | float: right; 89 | overflow: hidden; 90 | margin: 0 0 10px 14px; 91 | } 92 | .hline{ 93 | border-top: 1px solid #d4d3d3; 94 | border-bottom: 1px solid #f9f9f9; 95 | clear: both; 96 | margin-top: 5px; 97 | margin-bottom: 10px; 98 | } 99 | 100 | ol li{ 101 | font-size: 13px; 102 | color: #525355; 103 | padding: 0 0 10px; 104 | line-height: 17px; 105 | } 106 | 107 | #left-content ul { 108 | list-style-type:circle; 109 | padding-left:40px; 110 | margin:10px 0 20px 0; 111 | color: #525355; 112 | font-size: 13px; 113 | } 114 | 115 | #left-content ul li { 116 | line-height:17px; 117 | } 118 | 119 | ul.check-list, ul.list-arrow, ul.star{ float:left; margin: 15px 30px 5px 0; 120 | padding: 0 0 10px !important; 121 | } 122 | 123 | 124 | 125 | ul.check-list li{ 126 | padding: 0 0 5px 20px; 127 | margin: 0 0 2px; 128 | font-size: 13px; 129 | color: #525355; 130 | background: transparent url(/images/icons/check.png) no-repeat left center; 131 | float: left; 132 | clear: both; 133 | } 134 | 135 | 136 | 137 | ul.list-arrow li{ 138 | padding: 0 0 5px 20px; 139 | margin: 0 0 2px; 140 | font-size: 13px; 141 | color: #525355; 142 | background: transparent url(/images/icons/list_arrow.png) no-repeat left center; 143 | float: left; 144 | clear: both; 145 | } 146 | 147 | 148 | .intro-text{ 149 | background: transparent url(images/introtext-bg.png) no-repeat; 150 | width: 940px; 151 | height: 120px; 152 | } 153 | 154 | .intro-text h3{ 155 | line-height: 26px; 156 | font-size: 18px; 157 | padding: 21px 0 0 19px; 158 | } 159 | 160 | .intro-text-2{ 161 | background: transparent url(images/introtext-bg.png) no-repeat; 162 | width: 940px; 163 | height: 118px; 164 | margin-bottom: 25px; 165 | } 166 | 167 | .intro-text-2 h3{ 168 | line-height: 26px; 169 | font-size: 18px; 170 | padding: 21px 0 0 19px; 171 | } 172 | 173 | body{ 174 | background: #eeeeee url(images/bg.png) repeat-x 0 -35px; 175 | font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 176 | } 177 | 178 | #bg-light{ 179 | 180 | } 181 | 182 | #wrapper{ 183 | width: 940px; 184 | margin-left: 50px; 185 | } 186 | .wrapper{ 187 | width: 940px; 188 | } 189 | 190 | #top-info{ 191 | height: 30px; 192 | width: 100%; 193 | } 194 | 195 | .top-buttons{ 196 | float: right; 197 | } 198 | 199 | #header{ 200 | height: 104px; 201 | width: 100%; 202 | padding-top:25px; 203 | } 204 | 205 | #logo{ 206 | background: transparent url(images/persevere.png) no-repeat; 207 | width: 283px; 208 | height: 72px; 209 | display: block; 210 | float: left; 211 | text-indent: -9999px; 212 | margin-top: 24px; 213 | } 214 | /**************************** MENU ********************************/ 215 | .menu{ 216 | float: right; 217 | margin-top: 52px; 218 | width: 600px; 219 | } 220 | 221 | .menu ul{ 222 | list-style: none; 223 | list-style-type: none; 224 | float: right; 225 | } 226 | 227 | .menu ul li{ 228 | display: inline; 229 | padding-right: 7px; 230 | padding-left: 11px; 231 | float: left; 232 | text-shadow: #f4f3f5 1px 1px 0; 233 | } 234 | 235 | .menu ul li a{ 236 | font-weight: bold; 237 | text-transform: uppercase; 238 | text-decoration: none; 239 | color: #616262; 240 | font-size: 12px; 241 | } 242 | .menu ul li a:hover{color: #000000;} 243 | .menu ul li a.on{ 244 | color: #000; 245 | 246 | } 247 | /****************************************************************** 248 | SLIDER SECTION 249 | ******************************************************************/ 250 | #featured{ 251 | width: 940px; 252 | height: 455px; 253 | } 254 | 255 | .featured-holder{ 256 | background: transparent url(images/featured-bg.png) no-repeat; 257 | width: 940px; 258 | height: 453px; 259 | } 260 | /****************************************************************** 261 | CONTENT 262 | ******************************************************************/ 263 | #main-content{ 264 | width: 100%; 265 | overflow: hidden; 266 | margin-top: -27px; 267 | } 268 | 269 | #fullwidth{ 270 | width: 100%; 271 | margin: 0 auto; 272 | overflow: hidden; 273 | margin-bottom: 50px; 274 | } 275 | 276 | #content{ 277 | float: left; 278 | width: 640px; 279 | overflow: hidden; 280 | margin-bottom: 20px; 281 | margin-left: 5px; 282 | } 283 | 284 | .main-text{ 285 | width: 929px; 286 | overflow: hidden; 287 | margin: 25px 0 0 13px; 288 | } 289 | 290 | /****************************************************************** 291 | COLUMNS STYLE 292 | ******************************************************************/ 293 | 294 | /****** Three Columns**********/ 295 | .three-columns .column1{ 296 | width: 30%; 297 | float: left; 298 | } 299 | 300 | .three-columns .column2{ 301 | width:30%; 302 | float: left; 303 | padding-left: 45px; 304 | padding-right: 45px; 305 | } 306 | 307 | .three-columns .column3{ 308 | width:30%; 309 | float: left; 310 | } 311 | 312 | /****** Two Columns**********/ 313 | .two-columns{ 314 | width: 100%; 315 | overflow: hidden; 316 | padding-bottom: 26px; 317 | } 318 | 319 | .two-columns .one-third{ 320 | width: 30%; 321 | float: left; 322 | padding-right: 47px; 323 | } 324 | .two-columns .two-third{ height: 60%;} 325 | .two-columns .two-third-first{ 326 | width: 64%; 327 | float: left; 328 | padding-right: 47px; 329 | } 330 | 331 | .two-columns .one-third-second{width: 30%;float: right;} 332 | .two-columns .one-half{ 333 | width: 47%; 334 | float: left; 335 | padding-right: 56px; 336 | } 337 | 338 | .two-columns .one-half2{ 339 | width: 47%; 340 | float: left; 341 | } 342 | 343 | /****** Four Columns**********/ 344 | .four-columns{ 345 | width: 100%; 346 | overflow: hidden; 347 | padding-bottom: 26px; 348 | } 349 | 350 | .four-columns .col1, .four-columns .col2, .four-columns .col3, .four-columns .col4{ 351 | width: 22%; 352 | float: left; 353 | } 354 | .four-columns .col2{padding: 0 37px;} 355 | .four-columns .col3{padding: 0 37px 0 0;} 356 | 357 | 358 | .four-columns .services-col h3, .four-columns .team-col h3, .four-columns .projects-col h3, .four-columns .portfolio-col h3{ 359 | height: 48px; 360 | line-height: 48px; 361 | padding-left: 53px; 362 | } 363 | 364 | .four-columns .services-col h3{ 365 | background: transparent url(/images/icons/services.png) top left no-repeat; 366 | float: left; 367 | } 368 | 369 | .four-columns .team-col h3{ 370 | background: transparent url(/images/icons/col2.png) top left no-repeat; 371 | float: left; 372 | } 373 | 374 | .four-columns .projects-col h3{ 375 | background: transparent url(/images/icons/col3.png) top left no-repeat; 376 | float: left; 377 | } 378 | 379 | .four-columns .portfolio-col h3{ 380 | background: transparent url(/images/icons/col4.png) top left no-repeat; 381 | float: left; 382 | } 383 | .four-columns h3 a{ 384 | color: #232323; 385 | } 386 | /****************************************************************** 387 | HOME CONTENT 388 | ******************************************************************/ 389 | .three-columns{ 390 | width: 100%; 391 | overflow: hidden; 392 | margin-bottom: 36px; 393 | } 394 | 395 | .three-columns .col1, .three-columns .col2, .three-columns .col3{ 396 | float: left; 397 | width: 290px; 398 | } 399 | 400 | .three-columns .col1{ 401 | padding-left: 5px; 402 | padding-right: 0; 403 | } 404 | 405 | .three-columns .col2{ 406 | padding-left: 44px; 407 | padding-right: 41px; 408 | } 409 | 410 | 411 | .aboutus{ 412 | width: 620px; 413 | float: left; 414 | margin-top: 20px; 415 | margin-left: 5px; 416 | } 417 | 418 | .clients{ 419 | margin-top: 15px; 420 | margin-bottom: 21px; 421 | } 422 | 423 | .clients img{ 424 | margin-right: 18px; 425 | } 426 | 427 | .fromtheblog{ 428 | float: right; 429 | width: 290px; 430 | margin-top: 20px; 431 | } 432 | 433 | .fromtheblog ul{ 434 | list-style: none; 435 | list-style-type: none; 436 | float: left; 437 | margin-top: 4px; 438 | } 439 | 440 | .fromtheblog ul li{ 441 | margin-top: 0; 442 | padding-bottom: 10px; 443 | list-style-type: none; 444 | width: 100%; 445 | float: left; 446 | padding-top: 10px; 447 | } 448 | 449 | .fromtheblog ul li img{ 450 | float: left; 451 | padding: 4px; 452 | border: 1px solid #dbdddd; 453 | background-color: #e7e9e9; 454 | margin-right: 18px; 455 | } 456 | 457 | .fromtheblog ul li img:hover{ 458 | border: 1px solid #c4c8c8; 459 | background-color: #dbdddd; 460 | } 461 | 462 | .fromtheblog ul li span.title{ 463 | font-weight: bold; 464 | float: none; 465 | } 466 | 467 | .fromtheblog ul li p{ 468 | float: left; 469 | width: 186px; 470 | margin-top: 4px; 471 | margin-right: 0; 472 | margin-bottom: 0; 473 | } 474 | /****************************************************************** 475 | SERVICES PAGE 476 | ******************************************************************/ 477 | .services{ 478 | width: 100%; 479 | overflow: hidden; 480 | margin-top: -25px; 481 | } 482 | 483 | .service-box{ 484 | float: left; 485 | width: 288px; 486 | margin-left: 16px; 487 | margin-right: 16px; 488 | margin-top: 50px; 489 | } 490 | * html .service-box { margin-left:8px; } 491 | 492 | .service-box img{ 493 | padding: 2px; 494 | background-color: #efefef; 495 | border: 1px solid #d4d6d6; 496 | } 497 | .service-box img:hover{ 498 | padding: 2px; 499 | background-color: #fff; 500 | border: 1px solid #d4d6d6; 501 | } 502 | 503 | 504 | /****************************************************************** 505 | PORTFOLIO STYLE 1 506 | ******************************************************************/ 507 | #portfolio{ 508 | width: 100%; 509 | overflow: hidden; 510 | } 511 | 512 | #portfolio ul{ 513 | display: inline; 514 | float: left; 515 | list-style: none; 516 | } 517 | #portfolio ul li{ 518 | float: left; 519 | position: relative; 520 | width: 298px; 521 | background: transparent url(images/portfoliobg.png) no-repeat; 522 | margin: 0 11px 23px 8px; 523 | } 524 | 525 | #portfolio ul li a { 526 | display:block; 527 | position:relative; 528 | } 529 | 530 | #portfolio ul li a .hover{ 531 | display: none; 532 | position:absolute; 533 | cursor: pointer; 534 | margin: 0 0 14px; 535 | top: 0; 536 | left: 0; 537 | width: 277px; 538 | height: 156px; 539 | background: transparent url(images/hover.png) no-repeat; 540 | } 541 | 542 | 543 | #portfolio ul li img{ 544 | display: inline-block; 545 | float: left; 546 | margin: 0 0 14px; 547 | } 548 | 549 | #portfolio span.item-title{ 550 | color: #1c1c1c; 551 | text-transform: uppercase; 552 | display: block; 553 | margin-top: 4px; 554 | margin-bottom: -4px; 555 | cursor: pointer; 556 | overflow: hidden; 557 | text-shadow: #eeedef 1px 1px 0; 558 | font: bold 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 559 | } 560 | 561 | #portfolio span.item-title:hover{ 562 | color: #0081c1; 563 | } 564 | 565 | #portfolio .description{ 566 | margin-left: 9px; 567 | width: 274px; 568 | float: left; 569 | } 570 | 571 | #portfolio .description h3{ 572 | margin-bottom: -6px; 573 | margin-top: 4px; 574 | } 575 | /****************************************************************** 576 | PORTFOLIO STYLE 2 577 | ******************************************************************/ 578 | #portfolio-2{ 579 | margin-top: -32px; 580 | } 581 | .project{ 582 | width: 100%; 583 | overflow: hidden; 584 | margin-bottom: 18px; 585 | margin-top: 30px; 586 | } 587 | 588 | .project img{ 589 | background: transparent url(images/portfolio2bg.png) no-repeat; 590 | float: left; 591 | padding: 6px 4px 26px 5px; 592 | margin-right: 23px; 593 | } 594 | 595 | .project-description{ 596 | width: 313px; 597 | float: left; 598 | } 599 | 600 | 601 | ul.specifics{ float:left; margin: 0 17px 0 0; 602 | padding: 0; 603 | } 604 | ul.specifics li{ 605 | padding: 0 0 5px 20px; 606 | margin: 0 0 2px; 607 | font-size: 13px; 608 | color: #525355; 609 | background: transparent url(/images/icons/check.png) no-repeat left center; 610 | float: left; 611 | clear: both; 612 | } 613 | /****************************************************************** 614 | BLOG 615 | ******************************************************************/ 616 | 617 | .entry { 618 | width:100%; 619 | display: block; 620 | margin: 0px 0px 10px; 621 | float: left; 622 | position: relative; 623 | padding: 0px 0 35px 0px; 624 | } 625 | 626 | .entry h2{ 627 | width: 569px; 628 | } 629 | 630 | .entry h2 a{ 631 | color: #3b3b3b; 632 | font-weight: bold; 633 | font-size: 25px; 634 | text-shadow: #ffffff 1px 1px 0; 635 | line-height: 0; 636 | } 637 | 638 | .entry h2 a:hover{ 639 | color: #000; 640 | } 641 | 642 | .entry img.entry_image { 643 | background: transparent url(images/blogimg.png) no-repeat; 644 | padding: 4px 2px 20px 1px; 645 | margin: 0px 0px -15px -2px; 646 | } 647 | 648 | .postmetainfo { 649 | width: 100%; 650 | float: left; 651 | padding: 0 0 5px; 652 | } 653 | 654 | 655 | .categorylist{ 656 | float: left; 657 | } 658 | 659 | .categorylist li{ 660 | display: inline; 661 | color: #898a8a; 662 | } 663 | 664 | .categorylist li a.post-author{ 665 | font-weight: bold; 666 | color: #494949; 667 | } 668 | span.categorylist { 669 | color: #898a8a; 670 | display: block; 671 | } 672 | 673 | span.categorylist a.post-author{ 674 | font-weight: bold; 675 | color: #494949; 676 | } 677 | 678 | span.categorylist a.post-author:hover{ 679 | font-weight: bold; 680 | color: #0081c1; 681 | } 682 | 683 | .entry .entry_content { 684 | width: 100%; 685 | margin: 10px 0 0px 0px; 686 | padding: 0 0px 5px; 687 | } 688 | 689 | .postdate { 690 | background: transparent url(images/date.png) no-repeat; 691 | margin-top: 9px; 692 | position: absolute; 693 | width: 74px; 694 | height: 30px; 695 | font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 696 | /* top: -5px; */ 697 | top: 3px; 698 | right: 0; 699 | text-shadow: 0 -1px 0 #000; 700 | } 701 | 702 | .postdate span.day{ 703 | color: #fffeff; 704 | font-size: 18px; 705 | float: left; 706 | margin-left: 18px; 707 | position: relative; 708 | top: 4px; 709 | font-weight: bold; 710 | } 711 | 712 | .postdate span.month{ 713 | color: #fffeff; 714 | float: left; 715 | font-size: 11px; 716 | position: relative; 717 | top: 3px; 718 | left: 4px; 719 | width: 36px; 720 | } 721 | 722 | .postdate span.year{ 723 | color: #fffeff; 724 | float: left; 725 | font-size: 11px; 726 | position: relative; 727 | top: 1px; 728 | left: 4px; 729 | } 730 | 731 | .postdate a { 732 | color: #636464; 733 | text-decoration:none; 734 | font-weight:normal; 735 | font-size: 12px; 736 | font-variant: normal; 737 | } 738 | .postdate a:hover { 739 | text-decoration: underline; 740 | color: #eceeee; 741 | } 742 | /****************************************************************** 743 | RELATED POSTS ENTRY 744 | ******************************************************************/ 745 | #related-posts{ 746 | margin: 10px 0 50px; 747 | } 748 | 749 | ul.related-posts-list { 750 | list-style: none; 751 | overflow: hidden; 752 | width: 100%; 753 | margin-right: 0; 754 | margin-left: 0; 755 | padding: 20px 0 0; 756 | margin-top: -6px; 757 | } 758 | ul.related-posts-list li { 759 | margin-bottom: 0px; 760 | overflow: hidden; 761 | float: left; 762 | margin-top: 0; 763 | padding: 4px; 764 | border: 1px solid #dbdddd; 765 | background-color: #e7e9e9; 766 | margin-right: 18px; 767 | } 768 | ul.related-posts-list a { 769 | overflow: hidden; 770 | display: block; 771 | } 772 | 773 | ul.related-posts-list li.last { 774 | margin-right: 0 !important; 775 | } 776 | 777 | 778 | /****************************************************************** 779 | COMMENTS ENTRY 780 | ******************************************************************/ 781 | #comments{ 782 | width: 621px; 783 | float: left; 784 | margin: 15px 0 15px 17px; 785 | } 786 | 787 | #comments h3{ 788 | margin-left: -15px; 789 | } 790 | span.comments-title{ 791 | color: #484848; 792 | font-size: 35px; 793 | } 794 | 795 | #commentlist { 796 | margin: 10px 0 40px -16px; 797 | padding: 0; 798 | } 799 | #commentlist li { 800 | padding: 0; 801 | list-style: none; 802 | position: relative; 803 | background-color: #f4f4f4; 804 | overflow: hidden; 805 | margin-bottom: 15px; 806 | border-radius:5px; 807 | -moz-border-radius: 5px; 808 | -webkit-border-radius:5px; 809 | border: 1px solid #d4d4d4; 810 | } 811 | 812 | /****/ 813 | .author{ 814 | float: left; 815 | width: 100px; 816 | padding: 10px 0; 817 | margin: 0 5px 0 9px; 818 | } 819 | 820 | .author img{ 821 | margin-right: 10px; 822 | margin-bottom: 10px; 823 | margin-top: 4px; 824 | float: left; 825 | background-color: #e7e9e9; 826 | border: 1px solid #dadada; 827 | } 828 | span.author-name{ 829 | font: 12px/110% Arial, Helvetica, sans-serif; 830 | color: #383838; 831 | position: relative; 832 | left: 2px; 833 | } 834 | 835 | .comment{ 836 | height: 100%; 837 | position: relative; 838 | float: left; 839 | width: 474px; 840 | text-align: justify; 841 | margin-left: 10px; 842 | padding-bottom: 15px; 843 | padding-top: 11px; 844 | } 845 | 846 | 847 | .comment p{ 848 | color: #6b6b6b; 849 | } 850 | 851 | /****/ 852 | #commentlist cite { 853 | font: bold 140%/110% Arial, Helvetica, sans-serif; 854 | color: #666; 855 | } 856 | #commentlist .time { 857 | color: #7c7d7d; 858 | margin: 0 0 17px; 859 | position: relative; 860 | top: 3px; 861 | font-weight: bold; 862 | } 863 | #commentlist .commentnumber { 864 | position: absolute; 865 | right: 15px; 866 | top: 2px; 867 | font: normal 289%/100% Georgia, "Times New Roman", Times, serif; 868 | color: #cacaca; 869 | text-shadow: #fffeff 1px 1px 0; 870 | } 871 | /****************************************************************** 872 | COMMENT FORM 873 | ******************************************************************/ 874 | 875 | #commentform { 876 | margin:0px; 877 | padding: 15px 0 20px; 878 | float: left; 879 | position: relative; 880 | width: 100%; 881 | } 882 | #commentform .holder { 883 | padding-top: 15px; 884 | } 885 | #commentform div { 886 | float: left; 887 | width: 221px; 888 | position: relative; 889 | margin: 0px; 890 | padding: 0px; 891 | } 892 | #commentform div label { 893 | display: block; 894 | font-size: 0.9em; 895 | padding-left: 2px; 896 | color: #575858; 897 | padding-bottom: 3px; 898 | font-weight: bold; 899 | } 900 | #commentform div label.error { 901 | color: #a80000; 902 | position: absolute; 903 | right: 29px; 904 | text-align: right; 905 | font-size: 0.9em; 906 | top: 0px; 907 | } 908 | 909 | .submit-button{ 910 | position: relative; 911 | left: 14em; 912 | } 913 | #commentform input{ 914 | border: 1px solid #d4d4d4; 915 | font-family:Arial, Helvetica, sans-serif; 916 | font-size:12px; 917 | color: #626363; 918 | border-radius: 3px; 919 | -moz-border-radius:3px; 920 | -webkit-border-radius:3px; 921 | width: 199px; 922 | background-color: #f4f4f4; 923 | margin: 0 0 8px 2px; 924 | padding: 9px 5px 11px; 925 | } 926 | #commentform textarea { 927 | color: #626363; 928 | border: 1px solid #d4d4d4; 929 | border-radius: 3px; 930 | -moz-border-radius:3px; 931 | -webkit-border-radius:3px; 932 | height: 155px; 933 | background-color: #f4f4f4; 934 | width: 407px; 935 | margin-top: -1px; 936 | } 937 | #commentform input:focus, textarea:focus { 938 | color: #454646; 939 | border: 1px solid #d4d4d4; 940 | background-color: #f4f4f4; 941 | } 942 | #commentform .submit { 943 | display: inline-block; 944 | text-decoration: none; 945 | margin-top: 0; 946 | text-transform: none; 947 | width: auto; 948 | height: 33px; 949 | float: right; 950 | margin-right: -12px; 951 | padding: 6px 10px 6px 9px; 952 | border-color: #4092c0 #1f68a1 #175e97; 953 | text-shadow: 0px -1px 1px #1f68a1; 954 | background-color: #3f91c0; 955 | /**/ 956 | background: -moz-linear-gradient(top, 957 | #94dbff, 958 | #009be8 5%, 959 | #00699d 960 | ); 961 | background: -webkit-gradient(linear, left top, left bottom, 962 | from(#94dbff), 963 | color-stop(0.05, #009be8), 964 | to(#00699d) 965 | ); 966 | 967 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009be8', EndColorStr='#00699d'); 968 | color: #fffeff; 969 | font: bold 13px/18px "Tahoma", Arial, sans-serif; 970 | cursor: pointer; 971 | } 972 | 973 | #commentform .submit:hover, .submit:focus { 974 | border-color: #4092c0 #1f68a1 #175e97; 975 | text-shadow: 0px -1px 1px #1f68a1; 976 | background-color: #3f91c0; 977 | 978 | background: -moz-linear-gradient(top, 979 | #94dbff, 980 | #49b3e8 5%, 981 | #0083c4 982 | ); 983 | background: -webkit-gradient(linear, left top, left bottom, 984 | from(#94dbff), 985 | color-stop(0.05, #49b3e8), 986 | to(#0083c4) 987 | ); 988 | 989 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#49b3e8', EndColorStr='#0083c4'); 990 | color: #fffeff; 991 | 992 | } 993 | #commentform .submit:active{ 994 | border-color: #206fa8 #2e7fb4 #4b9ec9; 995 | text-shadow: 0px -1px 1px #1f68a1; 996 | background: -moz-linear-gradient(top, 997 | #00699d, 998 | #0083c4 999 | ); 1000 | background: -webkit-gradient(linear, left top, left bottom, 1001 | from(#00699d), 1002 | to(#0083c4) 1003 | ); 1004 | 1005 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#00699d', EndColorStr='#0083c4'); 1006 | } 1007 | #commentform em { 1008 | font-style:italic; 1009 | color:#999999; 1010 | font-size:0.9em; 1011 | } 1012 | /****************************************************************** 1013 | SIDEBAR 1014 | ******************************************************************/ 1015 | #sidebar { 1016 | float: right; 1017 | width: 287px; 1018 | padding: 0 0px 0px 0; 1019 | background: url(images/sidebar-line.png) repeat-y left; 1020 | } 1021 | 1022 | .sidebar-block{ 1023 | float: left; 1024 | width: 100%; 1025 | height: auto; 1026 | margin-bottom: 25px; 1027 | } 1028 | .block-title{ 1029 | width: 283px; 1030 | margin-left: 20px; 1031 | } 1032 | 1033 | .subnavigation ul li{ 1034 | list-style-image: none; 1035 | background: url(/images/icons/list_arrow.png) no-repeat left 3px; 1036 | padding: 0 0 9px 17px; 1037 | margin: 0 0 4px 9px; 1038 | font-size: 13px; 1039 | color: #525355; 1040 | text-decoration: none; 1041 | list-style-type: none; 1042 | float: none; 1043 | } 1044 | 1045 | .subnavigation ul li a{ 1046 | text-decoration: none; 1047 | color: #7b7b7b; 1048 | font-size: 13px; 1049 | text-shadow: #faf9fb 1px 1px 0; 1050 | } 1051 | 1052 | .subnavigation ul li a:hover{ 1053 | color: #2a2b2b; 1054 | } 1055 | .block-content{ 1056 | margin-left: 14px; 1057 | } 1058 | 1059 | .block-content p{ 1060 | padding-left: 7px; 1061 | } 1062 | /****************************************************************** 1063 | POPULAR POSTS BLOG SIDEBAR 1064 | ******************************************************************/ 1065 | 1066 | ul.blog-posts { 1067 | list-style: none; 1068 | overflow: hidden; 1069 | width: 100%; 1070 | margin-right: 0; 1071 | margin-left: 0; 1072 | padding: 0; 1073 | list-style-type: none; 1074 | } 1075 | 1076 | ul.blog-posts img { 1077 | float: left; 1078 | padding: 4px; 1079 | border: 1px solid #dbdddd; 1080 | background-color: #e7e9e9; 1081 | margin-right: 14px; 1082 | } 1083 | 1084 | ul.blog-posts img:hover { 1085 | float: left; 1086 | padding: 4px; 1087 | border: 1px solid #c4c8c8; 1088 | background-color: #dbdddd; 1089 | margin-right: 14px; 1090 | } 1091 | 1092 | ul.blog-posts li { 1093 | float: left; 1094 | margin: 0px; 1095 | padding: 7px 0px 11px 5px; 1096 | border-bottom: 1px solid #dddfdf; 1097 | border-top: 1px solid #f4f6f6; 1098 | width: 249px; 1099 | color: #6f6f6f; 1100 | list-style-type: none; 1101 | } 1102 | 1103 | ul.blog-posts li:last-child { 1104 | border-bottom: none; 1105 | } 1106 | 1107 | ul.blog-posts li:first-child{ 1108 | border-top: none; 1109 | } 1110 | ul.blog-posts li a { 1111 | font-size: 11px; 1112 | text-transform: uppercase; 1113 | color: #2f3030; 1114 | font-weight: bold; 1115 | } 1116 | 1117 | ul.blog-posts li a:hover{ 1118 | color: #0081c1; 1119 | } 1120 | /****************************************************************** 1121 | ADVERTISE SIDEBAR 1122 | ******************************************************************/ 1123 | ul.advertise { 1124 | list-style: none; 1125 | overflow: hidden; 1126 | width: 100%; 1127 | margin-right: 0; 1128 | margin-left: 7px; 1129 | padding: 0; 1130 | list-style-type: none; 1131 | } 1132 | ul.advertise li { 1133 | float: left; 1134 | margin: 0px 0 0px 0px; 1135 | display: inline; 1136 | width: 131px; 1137 | padding: 0px 2px 7px 0px; 1138 | } 1139 | ul.advertise img { 1140 | padding: 1px; 1141 | border: 1px solid #dbdddd; 1142 | background-color: #e7e9e9; 1143 | } 1144 | 1145 | ul.advertise img:hover{ 1146 | border: 1px solid #c4c8c8; 1147 | background-color: #dbdddd; 1148 | } 1149 | 1150 | /****************************************************************** 1151 | FROM FLICKR SIDEBAR 1152 | ******************************************************************/ 1153 | .flickr ul{ 1154 | display: inline; 1155 | float: left; 1156 | width: 100%; 1157 | list-style-type: none; 1158 | margin-left: 7px; 1159 | } 1160 | 1161 | .flickr ul li{ 1162 | display: inline; 1163 | margin: 0 5px 14px 0; 1164 | list-style-type: none; 1165 | float: left; 1166 | } 1167 | 1168 | .flickr ul li img{ 1169 | padding: 4px; 1170 | border: 1px solid #dbdddd; 1171 | background-color: #e7e9e9; 1172 | } 1173 | 1174 | .flickr ul li img:hover{ 1175 | border: 1px solid #c4c8c8; 1176 | background-color: #dbdddd; 1177 | } 1178 | /****************************************************************** 1179 | POPULAR TAGS 1180 | ******************************************************************/ 1181 | .tags-content{ 1182 | width: 267px; 1183 | margin: 0 0 18px 7px; 1184 | } 1185 | 1186 | .tags li{ 1187 | display: inline; 1188 | float: left; 1189 | } 1190 | .tags a{ 1191 | display: inline-block; 1192 | color: #fafefe; 1193 | border-radius:4px; 1194 | -moz-border-radius: 4px; 1195 | -webkit-border-radius:4px; 1196 | margin: 5px 5px 0 0; 1197 | padding: 5px 10px; 1198 | cursor: pointer; 1199 | } 1200 | 1201 | .tags a:hover { 1202 | color: #fffeff; 1203 | background-color: #0081c1; 1204 | text-decoration: none; 1205 | } 1206 | .tag1 { 1207 | background-color: #9a9b9b; 1208 | } 1209 | .tag2 { 1210 | background-color: #acaeae; 1211 | } 1212 | .tag3 { 1213 | background-color: #898a8a; 1214 | } 1215 | .tag4 { 1216 | background-color: #767878; 1217 | } 1218 | .tag5 { 1219 | background-color: #9c9e9e; 1220 | } 1221 | 1222 | 1223 | /****************************************************************** 1224 | SOCIAL SIDEBAR 1225 | ******************************************************************/ 1226 | ul.social { 1227 | list-style: none; 1228 | overflow: hidden; 1229 | width: 100%; 1230 | margin-right: 0; 1231 | margin-left: 0; 1232 | padding: 13px 0 0 8px; 1233 | } 1234 | ul.social li { 1235 | margin-bottom: 0px; 1236 | overflow: hidden; 1237 | float: left; 1238 | margin-top: -9px; 1239 | } 1240 | ul.social a { 1241 | width: 32px; 1242 | overflow: hidden; 1243 | display: block; 1244 | padding: 0 10px 8px 0; 1245 | } 1246 | 1247 | /****************************************************************** 1248 | CONTACT-INFO SIDEBAR 1249 | ******************************************************************/ 1250 | .contact-info{ 1251 | width: 211px; 1252 | margin-left: 4px; 1253 | margin-bottom: 20px; 1254 | } 1255 | ul.contact-info{ 1256 | padding-top: 0; 1257 | padding-bottom: 0; 1258 | } 1259 | ul.contact-info li{ 1260 | padding-top: 10px; 1261 | color: #626363; 1262 | font-size: 12px; 1263 | padding-left: 31px; 1264 | width: 100%; 1265 | } 1266 | 1267 | ul.contact-info li.phone { 1268 | background: transparent url(/images/icons/phone.png) no-repeat 3px 14px; 1269 | } 1270 | ul.contact-info li.email { 1271 | background: transparent url(/images/icons/mail.png) no-repeat 0 13px; 1272 | } 1273 | ul.contact-info li.msn { 1274 | background: transparent url(/images/icons/msn.png) no-repeat 0 14px; 1275 | } 1276 | ul.contact-info li.address { 1277 | background: transparent url(/images/icons/home.png) no-repeat 0 13px; 1278 | } 1279 | 1280 | ul.contact-info li strong{ 1281 | font-weight: bold; 1282 | color: #323333; 1283 | font-size: 13px; 1284 | line-height: 21px; 1285 | } 1286 | ul.contact-info li a{color: #626363;} 1287 | ul.contact-info li a:hover{color: #2997c4;} 1288 | /****************************************************************** 1289 | SIDEBAR SEARCH 1290 | ******************************************************************/ 1291 | #search { 1292 | margin: 0px 0px 15px; 1293 | float: right; 1294 | width: 266px; 1295 | background-image: url(images/search-inputbg.png); 1296 | background-repeat: no-repeat; 1297 | padding: 0 0px; 1298 | height: 41px; 1299 | } 1300 | #search input { 1301 | margin: 9px 0px 0px 13px; 1302 | float: left; 1303 | width: 183px; 1304 | height: 23px; 1305 | color: #6d6f6f; 1306 | font-size: 13px; 1307 | background-color: transparent; 1308 | border: none; 1309 | padding: 0 3px 2px 2px; 1310 | font-style: italic; 1311 | } 1312 | 1313 | #search .search_button { 1314 | background: transparent url(images/searchbtn.png) no-repeat 0 0; 1315 | color: #eaeaea; 1316 | float: right; 1317 | width: 59px; 1318 | margin: 0; 1319 | border: none; 1320 | padding: 7px; 1321 | position: relative; 1322 | right: 4px; 1323 | top: 2px; 1324 | text-decoration: none; 1325 | text-transform: capitalize; 1326 | height: 35px; 1327 | display: block; 1328 | cursor: pointer !important; 1329 | text-shadow: #000 1px 1px 0; 1330 | text-indent: -9999px; 1331 | } 1332 | 1333 | #search .search_button:hover{ 1334 | background: transparent url(images/searchbtn.png) no-repeat 0 -35px; 1335 | width: 59px; 1336 | height: 35px; 1337 | padding: 7px; 1338 | color: #fffeff; 1339 | } 1340 | 1341 | #search .search_button:active{ 1342 | background: transparent url(images/searchbtn.png) no-repeat 0 -70px; 1343 | width: 59px; 1344 | height: 35px; 1345 | padding: 7px; 1346 | color: #fffeff; 1347 | } 1348 | 1349 | /****************************************************************** 1350 | FOOTER 1351 | ******************************************************************/ 1352 | 1353 | #footer{ 1354 | background: #000 url(images/footer-bg.jpg) repeat-x; 1355 | height: 135px; 1356 | } 1357 | 1358 | .footer-content{ 1359 | height: 116px; 1360 | margin: 0 auto !important; 1361 | padding: 19px 36px 0; 1362 | width: 940px; 1363 | font-size: 12px; 1364 | color: #555; 1365 | background: url(images/footer-light.png) no-repeat right 3px; 1366 | text-shadow: 0 1px 0 #000; 1367 | } 1368 | 1369 | #logo-footer{ 1370 | background: transparent url(images/logo-footer.png) no-repeat; 1371 | width: 155px; 1372 | height: 48px; 1373 | margin-top: 18px; 1374 | display: block; 1375 | text-indent: -9999px; 1376 | margin-right: 10px; 1377 | } 1378 | 1379 | .footer-left{ float: left;} 1380 | .footer-right{ float: right;} 1381 | #footer p{ 1382 | color: #919494; 1383 | margin-top: 33px; 1384 | margin-bottom: 1px; 1385 | text-shadow: none; 1386 | } 1387 | #footer a{ 1388 | color: #7f7f7f; 1389 | text-decoration: none; 1390 | font-weight: normal; 1391 | font-style: normal; 1392 | } 1393 | #footer a:hover{ color: #dadada;} 1394 | /****************************************************************** 1395 | JQUERY TIP 1396 | ******************************************************************/ 1397 | .tipsy { 1398 | padding: 5px; 1399 | font-size: 13px; 1400 | opacity: 0.8; 1401 | background-repeat: no-repeat; 1402 | background-image: url(images/tipsy.gif); 1403 | width: 120px; 1404 | } 1405 | 1406 | .tipsy-inner { 1407 | padding: 5px 8px 4px 8px; 1408 | background-color: #333; 1409 | color: white; 1410 | max-width: 200px; 1411 | text-align: center; 1412 | } 1413 | .tipsy-inner { 1414 | border-radius: 3px; 1415 | -moz-border-radius:3px; 1416 | -webkit-border-radius:3px; 1417 | } 1418 | .tipsy-north { background-position: top center; } 1419 | .tipsy-south { background-position: bottom center; } 1420 | .tipsy-east { background-position: right center; } 1421 | .tipsy-west { background-position: left center; } 1422 | /* step style */ 1423 | #step { 1424 | margin: 10px 0 40px; 1425 | padding: 0; 1426 | overflow: hidden; 1427 | } 1428 | #step li { 1429 | padding: 3px 0 6px 110px; 1430 | margin: 0; 1431 | list-style: none; 1432 | float: left; 1433 | } 1434 | 1435 | .step-content{ 1436 | overflow: hidden; 1437 | display: inline-block; 1438 | position: relative; 1439 | height: auto; 1440 | right: 110px; 1441 | margin-top: 20px; 1442 | width: 631px; 1443 | } 1444 | 1445 | .step-content img{ 1446 | float: left; 1447 | margin-bottom: 15px; 1448 | } 1449 | 1450 | .step-content p{ 1451 | 1452 | } 1453 | 1454 | #step h3 { 1455 | margin: 0 0 5px; 1456 | color: #666; 1457 | line-height: 100%; 1458 | font-size: 22px; 1459 | } 1460 | #step .item1 { 1461 | background: url(images/step1.png) no-repeat; 1462 | width: 521px; 1463 | } 1464 | #step .item2 { 1465 | background: url(images/step2.png) no-repeat; 1466 | width: 521px; 1467 | } 1468 | #step .item3 { 1469 | background: url(images/step3.png) no-repeat; 1470 | width: 521px; 1471 | } 1472 | #step .item4 { 1473 | background: url(images/step4.png) no-repeat; 1474 | width: 521px; 1475 | } 1476 | /****************************************************************** 1477 | CONTACT FORM 1478 | ******************************************************************/ 1479 | #contact p, label, legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } 1480 | 1481 | #contact h1 { margin: 10px 0 10px; color: #414242; 1482 | font-size: 20px; 1483 | } 1484 | #contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; } 1485 | 1486 | #contact { 1487 | display: block; 1488 | width: 100%; 1489 | margin: 30px auto 60px; 1490 | padding: 0; 1491 | } 1492 | 1493 | /* Form style */ 1494 | 1495 | #contact label { 1496 | display: inline-block; 1497 | float: left; height: 26px; 1498 | line-height: 26px; 1499 | width: 96px; 1500 | font-size: 13px; 1501 | color: #656666; 1502 | margin-top: 3px; 1503 | font-weight: bold; 1504 | } 1505 | #contact input, textarea, select, 1506 | #paymentSelect .submitButton { 1507 | width: 280px; 1508 | margin: 5px 0 11px; 1509 | color: #a1a1a1; 1510 | background: #f7f7f7; 1511 | border: 1px solid #e8e8e8; 1512 | -moz-border-radius:3px; -webkit-border-radius:3px; 1513 | padding-top: 6px; 1514 | padding-left: 5px; 1515 | padding-right: 5px; 1516 | height: 20px; 1517 | /* INNER SHADOWS */ 1518 | -moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.3), inset 0px 1px 2px rgba(0,0,0,0.15); 1519 | -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3), inset 0px 1px 2px rgba(0,0,0,0.15); 1520 | box-shadow: 0px 1px 1px rgba(255,255,255,0.3), inset 0px 1px 2px rgba(0,0,0,0.15); 1521 | font-size: 13px; 1522 | } 1523 | 1524 | #contact textarea{ 1525 | width: 406px; 1526 | height: 162px; 1527 | margin-bottom: 0; 1528 | padding-bottom: 0; 1529 | margin-left: 0; 1530 | } 1531 | 1532 | #contact input:focus, textarea:focus, select:focus { 1533 | color:#666; 1534 | } 1535 | #contact input.submit, 1536 | #paymentSelect .submitButton { 1537 | display: block; 1538 | text-decoration: none; 1539 | margin-top: 13px; 1540 | text-transform: none; 1541 | width: auto; 1542 | height: 33px; 1543 | float: left; 1544 | margin-right: 0; 1545 | padding: 6px 10px 6px 9px; 1546 | border-color: #4092c0 #1f68a1 #175e97; 1547 | text-shadow: 0px -1px 1px #1f68a1; 1548 | background-color: #3f91c0; 1549 | /**/ 1550 | background: -moz-linear-gradient(top, 1551 | #94dbff, 1552 | #009be8 5%, 1553 | #00699d 1554 | ); 1555 | background: -webkit-gradient(linear, left top, left bottom, 1556 | from(#94dbff), 1557 | color-stop(0.05, #009be8), 1558 | to(#00699d) 1559 | ); 1560 | 1561 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009be8', EndColorStr='#00699d'); 1562 | color: #fffeff; 1563 | font: bold 13px/18px "Tahoma", Arial, sans-serif; 1564 | cursor: pointer; 1565 | position: relative; 1566 | left: 384px; 1567 | } 1568 | #contact input.submit:hover, 1569 | #paymentSelect .submitButton:hover { 1570 | border-color: #4092c0 #1f68a1 #175e97; 1571 | text-shadow: 0px -1px 1px #1f68a1; 1572 | background-color: #3f91c0; 1573 | 1574 | background: -moz-linear-gradient(top, 1575 | #94dbff, 1576 | #49b3e8 5%, 1577 | #0083c4 1578 | ); 1579 | background: -webkit-gradient(linear, left top, left bottom, 1580 | from(#94dbff), 1581 | color-stop(0.05, #49b3e8), 1582 | to(#0083c4) 1583 | ); 1584 | 1585 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#49b3e8', EndColorStr='#0083c4'); 1586 | color: #fffeff; 1587 | 1588 | } 1589 | #contact input.submit:active, 1590 | #paymentSelect .submitButton:active { 1591 | border-color: #206fa8 #2e7fb4 #4b9ec9; 1592 | text-shadow: 0px -1px 1px #1f68a1; 1593 | background: -moz-linear-gradient(top, 1594 | #00699d, 1595 | #0083c4 1596 | ); 1597 | background: -webkit-gradient(linear, left top, left bottom, 1598 | from(#00699d), 1599 | to(#0083c4) 1600 | ); 1601 | 1602 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#00699d', EndColorStr='#0083c4'); 1603 | 1604 | } 1605 | 1606 | #paymentSelect select { 1607 | width: auto; 1608 | height: auto; 1609 | margin-right: 10px; 1610 | padding: 0; 1611 | color: #000; 1612 | background: #FFF; 1613 | border: 1px solid #CCC; 1614 | border-radius: 0; 1615 | -webkit-border-radius: 0; 1616 | -moz-border-radius: 0; 1617 | padding: 0; 1618 | /* INNER SHADOWS */ 1619 | -moz-box-shadow: none; 1620 | -webkit-box-shadow: none; 1621 | box-shadow: none; 1622 | font-size: inherit; 1623 | } 1624 | 1625 | #paymentSelect .submitButton { 1626 | float: none; 1627 | position: static; 1628 | display: inline; 1629 | } 1630 | 1631 | #contact input[type="submit"][disabled] { 1632 | border-color: #206fa8 #2e7fb4 #4b9ec9; 1633 | text-shadow: 0px -1px 1px #1f68a1; 1634 | background: -moz-linear-gradient(top, 1635 | #00699d, 1636 | #0083c4 1637 | ); 1638 | background: -webkit-gradient(linear, left top, left bottom, 1639 | from(#00699d), 1640 | to(#0083c4) 1641 | ); 1642 | 1643 | filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#00699d', EndColorStr='#0083c4'); 1644 | 1645 | } 1646 | #contact fieldset { 1647 | padding: 0; 1648 | border:none; 1649 | } 1650 | 1651 | #contact legend { 1652 | padding:7px 10px; 1653 | font-weight:bold; color:#000; border:1px solid #eee; -moz-border-radius:5px; -webkit-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; } 1654 | 1655 | #contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */ 1656 | 1657 | #message { margin: 10px 0; padding: 0; } 1658 | 1659 | .error_message { display: block; line-height: 22px; background: #f6f6f6 url('/images/template/error.png') no-repeat 10px 6px; padding: 3px 10px 3px 35px; color: #0a0a0a;border: 1px solid #e5e5e5; -moz-border-radius:5px; -webkit-border-radius:5px; } 1660 | 1661 | ul.error_messages { margin: 0 0 0 15px; padding: 0; } 1662 | ul.error_messages li { height: 11px; line-height: 22px; color:#333; margin-bottom: 10px;} 1663 | 1664 | .loader { padding: 0 10px; 1665 | float: left; 1666 | margin-top: 16px; 1667 | position: relative; 1668 | left: 220px; 1669 | top: 6px; 1670 | } 1671 | 1672 | #contact #success_page h1 { background: url('/images/template/success.gif') left no-repeat; padding-left:22px; } 1673 | 1674 | .projectsInfo { 1675 | text-transform:uppercase; 1676 | } 1677 | 1678 | 1679 | 1680 | /* custom */ 1681 | h3 { margin-bottom: 1em } 1682 | .imageStyle { padding:5px; background:#fff; border:1px solid #ababab; height: 114px; width: 114px; } 1683 | .projectLogo { float:right; padding:10px 0 30px 30px; } 1684 | .errfield { background:#fffea1 !important; border-color:#fc0 !important; } 1685 | 1686 | html { /* background: #000 url(images/footer-bg.jpg) repeat-y; */ height: 100%; } 1687 | body { /* position:relative; */ height:100%; padding-bottom:0; margin-bottom:0; text-shadow: 0 1px 0 rgba(255,255,255,.9);} 1688 | * html #bg-light { height:100%; } 1689 | 1690 | #footer { position:absolute; width:100%; left:0; bottom:0; height: 135px; } 1691 | #footer p { text-shadow: none } 1692 | #main-content { /* min-height:420px; */ padding-bottom:135px; } 1693 | .featured-holder { text-shadow: 0 1px 0 rgba(255,255,255,.7) } 1694 | #sidebar { margin-bottom:40px; } 1695 | 1696 | #bg-light{ 1697 | min-height:100%; 1698 | position:relative; 1699 | } 1700 | 1701 | ul.no-float, ul.no-float li { float:none; background: transparent url(/images/icons/list_arrow.png) no-repeat left 3px; } 1702 | 1703 | 1704 | #toc { 1705 | top: 180px; 1706 | left: 750px; 1707 | width: 250px; 1708 | background-color: #f3f3f3; 1709 | } 1710 | #toc .dgrid-scroller { 1711 | overflow-y: auto; 1712 | } 1713 | .linkButtonContainer { 1714 | position: relative; 1715 | float: left; 1716 | height: 50px; 1717 | width: 170px; 1718 | margin-right: 15px; 1719 | } 1720 | .linkButton { 1721 | text-indent:-9999px; 1722 | background:transparent url(images/sliderButton.png) top center no-repeat; 1723 | height:50px; 1724 | width:170px; 1725 | position:absolute; 1726 | } 1727 | 1728 | .linkButton:hover {background:transparent url(images/sliderButton.png) bottom center no-repeat;} 1729 | --------------------------------------------------------------------------------