/**
* CSS
* 
* @version 0.01 tested on Firefox 2.x, 3.x and Safari 3.x 
* @author Vinh TON THAT
* @site lostinmygrid.com

* @you must provide a link to Indexhibit and Lost in my grid on your site someplace - thank you 
  
*/
* {
	margin: 0;
	padding: 0;
}

html, body {
	font-size: 80%;
	font-family: Georgia, "arial", serif;;
	background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

@font-face {
  font-family: "arial";
  src: url(http://www.lostinmygrid.com/ndxz-studio/site/sample/ »
  "Serifa BT".ttf) format("truetype");
}

.clear {clear:both;}

#menu {
	position: fixed;
    width: 100%;
    height: 100px; padding:0px;
	top: 0px; left: 0px;
	overflow: hidden;
	background: #fff;
	border-top: 40px solid #fff;
	border-left: 25px solid #fff;
	padding-bottom: 30px;
}

#menu .container {
	height: 100px;
    padding:10px;
}

h1#site-name {float: left; width: 200px; margin: 0 20px 0 0; padding: 10px 0 0 0; font-size: 2.6em; background-color: #fff;}
h1#site-name a:link {text-decoration: none; font-family: "arial", Georgia;}
h1#site-name a:hover {text-decoration: none; font-family: "arial", Georgia;}
h1#site-name a:visited {text-decoration: none; font-family: "arial", Georgia;}

#menu .container ul {
	float: left; width: 120px; margin: 0 20px 0 0; padding: 5px 0 5px 5px; list-style: none; border-top: 3px solid #0f0f0e; border-bottom: 1px solid #0f0f0e;
}

#menu .container ul li.section-title {margin: 0 0 10px 0; font-family: arial; font-size: 1.4em; font-weight: bold;}

#menu .container ul li {margin: 5px 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif;}

#menu .container a:link { text-decoration: none; color: #0f0f0e; }
#menu .container a:active { text-decoration: none; color: #0f0f0e;}
#menu .container a:visited { text-decoration: none; color: #0f0f0e;}
#menu .container a:hover {text-decoration: none;}

#menu .container a img { border: 0px; }

/* edit 1st margin number uploading new image*/

#content {
	margin: 125px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-left: 25px solid #fff;
}

#content .container {
	min-height: 500px;
    padding: 50px 0px 20px 10px;
    background-color: #fff;

}

#content .container .title-col {
	float: left; width: 195px; height: 180px; margin: 0 20px 0 0; padding: 5px 0 5px 5px; border-top: 3px solid #0f0f0e; border-bottom: 1px solid #0f0f0e;
}

#content .container .title-col ul {margin: 10px 0 0 0; list-style: none;  font-size: 1.1em;}

#content .container .intro {
	width: 420px; padding-left: 230px;
	background-image: url('http://www.lostinmygrid.com/files/grid.png');
	background-repeat:no-repeat;
	background-position: bottom left;
}

#content .container p { width: 420px; margin-bottom: 9px; color: #444;}

#content .container p.legend { width: 195px; margin: 10px 0 5px 0; }
#content .container p#blabla {-webkit-column-count:2; -moz-column-count: 2; -webkit-column-rule:1px dotted #999; -moz-column-rule:1px dotted #999; -webkit-column-gap:25px; -moz-column-gap: 20px; width: 420px; margin: 0px; padding: 0px 0px 10px 0; border-bottom : 1px solid #000; font-size: 1em; text-align:justify; text-decoration: line-through;}

#content .container a:link { text-decoration: none; color: #0f0f0e;}
#content .container a:active { text-decoration: none; color: #0f0f0e;}
#content .container a:visited { text-decoration: none; color: #0f0f0e; }
#content .container a:hover { text-decoration: underline; }

#content .container img#front-image {border: none; }


#content .container img {border: 0px solid #0f0f0e; }

#content .container a img { border: none; }

#content .container .my-article {float: left;  width: 420px; margin: 0 20px 0px 0; padding: 0px 0px 10px 0;}

#content .container .my-article .title-date {width: 414px; height: 20px; margin-bottom: 10px; padding: 5px 3px 3px 3px; font-family: Georgia; font-size: 1.6em;}

#content .container .my-article p {padding: 5px 0; -webkit-column-count:2; -moz-column-count: 2; -webkit-column-rule:1px dotted #999; -moz-column-rule:1px dotted #999; -webkit-column-gap:25px; -moz-column-gap: 20px; font-size: 1.2em; text-align:left; color:#444; border-top: 2px solid #0f0f0e; border-bottom : 1px solid #000; line-height: 1.2em; word-spacing: 3px;}

#content .container .my-article p .lettrine {float:left; margin-right: 5px; font-size: 2em; font-weight: bold; line-height: 1em; color: #0f0f0e;}

#content .container .my-article .chapeau {font-family: Arial,; font-size: 1em; color: #000; font-weight: bold; line-height: 1.2em;}

#content .container .my-article .imovies {padding: 5px 0; font-size: 1.2em; text-align: left; color: #0f0f0e; border-top: 3px solid #0f0f0e; border-bottom : 1px solid #000;}

#content .container #iframed {margin: 0; padding: 0; width: 1240px; height: 520px; overflow: auto;}

h1 { font-family: arial; font-size: 1.8em; margin-bottom: 20px; background-color: #0f0f0e; color: #fff; width: 854px; padding: 5px 3px 3px 3px; height: 20px}
h2 { font-family: arial; font-size: 1.6em; margin-bottom: 10px;}
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }

#img-container	{ margin: 0 0; padding: 0; }

#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }