/****************************************************************************** * Noop::Afghanistankomiteen::CSS * * Author:svale/andreas@noop.no * $Date: 2009-11-20 13:29:18 $ * $Revision: 1.14 $ * * ***/ /************************************************************************************************************/ /* page layout */ body {margin:0; padding:2em 0 0 0 ; border:0; color:#3a3434; font:75% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} #border {position:relative; width:80em; margin:0 auto; padding:0 0.5em; background:url(../images/border.png) 50% 0 repeat-y} #head {position:relative; width:80em; background:url(../images/border-top.png) repeat-x; padding:0.95em 0 0 0.4em} #page {position:relative; width:79.15em; margin:2.8em auto 2em auto; overflow:hidden; background:url(../images/vertline.png) 51.1em 0 repeat-y} #colwrap {position:relative; width:68em; right:20.7em; float:left} /* right = right column width */ #main {position:relative; width:45em; left:25.8em; float:left} /* width = maincol content width (maincol width minus left and right padding) | left = (rightcol width) plus (maincol left padding) */ #right {position:relative; width:21.65em; left:28em; float:left; padding-top:1em; overflow:hidden} /* width = rightcol content width (rightcol width minus left and right padding) | left = (rightcol width) plus (maincol left and right padding) plus (rightcol left padding) */ #colophon {position:relative; width:72em; margin:2.8em auto 2em auto; overflow:hidden; color:#4d4d4d; line-height:1.8em; text-align:center} /*border*/ #topleft {position:absolute; top:0; left:0; width:0.5em; height:0.5em; background:url(../images/border-topleft.png) no-repeat} #topright {position:absolute; top:0; right:0; width:0.5em; height:0.5em; background:url(../images/border-topright.png) no-repeat} #btmleft {position:absolute; bottom:0; left:0; width:0.5em; height:0.75em; background:url(../images/border-btmleft.png) no-repeat} #btmright {position:absolute; bottom:0; right:0; width:0.5em; height:0.75em; background:url(../images/border-btmright.png) no-repeat} /*globals */ div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td {margin:0; padding:0; border:0} p {font-size:1em; margin:1em 0; line-height:1.55} p.f {margin:0 0 1em} p.l {margin:1em 0 0} .center {text-align:center} .hidden {display:none; margin:0} strong, em, b, i {font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} /*font overide, ref:http://www.brownbatterystudios.com/sixthings/2007/03/14/lucida-hybrid-the-grande-alternative/*/ input {font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:1em} input.txt {vertical-align:middle; padding:0.5em; margin:0; overflow:hidden} input.btn {vertical-align:middle; padding:0.5em; margin:0; overflow:hidden} textarea {vertical-align:middle; padding:0.5em; margin:0; overflow:auto} h1 {font:2.5em/1.3em Georgia, Times, Times New Roman, serif; color:#af931e} h2 {font:700 1.4em/1.2em Georgia, Times, Times New Roman, serif; color:#af931e} h3 {font:1.2em/1.2em Georgia, Times, Times New Roman, serif; color:#af931e} a,a:visited {color:#9b3227; text-decoration:none} a:hover,a:focus,a:active {color:#9b3227; text-decoration:none; border-bottom:1px #9b3227 solid} a img {border:0} .thumbnail a:focus, .thumbnail a:hover {outline:0; border:0} .whitearrow {padding:0 10px 0 0; color:#ffffff; background:url(../images/whitearrow.png) 100% 70% no-repeat} .redarrow {padding:0 10px 0 0; color:#9b3227; background:url(../images/redarrow.png) 100% 65% no-repeat} .clear {clear:both} .wrap:after {content:"."; display:block; height:0; clear:both; visibility:hidden} .wrap {display:inline-block} * html .wrap {height:1%} .wrap {display:block} .err {background:#ffeeee; border:1px solid #C1463E; margin:1em; padding:0.666em; text-align:center} .msg {background:#eeffee; border:1px solid #B0C324; margin:1em; padding:0.666em; text-align:center} /************************************************************************************************************/ /* text */ .text {line-height:1.6; font-size: 1.05em} .text h1 {font-size:2em; margin:0.75em 0 0.2em} .text h2 {font-size:1.5em; font-weight:400; margin:0.75em 0 0.2em 0} .text h1+p, .text h2+p {margin-top:0} .text a, .text a:visited {color:#9b3227; border-bottom:1px #9b3227 dashed; text-decoration:none} .text a:hover, .text a:focus, .text a:active {color:#9b3227; text-decoration:none; border-bottom:2px #9b3227 solid} .text ol, .text ul {margin:1em 0 1em 3em; padding:0} .text li {margin:0 0 0.5em; line-height:1.4} .text blockquote {margin-left:3em} .text hr {position:relative; height:0.5em; margin:1em 0; background-color:#938f7b; color:#938f7b; border:0} .text hr.break {height:1px; overflow:hidden; visibility:hidden; border:0; clear: both} .text img, .text div.image {display:inline; float:left; margin:0.5em 2em} .text div.image img {margin:0} .text div.image p {margin:0; padding:0.5em 0 0; clear:both; color:#938f7b; font-size:0.9em; line-height:1.2} .text h2 div.image p {padding:0.3em 0 0; font-size:0.6em; font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} .text img.border, .text div.border img { border:1px solid #938f7b} .text .image-left, .text .embed-left {float:left; margin-left:0 !important} .text .image-right, .text .embed-right {float:right !important; margin-right:0 !important; clear: right} .text .image-center, .text .embed-center {float:none !important; margin:0 auto !important; display:block !important} .text .embed-center {text-align:center} .text .embed-center * {text-align:left} /************************************************************************************************************/ /* head */ img#logo {position:absolute; left:5em; top:3.4em; width:64px; height:40px} #head h1 {position:absolute; left:4.4em; top:1.6em; color:#557726; font-size:2.75em; font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; white-space: nowrap} #head h1 a {color:#557726} #head a#home {position:absolute; display:block; top:1em; left:0.5em; width:58em; height:9em} #head a:hover, #head a:focus, #head a:active {border:0} #topnav {position:absolute; top:1.5em; right:6em; list-style-type:none} #topnav li {display:inline; padding-left:1em} #topnav li a {color:#000; text-decoration:none} #topnav li a:hover, #topnav a:focus, #topnav a:active {color:#a7362a; border:0} #simplesearch {position:absolute; top:5.1em; right:6em; padding-right:0.5em; background:#fff; white-space: nowrap} #simplesearch .txt {border:0; width:11em} #simplesearch .btn {border:0 none; padding:0} #simplesearch label {display:none} #simplesearch label.over {position:absolute; top:0.5em; left:0.5em; color:#d5d3c7; display:inline} /*menu*/ #menu {position:absolute; left:0.9em; width:79.15em; height:2.5em; background:#c4b15f} #menu h3.title {display:none} /* breadcrumbs */ #bc {margin:0 0 1em 5.6em; font-size:0.9em; background:#fff} /*main home top boxes*/ #topboxes {position:relative; padding:1.8em 0 4em; background:#fff url(../images/main-gradient.png) repeat-x} #topboxes ul {width:69em; margin:0 auto; list-style-type:none} #topboxes li {float:left; width:20.35em; height:10.75em; margin:0 1.5em 0 0; padding:0.8em; background:#fff} #topboxes li h2 {font:700 1.9em "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} #topboxes li img {position:absolute; top:5.4em; z-index:10} #topboxes li p {position:absolute; top:5.4em; width:18.8em; height:6.35em; margin:0; padding:0.6em; z-index:20; color:#fff} #topboxes li p a {color:#fff} #topboxes li p a:hover, #topboxes li p a:focus, #topboxes li p a:active, #topboxes li h2 a:hover, #topboxes li h2 a:focus, #topboxes li h2 a:active {border:0} #topboxes li p a:hover span, #topboxes li p a:focus span, #topboxes li p a:active span{border-bottom:1px solid #fff} #topboxes li.red {margin:0} #topboxes li.sand h2 a {color:#c4b15f} #topboxes li.green h2 a {color:#557726} #topboxes li.red h2 a {color:#a7362a} #topboxes li.sand p {background:#c4b15f} #topboxes li.green p {background:#557726} #topboxes li.red p {background:#a7362a} #topboxes dl {display:block; width:69em; margin:1.5em auto 0 auto; background:#fff} #topboxes dt {float:left; padding:0.3em 0.6em; color:#4d4d4d; font:italic 700 1.5em Georgia, Times, Times New Roman, serif} #topboxes dd {float:left; line-height:2.7; font-size:1.1em} #topboxes hr {position:absolute; bottom:1.5em; left:5.1em; width:69em; border:1px solid #938f7b} /****************************************************************************** * main */ /* main - head */ #m-head {margin:1em 0} #m-head h1 {color:#af931e} #m-head p {color:#938f7b; font-size:1.25em; line-height:1.7; margin-top:0.5em} #m-head img.image-center {margin-bottom:1em; border:1px solid #938f7b} #m-head img.image-right {float:right; margin:0 0 1em 1em; border:1px solid #938f7b} #m-head .image-credits {float: right; clear: right; margin-top: -1em; font-size: 0.9em;} /* main - content */ #m-cnt #byline span {padding-right:0.35em; font-size:0.9em; color:#666} #m-cnt #byline .subject {font-weight:700; text-transform:uppercase} #m-cnt #author {margin-top:2em; padding-top:0.75em; text-align:right; border-top:1px dashed #666} /* main - content - download box */ #m-cnt ul.download {float:right; clear:right; width:15em; border:1px solid #d5d3c7; margin:1em 0 1.8em 1em; padding:0.45em; list-style-type:none; background:#fff url(../images/main-gradient.png) repeat-x 0 99%} #m-cnt ul.download h3 {color:#af931e; font-size:1.7em; border-bottom:1px solid #d5d3c7} #m-cnt ul.download li {margin:0.75em 0 0.75em 0.75em; padding-left:1.25em; color:#c4625e} /* main - content - order item link */ a#m-cnt-order {display: block; width:97%; clear: both; margin:2em 0; padding:0.45em; text-align: center; background-color:#c4b15f; border:0; color:#fff; font-weight:700} a#m-cnt-order:hover {border: 0} /* main - objects */ .m-objs {clear:both} .m-obj {position:relative; margin:1em 0 2.5em} .m-obj h2 {font-family:Georgia, Times, Times New Roman, serif; font-weight:400; font-style:italic} .m-obj .link {font-size:1.1em; white-space:nowrap} .m-obj .thumbnail {width:157px; height:156px; background:url(../images/imgframe.png) no-repeat} .m-obj .textwrap {width:29em; padding:0 0 2em} .m-obj .details {position:absolute; bottom:0; right:16em; margin-bottom:0.5em; white-space: nowrap} .m-obj .subject {padding:0 0.1em; font-size:0.85em; font-weight:700; text-transform:uppercase} .m-obj .date {font-size:0.8em; color:#666} .m-objs+.m-objs, #m-cnt+.m-objs {border-top:2px solid #938f7b; margin-top:1.5em; padding-top:1em} /* top stories */ .m-obj-ts {} .m-obj-ts .m-obj {margin:0 0 0 1em} .m-obj-ts h2 {font-size:2em; line-height:1.1em; color:#af931e} .m-obj-ts h2 a, .m-obj-ts h2 a:visited {color:#af931e} .m-obj-ts h2 a:hover, .m-obj-ts h2 a:focus, .m-obj-ts h2 a:active {color:#9b3227; border:0} .m-obj-ts p.desc {margin-bottom: 3em; font-size: 1.05em} /* litle stories */ .m-obj-ls {margin:1em 0; background:#F7F6F1; padding:0 1em 0 0} .m-obj-ls .m-obj {margin:0 0 0 1em} .m-obj-ls .m-obj+.m-obj {border-top:1px dashed #666} .m-obj-ls h2 {font-size:1.1em; line-height:2em; color:#3a3434} .m-obj-ls h2 a, .m-obj-ls h2 a:visited {color:#3a3434} .m-obj-ls h2 a:hover, .m-obj-ls h2 a:focus, .m-obj-ls h2 a:active {color:#9b3227; border:0} .m-obj-ls a.link {font-size:1.1em} /* archive listing */ .m-obj-archive .desc {margin-top:0.3em} /*objects 2 column listing*/ div.m-obj-2-1 {float:left;width:45%;overflow:hidden;margin-right:2em} div.m-obj-2-2 {float:left;width:45%;overflow:hidden} div.m-obj-2-1 .textwrap, div.m-obj-2-2 .textwrap {width: 20em; clear: both} div.m-obj-2-1 .thumbnail, div.m-obj-2-2 .thumbnail {display: none} div.m-obj-2-1 .details, div.m-obj-2-2 .details {bottom:0;margin-bottom:0.5em;position:relative;right:0} /* main search*/ #searchhead {font:2.5em/1.3em Georgia, Times, Times New Roman, serif; color:#af931e} #m-search {margin:1em 0 2em} #m-search .txt {width:25em; color:#a7362a; border:1px solid #c4b15f} #m-search .btn {color:#fff; background:#c4b15f; border:0; font-weight:700} /* span bar */ .spanbar {margin:2em 0 1em; text-align:center} .spanbar a, .spanbar span {margin:0 0.1em; padding:0.4em 0.8em; border:1px solid #d5d3c7} .spanbar a:hover {background:#f8f5f0; text-decoration:none; outline:1px solid #d5d3c7} .spanbar .active {color:#9b3227; background:#f8f5f0; border:1px solid #d5d3c7} .spanbar .first {border:0} .spanbar .last {border:0} /*more news link*/ #morenews {display: block; float: right; margin-top: 2em} /* main order items */ #orderitems {} #orderitems .category {margin:1em 0 2em} #orderitems .category h3 {padding:0.3em; color:#fff; background-color:#b09f8c; font:700 1.2em "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} #orderitems .item {float:left; width:21em; margin:1em 0} #orderitems .thumbnail {float:right; width:110px; height:110px; border:1px solid #938f7b} #orderitems h2 {font:400 1.7em/1.2 Georgia,Times,Times New Roman,serif; margin-bottom: 0.25em} #orderitems h2 a {color:inherit; border-color: inherit} #orderitems .txt {float:left; width:10.5em} #orderitems .txt p {margin:0 0 1em; line-height:1.4} #orderitems .txt .txtbox {width:2em; text-align:center} #orderitems .txt .soldout {color: #a7362a; font-weight: 700} .m-frm .orderbtns {width:98%; clear:both; margin:1em 0 3em; padding:0.5em; border-top:2px solid #b09f8c; text-align:right} .m-frm .orderbtns .btn {color:#fff; background:#c4b15f; border:0; font-weight:700} .m-frm .orderdetails h2, .frm h3.order {margin-top:1em; padding:0.3em; color:#fff; background-color:#b09f8c; font:700 1.2em "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} /* submit form */ .frm {margin:0} .m-frm {margin:1em 0 0} .m-frm span {color:#ae2621} .frm fieldset {width:95%; border:0; display:block; position: relative} .frm fieldset fieldset {clear:both; width: 100%; margin:0 0 3em; padding:0.5em 0 0; border-top: 2px solid #c4b15f} .frm fieldset legend {font-size: 1.4em} .frm fieldset label {display:block; font-weight:700; color:#4d4d4d} .frm fieldset label.error {color:#a7362a; font-weight: 400} .frm fieldset div.col {float:left; width:50%} .frm input.txt {border:1px solid #c4b15f; color:#a7362a} .frm textarea.txt {width:36.2em; color:#a7362a; border:1px solid #c4b15f} .frm input.error, .frm textarea.error {border-color: #a7362a; background-color: #d5d3c7} .frm p {margin:1em 0 0.5em 0} .frm .s input {width:5em} .frm .m input {width:10em} .frm .l input {width:20em} .frm .left {clear:none; float:left; margin:1em 1em 1em 0} .frm .nl {clear:left !important} .frm .inline {display: inline} .frm .radio p, .frm .checkbox p {margin-top:0.5em} .frm .radio p label, .frm .checkbox p label {display:inline; font-weight:400} .frm .radio label.error {position: absolute; left: 17em} .frm .radio span {display:block; font-weight:700; margin:0.5em 0 0} .frm .radio input {clear:left} .frm .btns .btn {color:#fff; background:#c4b15f; border:0; font-weight:700} .frm .text {margin-top: 2em} .frm .text ul {list-style-type: none; margin-left: 1em} .frm .text ul li span {color: #b09f8c} /* submit form ::confirm */ .m-frm-head h3 {margin-left:2em; font:400 1.7em/1.2 Georgia,Times,Times New Roman,serif} .m-frm-head ul {margin:1em 0 1em 4em; list-style-type:none} .m-frm-head ul li {} .m-frm-head ul li span {font-weight:700} .m-frm-head ul li p.inline {display:inline} .m-frm-head ul li p {margin:0 0 1em 0} .m-frm-head ul li p small {display:none} /*PayPal form*/ .paypal {margin: 1em 0 0.5em; text-align: center} .paypal .btn {color:#fff; background:#c4b15f; border:0; font-weight:700} /****************************************************************************** * right */ #right h4 {color:#b09f8c; font:400 1.5em Georgia,Times,Times New Roman,serif; line-height:1.5em; border-bottom:1px dashed #666; margin-bottom:0.5em} /* right object */ .r-obj {border:1px dashed #666; padding:0.8em; margin-bottom:2em} .r-obj h3 {padding:0.5em 0.2em 0.5em 0.5em; color:#fff; background-color:#b09f8c; font:700 1.5em "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif} .r-obj h3 a, .r-obj h3 a:visited {color:#fff} .r-obj h3 a:hover, .r-obj h3 a:focus, .r-obj h3 a:active {color:#fff; border:0} .r-obj .thumbnail {margin-top:0.7em} .r-obj .text {margin:0.3em 0.7em; overflow:hidden; color:#808080} .r-obj .text ol {margin:0.3em 0 0.3em 1.5em} .r-obj .text ul {margin:0.3em 0 0.3em 1.5em} .r-obj .text img {margin:0.2em 1em; border:0} .r-obj .link {margin:0.2em 0.7em; text-align:right} /*archive*/ #archivesearch {margin:0.2em 0 2em} #archivesearch .txt {width:15em; color:#a7362a; border:1px solid #c4b15f} #archivesearch .btn {color:#fff; background:#c4b15f; border:0; font-weight:700} #archiveyears {margin-left:2em; list-style-type:none; color:#b09f8c} #archiveyears li.active {list-style-type:disc} /*right containers*/ .r-containers {margin-bottom:1.5em} /*slogan*/ #slogan {padding:0.6em 0; color:#fff; font-size:1.3em; background:#928F7B; text-align:center} /****************************************************************************** * other stuff */ /*colophon*/ #colophon a, #colophon a:visited {color:#4d4d4d} #colophon a:hover, #colophon a:focus, #colophon a:active {color:#9b3227; border:0} #colophon b {font-size:1.1em} #colophon .vcard {font-size:0.85em} #colophon .vcard div {display:inline} #colophon .vcard .type {display:none} #colophon .credits {font-size:0.85em} /* error and messages */ #m-cnt-error {margin-bottom:2em; padding-left:0.5em} #m-cnt-error p {font-size:1.2em} #m-cnt-error ul {margin:1em 0 0 3em; line-height:1.5} #m-cnt-error ul li {margin-top:0.5em} div.err {clear:both; text-align:center; margin:1em 0.5em 2em; padding:0.5em; border:1px solid #a7362a; font-size:1.2em} div.err h3 {font-size:1em; font-weight:bold} div.err span {color:#557726} div.msg {margin:1em 0.5em 2em; padding:0.5em; text-align:center; font-weight:normal; font-size:1.3em; color:#557726; border:1px solid #a7362a} /* dump */ #dump {position:absolute; width:100%; background-color:#fff; text-align:left; font:12px Courier New, Arial, Verdana} #dump table {border-collapse:collapse; border:1px solid #ccc; border-style:none} #dump table td {border:1px solid #eee; padding:3px}